/* =====================================================================
   MOVEIN — 입주시공 통합관리 플랫폼
   Design System (오늘의집 스타일: 뉴트럴 + 절제된 포인트 + 넉넉한 여백)
   ===================================================================== */
:root{
  /* Brand */
  --brand:#0AA5A5;          /* 톤다운된 틸(teal) 포인트 */
  --brand-d:#088;
  --brand-l:#E6F6F6;
  --brand-ll:#F2FBFB;
  /* Neutral (오늘의집풍 그레이스케일) */
  --ink:#1A1A1A;            /* 본문 텍스트 */
  --ink-2:#4B4B4B;
  --mut:#8B8B8B;            /* 보조 텍스트 */
  --mut-2:#B0B0B0;
  --line:#EDEDED;           /* 얇은 구분선 */
  --line-2:#E3E3E3;
  --bg:#F6F6F6;             /* 페이지 배경 */
  --card:#FFFFFF;
  --hover:#F7F8F8;
  /* Semantic */
  --g:#22A06B; --g-l:#E9F7F0;
  --o:#F08C00; --o-l:#FEF4E6;
  --r:#E8493A; --r-l:#FDECEA;
  --b:#2B7FFF; --b-l:#E9F1FF;
  --p:#7A5AF8; --p-l:#F0ECFF;
  /* Shadow (아주 얕고 부드럽게) */
  --sh-1:0 1px 2px rgba(17,17,17,.04), 0 1px 3px rgba(17,17,17,.05);
  --sh-2:0 2px 8px rgba(17,17,17,.05), 0 4px 16px rgba(17,17,17,.04);
  --sh-3:0 8px 30px rgba(17,17,17,.10);
  --radius:16px;
  --radius-sm:12px;
  --radius-lg:20px;
  --side-w:248px;
  --side-w-c:76px;
  --topbar-h:72px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Pretendard","Noto Sans KR","Apple SD Gothic Neo",sans-serif;
  color:var(--ink); letter-spacing:-.01em; -webkit-font-smoothing:antialiased;
  font-size:14px;
}
button,input,select,textarea{font-family:inherit}
button{cursor:pointer; border:0; background:none}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#D9D9D9;border-radius:20px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#C4C4C4;background-clip:content-box}

/* =========================== 로그인 =========================== */
.login-wrap{
  min-height:100vh; display:grid; place-items:center; padding:24px;
  background:linear-gradient(180deg,#FBFBFB,var(--bg));
  position:relative; overflow:hidden;
}
.login-wrap:before{
  content:""; position:absolute; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle,rgba(10,165,165,.10),transparent 68%);
  top:-160px; right:-120px;
}
.login-card{
  width:100%; max-width:420px; background:#fff; border:1px solid var(--line);
  border-radius:24px; box-shadow:var(--sh-3); padding:40px 36px; position:relative; z-index:1;
}
.login-logo{
  display:flex; align-items:center; gap:11px; font-size:24px; font-weight:800;
  color:var(--ink); margin-bottom:6px; letter-spacing:-.03em;
}
.login-logo:before{
  content:"M"; width:40px; height:40px; border-radius:12px;
  background:var(--brand); color:#fff; display:grid; place-items:center; font-size:20px; font-weight:800;
}
.login-sub{color:var(--mut); font-size:14px; margin-bottom:26px; line-height:1.6}
.role-tabs{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:22px}
.role-tabs button{
  border:1.5px solid var(--line-2); background:#fff; border-radius:14px; padding:14px 6px;
  font-weight:700; color:var(--ink-2); font-size:13px; transition:.16s ease; line-height:1.7;
}
.role-tabs button i{font-size:17px; color:var(--mut)}
.role-tabs button:hover{border-color:var(--mut-2)}
.role-tabs button.active{border-color:var(--brand); background:var(--brand-ll); color:var(--brand-d)}
.role-tabs button.active i{color:var(--brand)}
.demo-hint{
  margin-top:18px; padding:14px 16px; border-radius:14px; background:#FAFAFA;
  border:1px solid var(--line); font-size:12.5px; color:var(--ink-2); line-height:1.7;
}
.demo-hint b{color:var(--ink)}
.chip{cursor:pointer; color:var(--brand-d); font-weight:700}
.chip:hover{text-decoration:underline}

/* =========================== 앱 레이아웃 =========================== */
.app{ min-height:100vh; }

/* ---- 사이드바 ---- */
.side{
  position:fixed; top:0; left:0; width:var(--side-w); height:100vh; z-index:60;
  background:#fff; border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:18px 14px 14px;
  transition:width .22s ease, transform .22s ease;
}
.side-head{display:flex; align-items:center; justify-content:space-between; padding:2px 6px 0; margin-bottom:18px}
.logo{display:flex; align-items:center; gap:10px; font-size:19px; font-weight:800; color:var(--ink); letter-spacing:-.03em; overflow:hidden}
.logo-mark{
  flex:none; width:34px; height:34px; border-radius:10px; background:var(--brand); color:#fff;
  display:grid; place-items:center; font-size:17px; font-weight:800;
}
.logo-text{white-space:nowrap; transition:opacity .15s}
.collapse-btn{
  flex:none; width:30px; height:30px; border-radius:9px; color:var(--mut);
  display:grid; place-items:center; transition:.15s; font-size:13px;
}
.collapse-btn:hover{background:var(--hover); color:var(--ink)}

.user-box{
  display:flex; align-items:center; gap:11px; padding:11px 12px; margin:0 2px 16px;
  border:1px solid var(--line); border-radius:14px; background:#FBFBFB;
}
.ub-avatar{
  flex:none; width:38px; height:38px; border-radius:11px; background:var(--brand-l); color:var(--brand-d);
  display:grid; place-items:center; font-size:16px;
}
.ub-info{overflow:hidden; line-height:1.35}
.ub-info b{display:block; font-size:14px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ub-role{font-size:11.5px; color:var(--mut); font-weight:600}

.nav{flex:1; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; gap:2px; padding-right:2px}
.nav::-webkit-scrollbar{width:5px}
.nav-title{margin:14px 12px 5px; font-size:11px; color:var(--mut-2); font-weight:800; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap}
.nav-title:first-child{margin-top:2px}
.nav-btn{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  border-radius:11px; padding:10px 12px; font-weight:600; color:var(--ink-2);
  font-size:13.5px; transition:.14s ease; white-space:nowrap; overflow:hidden;
}
.nav-btn i{flex:none; width:19px; text-align:center; color:var(--mut); font-size:14.5px; transition:.14s}
.nav-btn:hover{background:var(--hover); color:var(--ink)}
.nav-btn.active{background:var(--brand-l); color:var(--brand-d); font-weight:700}
.nav-btn.active i{color:var(--brand)}
.nav-label{transition:opacity .12s}

.logout{
  display:flex; align-items:center; gap:11px; width:100%; margin-top:8px; padding:10px 12px;
  border-radius:11px; color:var(--mut); font-weight:600; font-size:13.5px; transition:.14s; white-space:nowrap; overflow:hidden;
}
.logout i{flex:none; width:19px; text-align:center; font-size:14.5px}
.logout:hover{background:var(--r-l); color:var(--r)}

/* 접힘 상태 */
.side.collapsed{width:var(--side-w-c); padding-left:10px; padding-right:10px}
.side.collapsed .logo-text,
.side.collapsed .ub-info,
.side.collapsed .nav-label,
.side.collapsed .nav-title{display:none}
.side.collapsed .side-head{justify-content:center}
.side.collapsed .collapse-btn{display:none}
.side.collapsed .user-box{justify-content:center; padding:9px}
.side.collapsed .nav-btn,
.side.collapsed .logout{justify-content:center; padding:11px 0}
.side.collapsed .logo{gap:0}

/* ---- 메인 ---- */
.main{
  margin-left:var(--side-w); min-height:100vh; display:flex; flex-direction:column;
  transition:margin-left .22s ease;
}
.side.collapsed ~ .main{margin-left:var(--side-w-c)}

/* topbar */
.topbar{
  position:sticky; top:0; z-index:40; min-height:var(--topbar-h);
  display:flex; align-items:center; gap:16px; padding:14px 30px;
  background:rgba(246,246,246,.82); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.tb-title{flex:1; min-width:0}
.tb-title h1{font-size:21px; font-weight:800; letter-spacing:-.03em; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tb-title p{font-size:13px; color:var(--mut); margin-top:3px; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tb-right{display:flex; align-items:center; gap:12px}
.actions{display:flex; gap:8px; flex-wrap:wrap}
.icon-btn{
  flex:none; width:40px; height:40px; border-radius:12px; background:#fff; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--ink-2); font-size:15px; transition:.14s; box-shadow:var(--sh-1);
}
.icon-btn:hover{background:var(--hover); color:var(--ink)}
.menu-toggle{display:none}

/* 알림 */
.notif{position:relative}
.notif-dot{
  position:absolute; top:-4px; right:-4px; min-width:17px; height:17px; padding:0 4px;
  background:var(--r); color:#fff; border-radius:20px; font-size:10px; font-weight:800;
  display:grid; place-items:center; border:2px solid var(--bg);
}
.notif-panel{
  position:absolute; top:calc(100% + 10px); right:0; width:320px; max-height:420px; overflow-y:auto;
  background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--sh-3);
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:.16s; z-index:50;
}
.notif-panel.open{opacity:1; visibility:visible; transform:translateY(0)}
.np-head{padding:15px 16px; font-weight:800; font-size:14px; border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff}
.np-head .muted{font-weight:600; font-size:12px; margin-left:4px}
.np-item{padding:12px 16px; border-bottom:1px solid var(--line); transition:.12s}
.np-item:hover{background:var(--hover)}
.np-item b{display:block; font-size:13px; font-weight:700; margin-bottom:2px}
.np-item p{font-size:12.5px; color:var(--ink-2); line-height:1.5; margin-bottom:4px}
.np-item small{font-size:11px; color:var(--mut-2)}
.np-item.unread{background:var(--brand-ll)}
.np-item.unread b:before{content:"●"; color:var(--brand); font-size:8px; margin-right:6px; vertical-align:middle}
.np-empty{padding:36px 16px; text-align:center; color:var(--mut); font-size:13px}

/* view */
.view-wrap{flex:1; padding:24px 30px 56px; max-width:1240px; width:100%}
.view-wrap.fade{animation:fadeIn .24s ease}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}

/* backdrop (모바일 드로어) */
.backdrop{
  position:fixed; inset:0; background:rgba(17,17,17,.4); z-index:55;
  opacity:0; visibility:hidden; transition:.2s;
}
.backdrop.show{opacity:1; visibility:visible}

/* =========================== 컴포넌트 =========================== */
/* 버튼 */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:var(--brand); color:#fff; border-radius:12px; padding:11px 16px;
  font-weight:700; font-size:13.5px; transition:.15s ease; box-shadow:var(--sh-1);
}
.btn:hover{background:var(--brand-d); transform:translateY(-1px); box-shadow:var(--sh-2)}
.btn:active{transform:none}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none}
.btn.sub{background:#fff; color:var(--ink-2); border:1px solid var(--line-2)}
.btn.sub:hover{background:var(--hover); color:var(--ink); border-color:var(--mut-2)}
.btn.green{background:var(--g)} .btn.green:hover{background:#1c8a5b}
.btn.orange{background:var(--o)} .btn.orange:hover{background:#d97d00}
.btn.red{background:var(--r)} .btn.red:hover{background:#cf3a2c}
.btn.sm{padding:7px 12px; font-size:12.5px; border-radius:10px; box-shadow:none}
.btn.block{width:100%}

/* 그리드 */
.grid{display:grid; gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* 카드 */
.card{border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:20px; box-shadow:var(--sh-1)}
.card h3{font-size:16px; font-weight:800; letter-spacing:-.02em; margin-bottom:16px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.card h3 .muted{font-weight:600; font-size:12.5px}

/* 메트릭 카드 */
.metric-card{display:flex; align-items:center; gap:15px; padding:18px 20px}
.metric-card .mc-ic{
  flex:none; width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:19px;
  background:var(--brand-l); color:var(--brand-d);
}
.mc-ic.blue{background:var(--b-l); color:var(--b)}
.mc-ic.green{background:var(--g-l); color:var(--g)}
.mc-ic.orange{background:var(--o-l); color:var(--o)}
.mc-ic.red{background:var(--r-l); color:var(--r)}
.mc-ic.purple{background:var(--p-l); color:var(--p)}
.mc-title{font-size:13px; color:var(--mut); font-weight:600; display:block; margin-bottom:3px}
.metric{font-size:27px; font-weight:800; letter-spacing:-.03em; color:var(--ink); line-height:1.1}
.metric.sm{font-size:22px}
.muted{color:var(--mut)}
.hint{color:var(--mut); font-size:13px; line-height:1.6; margin-bottom:14px}

/* 폼 */
.field{margin-bottom:15px}
.field label{display:block; font-weight:700; font-size:12.5px; margin-bottom:7px; color:var(--ink-2)}
.input,.select,.textarea{
  width:100%; border:1px solid var(--line-2); border-radius:11px; padding:11px 13px;
  font-size:14px; background:#fff; outline:none; transition:.14s; color:var(--ink);
}
.input:focus,.select:focus,.textarea:focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(10,165,165,.12)}
.input::placeholder{color:var(--mut-2)}
.textarea{min-height:94px; resize:vertical; line-height:1.5}
.input[readonly]{background:#FAFAFA; color:var(--mut)}

/* 뱃지 */
.badge{display:inline-flex; align-items:center; gap:4px; border-radius:8px; padding:4px 9px; font-size:11.5px; font-weight:700; white-space:nowrap; line-height:1.3}
.badge.blue{background:var(--b-l);color:var(--b)}
.badge.green{background:var(--g-l);color:var(--g)}
.badge.orange{background:var(--o-l);color:var(--o)}
.badge.red{background:var(--r-l);color:var(--r)}
.badge.gray{background:#F0F0F0;color:var(--mut)}
.badge.purple{background:var(--p-l);color:var(--p)}
.badge.cyan{background:#E3F6F9;color:#0E8A9E}

/* 리스트 아이템 */
.item{
  display:flex; justify-content:space-between; gap:12px; align-items:center;
  padding:11px 2px; border-bottom:1px solid var(--line); font-size:13.5px;
}
.item:last-child{border-bottom:0}
.item b{font-weight:700; color:var(--ink-2)}
.item small{color:var(--mut); display:block; margin-top:2px; font-weight:500}
.item > div > b{color:var(--ink)}

/* 테이블 */
table{width:100%; border-collapse:collapse}
th,td{padding:13px 12px; border-bottom:1px solid var(--line); text-align:left; font-size:13px; vertical-align:middle}
th{background:#FAFAFA; color:var(--mut); font-size:12px; font-weight:700; letter-spacing:0}
tr:last-child td{border-bottom:0}
tbody tr{transition:.1s}
.card .scroll table tr:hover td{background:#FCFCFC}
td b{font-weight:700; color:var(--ink)}
.scroll{overflow:auto; border:1px solid var(--line); border-radius:var(--radius-sm)}
.scroll table{min-width:720px}
.scroll table th:first-child,.scroll table td:first-child{padding-left:16px}
.card > .scroll{margin:0 -20px -20px; border-radius:0 0 var(--radius) var(--radius); border-left:0; border-right:0; border-bottom:0}
.card > .scroll table{min-width:0; width:calc(100% )}

/* 간트 */
.gantt{display:grid; grid-template-columns:150px repeat(21,minmax(24px,1fr));
  border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; min-width:880px}
.gantt div{min-height:36px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:8px 7px; font-size:11px}
.gantt .gh{background:#FAFAFA; font-weight:800; color:var(--mut)}
.gantt b{font-size:12px; font-weight:700}
.bar{height:14px; border-radius:20px; background:var(--brand); box-shadow:var(--sh-1)}

/* 타임라인 */
.timeline{position:relative; padding-left:28px}
.timeline:before{content:""; position:absolute; left:8px; top:4px; bottom:4px; width:2px; background:var(--line-2)}
.event{position:relative; margin-bottom:18px}
.event:before{content:""; position:absolute; left:-27px; top:2px; width:15px; height:15px; border-radius:50%; background:var(--brand); border:3px solid var(--brand-l)}
.event.done:before{background:var(--g); border-color:var(--g-l)}
.event b{display:block; margin-bottom:3px; font-size:13.5px; font-weight:700}
.event p{color:var(--ink-2); font-size:12.5px; line-height:1.5}

/* 체크박스 리스트 */
.check-row{display:flex; align-items:center; gap:13px; padding:13px 14px; border:1px solid var(--line-2);
  border-radius:13px; margin-bottom:8px; cursor:pointer; transition:.14s}
.check-row:hover{border-color:var(--mut-2); background:#FCFCFC}
.check-row.on{border-color:var(--brand); background:var(--brand-ll)}
.check-row input{width:19px; height:19px; accent-color:var(--brand); flex:none}
.check-row .cr-body{flex:1}
.check-row .cr-body b{font-size:14px; font-weight:700}
.check-row .cr-body small{display:block; color:var(--mut); margin-top:3px; font-weight:500; line-height:1.5}

/* 빈 상태 */
.empty{text-align:center; padding:52px 20px; color:var(--mut)}
.empty i{font-size:38px; color:var(--mut-2); margin-bottom:14px; display:block}
.empty p{font-size:14px}

/* 탭 */
.tabs{display:flex; gap:8px; overflow:auto; padding-bottom:6px; margin-bottom:16px}
.tabs button{white-space:nowrap; border:1px solid var(--line-2); background:#fff; border-radius:10px;
  padding:8px 14px; font-weight:700; color:var(--ink-2); font-size:13px; transition:.14s}
.tabs button:hover{border-color:var(--mut-2)}
.tabs button.active{background:var(--ink); color:#fff; border-color:var(--ink)}

.section-title{font-size:13.5px; font-weight:800; margin-bottom:12px; color:var(--ink-2)}
.divider{height:1px; background:var(--line); margin:18px 0}

/* Toast */
.toast{position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(18px);
  background:var(--ink); color:#fff; padding:13px 22px; border-radius:12px; font-weight:600;
  font-size:13.5px; opacity:0; pointer-events:none; transition:.25s; z-index:9999; box-shadow:var(--sh-3);
  display:flex; align-items:center; gap:9px;}
.toast:before{font-family:"Font Awesome 6 Free"; font-weight:900; font-size:14px}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.error{background:#C0392B} .toast.error:before{content:"\f06a"}
.toast.success{background:var(--g)} .toast.success:before{content:"\f058"}

/* Modal */
.modal-overlay{position:fixed; inset:0; background:rgba(17,17,17,.45); display:grid; place-items:center;
  z-index:1000; padding:20px; backdrop-filter:blur(3px); animation:fadeIn .18s ease}
.modal{background:#fff; border-radius:var(--radius-lg); max-width:540px; width:100%; max-height:88vh; overflow:auto;
  box-shadow:var(--sh-3); padding:28px; animation:pop .2s ease}
@keyframes pop{from{opacity:0; transform:scale(.97)}to{opacity:1; transform:none}}
.modal h3{font-size:19px; font-weight:800; letter-spacing:-.02em; margin-bottom:5px}
.modal .modal-sub{color:var(--mut); margin-bottom:18px; font-size:13.5px; line-height:1.5}
.modal-foot{display:flex; gap:8px; justify-content:flex-end; margin-top:22px}
.modal .item{padding:10px 0}

/* 스피너 */
.spinner{display:inline-block; width:36px; height:36px; border:3px solid var(--line-2);
  border-top-color:var(--brand); border-radius:50%; animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{display:grid; place-items:center; padding:60px}

/* 플로우 스텝 */
.flow-steps{display:flex; gap:6px; overflow:auto; margin-bottom:18px; padding-bottom:4px}
.flow-steps .fstep{flex:1; min-width:84px; text-align:center; background:#F2F2F2; border-radius:11px;
  padding:10px 6px; font-weight:700; color:var(--mut); font-size:12px}
.flow-steps .fstep.on{background:var(--brand-l); color:var(--brand-d)}
.flow-steps .fstep.done{background:var(--g-l); color:var(--g)}

/* =========================== 반응형 =========================== */
@media(max-width:1100px){
  .g4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:960px){
  .side{transform:translateX(-100%); box-shadow:var(--sh-3); width:var(--side-w)!important; padding:18px 14px!important}
  .side.open{transform:translateX(0)}
  .side.collapsed{width:var(--side-w)!important}
  .side.collapsed .logo-text,.side.collapsed .ub-info,.side.collapsed .nav-label,.side.collapsed .nav-title{display:block}
  .side.collapsed .collapse-btn{display:none}
  .main{margin-left:0!important}
  .menu-toggle{display:grid}
  .collapse-btn{display:none}
  .topbar{padding:12px 16px}
  .view-wrap{padding:18px 16px 48px}
  .tb-title h1{font-size:18px}
  .tb-title p{display:none}
  .g2,.g3{grid-template-columns:1fr}
}
@media(max-width:560px){
  .g4{grid-template-columns:1fr}
  /* 모바일: 액션 버튼을 알림 버튼 왼쪽 옆(한 줄)에 유지 */
  .topbar{gap:10px; padding:12px 14px}
  .tb-right{gap:8px}
  .actions{gap:6px}
  /* 버튼 콤팩트화(짧은 라벨 '신청'이라 한 줄에 여유롭게 들어감) */
  .actions .btn{padding:9px 14px; font-size:13.5px; white-space:nowrap}
  .modal{padding:22px}
}

/* ===== 홈 화면 ===== */
.home-hero{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--sh-2); margin-bottom:20px; min-height:340px;
  display:flex; align-items:flex-end;
}
.home-hero-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
.home-hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,20,20,.05) 0%, rgba(8,60,60,.30) 45%, rgba(6,50,50,.78) 100%);
}
.home-hero-inner{
  position:relative; z-index:2; padding:28px 30px; color:#fff; max-width:640px;
}
.home-badge{
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.16); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.28);
  color:#fff; font-size:12.5px; font-weight:700;
  padding:6px 12px; border-radius:999px; margin-bottom:14px;
}
.home-title{
  font-size:27px; font-weight:800; line-height:1.28; letter-spacing:-.03em;
  color:#fff; margin-bottom:10px; text-shadow:0 2px 12px rgba(0,0,0,.25);
}
.home-desc{
  font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.92);
  margin-bottom:20px; text-shadow:0 1px 8px rgba(0,0,0,.2);
}
.home-cta{
  font-size:16px; font-weight:800; padding:14px 26px; border-radius:14px;
  box-shadow:0 8px 24px rgba(10,165,165,.45);
}
.home-cta i{margin-right:8px}

.home-status{margin-bottom:20px}
.home-status h3{margin-bottom:12px; font-size:16px; display:flex; align-items:center; gap:8px}

.home-steps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
}
.home-step{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 14px; text-align:center; position:relative;
  box-shadow:var(--sh-2);
}
.home-step .hs-no{
  position:absolute; top:10px; right:12px;
  font-size:12px; font-weight:800; color:var(--mut-2);
}
.home-step i{
  font-size:22px; color:var(--brand); margin-bottom:10px; display:block;
}
.home-step b{display:block; font-size:14px; color:var(--ink); margin-bottom:3px}
.home-step small{font-size:12px; color:var(--mut)}

@media(max-width:768px){
  .home-hero{min-height:300px}
  .home-hero-inner{padding:24px 22px}
  .home-title{font-size:22px}
  .home-desc{font-size:13.5px}
  .home-cta{width:100%; justify-content:center; font-size:15px}
  .home-steps{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .home-hero{min-height:280px; border-radius:var(--radius)}
  .home-title{font-size:20px}
}

/* ===== PWA: iOS 노치/홈바 세이프에어리어 대응 ===== */
.topbar{padding-top:env(safe-area-inset-top,0)}
.side{padding-bottom:env(safe-area-inset-bottom,0)}

/* ===== PWA: 설치 유도 배너 ===== */
.pwa-install{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:9000;
  display:flex;align-items:center;gap:12px;
  background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:12px 14px;
  box-shadow:var(--sh-3);
  transform:translateY(140%);opacity:0;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .32s;
  padding-bottom:calc(12px + env(safe-area-inset-bottom,0));
}
.pwa-install.show{transform:translateY(0);opacity:1}
.pwa-install .pwa-ic img{width:44px;height:44px;border-radius:12px;display:block}
.pwa-install .pwa-msg{flex:1;font-size:13.5px;color:var(--ink);line-height:1.5}
.pwa-install .pwa-msg small{color:var(--mut);font-size:12px}
.pwa-install .pwa-act{display:flex;align-items:center;gap:6px}
.pwa-install .pwa-go{
  background:var(--brand);color:#fff;border:none;border-radius:10px;
  padding:9px 14px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;
}
.pwa-install .pwa-go:hover{background:var(--brand-d)}
.pwa-install .pwa-x{
  background:transparent;border:none;color:var(--mut);
  width:32px;height:32px;border-radius:8px;cursor:pointer;font-size:15px;
}
.pwa-install .pwa-x:hover{background:var(--bg)}
@media(min-width:640px){
  .pwa-install{left:auto;right:20px;bottom:20px;max-width:400px}
}

/* ===== PWA: 업데이트 알림 바 ===== */
.pwa-update{
  position:fixed;left:50%;bottom:16px;transform:translate(-50%,140%);
  z-index:9100;display:flex;align-items:center;gap:14px;
  background:var(--ink);color:#fff;border-radius:12px;
  padding:11px 16px;font-size:13.5px;box-shadow:var(--sh-3);
  opacity:0;transition:transform .3s,opacity .3s;
}
.pwa-update.show{transform:translate(-50%,0);opacity:1}
.pwa-update button{
  background:var(--brand);color:#fff;border:none;border-radius:8px;
  padding:6px 14px;font-size:12.5px;font-weight:700;cursor:pointer;
}