/* 모아 — Material 3 (플랫: 그림자 대신 색 층·상태 층) */
/* ── 토큰: 색 역할 (씨앗 #2F86FF) ─────────────────── */
:root{
  --primary:#2F86FF; --on-primary:#fff;
  --primary-c:#D8E6FF; --on-primary-c:#00285C;
  --secondary-c:#DDE3F2; --on-secondary-c:#151C2A;
  --surface:#FAFBFF; --surface-low:#F3F5FA; --surface-c:#EDF0F6; --surface-high:#E6E9F0;
  --on-surface:#191C21; --on-surface-v:#43474F; --outline:#74777F; --outline-v:#C4C6D0;
  --inverse:#2E3036; --on-inverse:#EFF0F7;
  --good:#146C38; --good-c:#C9F0D3; --neu:#43474F; --neu-c:#E6E9F0; --bad:#B3261E; --bad-c:#FFDAD6;
  --gold:#F5C542; --on-gold:#5A4300; --silver:#C5CBD3; --on-silver:#353B43; --bronze:#D49A6A; --on-bronze:#4E2C10;
  /* 모양 */
  --r-xs:4px; --r-s:8px; --r-m:12px; --r-l:16px; --r-xl:28px; --r-full:999px;
  /* 글자 (M3 type scale, Pretendard) */
  --f:'Pretendard Variable',Pretendard,system-ui,sans-serif;
  --headline:600 24px/32px var(--f); --title-l:600 22px/28px var(--f); --title-m:600 16px/24px var(--f);
  --body-l:400 16px/24px var(--f); --body-m:400 14px/20px var(--f); --body-s:400 12px/16px var(--f);
  --label-l:600 14px/20px var(--f); --label-m:600 12px/16px var(--f);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font:var(--body-m);color:var(--on-surface);background:var(--surface-c);letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}
a{color:inherit}
img{max-width:100%}
[hidden]{display:none!important}
.ms{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;font-size:20px;line-height:1;display:inline-block;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24;flex:none;user-select:none}
.sp{flex:1}
.pc{display:none}

/* 상태 층: 누르면 현재 글자색을 8~12% 겹친다 */
.btn,.icon-btn,.chip:not(.assist),.tile,.act,.card,.tab,.li,.choice,.opt,.rvc{position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}
.btn::after,.icon-btn::after,.chip:not(.assist)::after,.tile::after,.act::after,.card::after,.tab::after,.li::after,.choice::after,.opt::after,.rvc::after{content:"";position:absolute;inset:0;background:currentColor;opacity:0;transition:opacity .15s;pointer-events:none}
:is(.btn,.icon-btn,.chip,.tile,.act,.card,.tab,.li,.choice,.opt,.rvc):hover::after{opacity:.08}
:is(.btn,.icon-btn,.chip,.tile,.act,.card,.tab,.li,.choice,.opt,.rvc):active::after{opacity:.12}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* ── 틀 ── */
.app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--surface);position:relative;z-index:0;isolation:isolate;padding-bottom:40px}
.app.has-bottom{padding-bottom:110px}
.narrow{max-width:560px;margin:0 auto}
.pad{padding:12px 16px}
.divider{height:1px;background:var(--outline-v);margin:24px 16px 8px}

/* Top app bar (작게) */
.appbar{display:flex;align-items:center;gap:4px;height:64px;padding:0 8px 0 4px;position:sticky;top:0;z-index:20;background:var(--surface)}
.appbar h1{font:var(--title-l);padding-left:12px;white-space:nowrap}
.appbar .icon-btn + h1{padding-left:4px}
.brand{font:800 24px/1 var(--f);color:var(--primary);text-decoration:none;letter-spacing:-.03em}
.banner{display:flex;gap:10px;align-items:flex-start;margin:4px 16px 0;padding:12px 16px;border-radius:var(--r-m);background:var(--primary-c);color:var(--on-primary-c);font:var(--body-m);text-decoration:none}
.banner.link{background:var(--surface-low);color:var(--on-surface-v);margin-top:24px}
.banner.link b{color:var(--on-surface)}
.banner .ms{color:var(--primary);margin-top:1px}

/* 글자 */
.t-head{font:var(--headline)}
.t-title{font:var(--title-m)}
.head{padding:8px 16px 16px}
.head p{font:var(--body-m);color:var(--on-surface-v);margin-top:4px}
.sec-t{display:flex;align-items:center;gap:8px;padding:24px 16px 8px}
.sec-t h2{font:var(--title-m);flex:1}
.sec-t a{font:var(--label-l);color:var(--primary);text-decoration:none}
.count{font:var(--label-m);color:var(--on-surface-v);background:var(--surface-high);padding:2px 8px;border-radius:var(--r-full)}
.hint{font:var(--body-s);color:var(--on-surface-v);padding:8px 16px}
.empty{padding:40px 16px;text-align:center;color:var(--on-surface-v)}
.empty b{display:block;font:var(--title-m);color:var(--on-surface);margin-bottom:4px}
.empty.sm{padding:24px 16px}
.empty .ms{vertical-align:-4px;color:var(--primary)}

/* ── 버튼 (Filled · Tonal · Outlined · Text) ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 24px;border-radius:var(--r-full);font:var(--label-l);background:var(--primary);color:var(--on-primary);text-decoration:none;white-space:nowrap}
.btn .ms{font-size:18px}
.btn.tonal{background:var(--secondary-c);color:var(--on-secondary-c)}
.btn.outlined{background:transparent;color:var(--on-surface-v);box-shadow:inset 0 0 0 1px var(--outline)}
.btn.text{background:transparent;color:var(--primary);padding:0 12px}
.btn.sm{height:36px;padding:0 16px}
.btn.text.sm{padding:0 10px}
.btn.lg{height:56px;font:var(--title-m);flex:1}
.icon-btn{width:48px;height:48px;border-radius:var(--r-full);display:grid;place-items:center;color:var(--on-surface-v);flex:none}
.icon-btn .ms{font-size:24px}
.icon-btn.add{color:var(--outline-v)}
.icon-btn.add .ms{font-size:32px}
.icon-btn.add.on{color:var(--primary)}
.stack{display:flex;flex-direction:column;gap:8px;padding:16px}
.stack .btn{width:100%}
/* 바닥 고정 버튼 줄 */
.bottom{position:fixed;left:0;right:0;bottom:0;z-index:15;max-width:480px;margin:0 auto;display:flex;gap:8px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--outline-v)}

/* ── 칩 (Filter · Assist) ── */
.chips{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 12px}
.chips.filter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.chips.filter::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 16px;border-radius:var(--r-s);font:var(--label-l);color:var(--on-surface-v);box-shadow:inset 0 0 0 1px var(--outline-v);white-space:nowrap;flex:none}
.chip .ms{font-size:18px;margin-left:-6px}
.chip[aria-pressed=true]{background:var(--secondary-c);color:var(--on-secondary-c);box-shadow:none}
.chip.assist{box-shadow:none;padding:0 12px 0 10px}
.chip.assist .ms{margin-left:0}
.chip.good{background:var(--good-c);color:var(--good)}
.chip.neu{background:var(--neu-c);color:var(--neu)}
.chip.bad{background:var(--bad-c);color:var(--bad)}

/* ── 탭 (Primary tabs) ── */
.tabs{display:flex;border-bottom:1px solid var(--surface-high)}
.tab{flex:1;height:48px;font:var(--title-m);color:var(--on-surface-v)}
.tab[aria-selected=true]{color:var(--primary)}
.tab[aria-selected=true]::before{content:"";position:absolute;left:50%;bottom:0;width:56px;height:3px;transform:translateX(-50%);border-radius:3px 3px 0 0;background:var(--primary)}
.toolbar{display:flex;align-items:center;gap:8px;padding:12px 16px 8px}

/* ── 시공 고르기 타일 · 행동 카드 ── */
.cats{display:grid;gap:20px;padding:16px}
.cats h2{margin-bottom:10px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 4px;border-radius:var(--r-m);background:var(--surface-low);font:var(--label-m);color:var(--on-surface)}
.tile .ms{font-size:32px;color:var(--primary)}
.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 16px}
.act{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:16px 12px;border-radius:var(--r-l);background:var(--surface-low);text-align:left;min-width:0}
.act .ms{font-size:28px;color:var(--primary);margin-bottom:8px}
.act b{font:var(--title-m)}
.act small{font:var(--body-s);color:var(--on-surface-v)}
.act.pri{background:var(--primary);color:var(--on-primary)}
.act.pri .ms,.act.pri small{color:var(--on-primary)}

/* ── 업체 카드 (Outlined card) ── */
.list{display:flex;flex-direction:column;gap:12px;padding:0 16px}
.card{display:block;padding:16px 8px 16px 16px;border-radius:var(--r-m);box-shadow:inset 0 0 0 1px var(--outline-v);background:var(--surface);cursor:pointer;text-align:left}
.card-hd{display:flex;align-items:flex-start;gap:12px}
.rank{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-full);font:700 14px/1 var(--f);background:var(--surface-high);color:var(--on-surface-v);flex:none;margin-top:2px}
.rank.r1{background:var(--gold);color:var(--on-gold)}
.rank.r2{background:var(--silver);color:var(--on-silver)}
.rank.r3{background:var(--bronze);color:var(--on-bronze)}
.mid{flex:1;min-width:0}
.name{font:var(--title-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta{font:var(--body-s);color:var(--on-surface-v);margin-top:2px}
.meta b{font:var(--label-m);color:var(--primary)}
.card .icon-btn{margin:-10px 0 -10px}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:12px 8px 0 40px;border-radius:var(--r-s);overflow:hidden;max-width:420px}
.shots img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--surface-high)}
.noshot{display:grid;place-items:center;background:var(--surface-low);color:var(--on-surface-v);font:var(--body-s);text-align:center;padding:4px}
.card .chips{padding:12px 0 0 40px}
.why1{font:var(--label-m);color:var(--primary);padding:10px 0 0 40px}

/* 목록 줄 */
.li{display:flex;align-items:center;gap:16px;width:100%;padding:8px 16px;min-height:64px;text-align:left}
.li img{width:48px;height:48px;border-radius:var(--r-s);object-fit:cover;flex:none}
.li b{display:block;font:var(--body-l);font-weight:500}
.li small{font:var(--body-m);color:var(--on-surface-v)}
.li > .ms{color:var(--on-surface-v)}
.mo-i{display:inline-flex}.pc-i{display:none}

/* 최근 후기 가로 넘김 */
.hscroll{display:flex;gap:8px;overflow-x:auto;padding:0 16px 4px;scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}
.rvc{flex:none;width:240px;padding:16px;border-radius:var(--r-m);background:var(--surface-low);text-align:left}
.rvc p{font:var(--body-m);margin:8px 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rvc small{font:var(--body-s);color:var(--on-surface-v)}
.src{display:inline-block;font:var(--label-m);color:var(--on-secondary-c);background:var(--secondary-c);padding:2px 8px;border-radius:var(--r-xs)}

/* ── 상세 ── */
.gal{display:flex;gap:8px;overflow-x:auto;padding:0 16px 12px;scrollbar-width:none;scroll-snap-type:x mandatory}
.gal::-webkit-scrollbar{display:none}
.gal img{flex:none;width:76%;max-width:340px;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-m);scroll-snap-align:start}
.sum{display:flex;align-items:center;gap:16px;margin:4px 16px 0;padding:20px;border-radius:var(--r-l);background:var(--primary-c);color:var(--on-primary-c)}
.sum .num{font:700 40px/1 var(--f);letter-spacing:-.03em}
.sum b{display:block;font:var(--title-m)}
.sum small{font:var(--body-s);opacity:.8}
.why{display:flex;gap:10px;align-items:flex-start;margin:0 16px;padding:12px 16px;border-radius:var(--r-m);font:var(--body-m)}
.why .ms{font-size:22px}
.why.good{background:var(--good-c);color:var(--good)}
.why.neu{background:var(--neu-c);color:var(--neu)}
.why.bad{background:var(--bad-c);color:var(--bad)}
.legend{display:flex;align-items:center;gap:4px;font:var(--body-s);color:var(--on-surface-v)}
.legend i{width:8px;height:8px;border-radius:2px;margin-left:6px}
.bars{display:grid;gap:12px;padding:4px 16px 8px}
.bar{display:grid;grid-template-columns:64px 1fr 40px;gap:12px;align-items:center;font:var(--body-m)}
.bar b{font:var(--label-l);text-align:right}
.seg{display:flex;height:8px;border-radius:var(--r-full);overflow:hidden;background:var(--surface-high);gap:2px}
.g{background:var(--good)}.m{background:var(--outline-v)}.b{background:var(--bad)}
.seg i{display:block;height:100%}
.kw{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:16px 16px 0}
.kw > div{padding:16px;border-radius:var(--r-m);background:var(--surface-low)}
.kw h3{font:var(--label-l);margin-bottom:8px}
.kw .good h3{color:var(--good)}.kw .bad h3{color:var(--bad)}
.kw li{list-style:none;display:flex;justify-content:space-between;font:var(--body-m);padding:3px 0}
.kw em{font-style:normal;color:var(--on-surface-v)}
.rv{padding:16px;border-top:1px solid var(--surface-high)}
.rv-hd{display:flex;align-items:center;gap:8px}
.rv-hd small{font:var(--body-s);color:var(--on-surface-v)}
.rv p{font:var(--body-l);margin-top:8px}
.rv-ft{display:flex;align-items:center;gap:6px;margin-top:8px}
.tag{font:var(--label-m);padding:2px 8px;border-radius:var(--r-xs)}
.tag.good{background:var(--good-c);color:var(--good)}.tag.neu{background:var(--neu-c);color:var(--neu)}.tag.bad{background:var(--bad-c);color:var(--bad)}

/* ── 비교표 ── */
.tbl-wrap{overflow-x:auto;padding:0 8px}
.tbl{width:100%;border-collapse:collapse;font:var(--body-m)}
.tbl th,.tbl td{padding:12px 6px;text-align:center;border-bottom:1px solid var(--surface-high)}
.tbl th:first-child,.tbl td:first-child{text-align:left;color:var(--on-surface-v);font:var(--label-m);padding-left:8px;width:72px}
.tbl thead th{font:var(--label-l)}
.tbl th a{text-decoration:none}
.tbl td.win{color:var(--on-primary-c);background:var(--primary-c);font-weight:700}
.ct{display:inline-flex;align-items:center;gap:4px;font:var(--label-m)}
.ct.good{color:var(--good)}.ct.neu{color:var(--neu)}.ct.bad{color:var(--bad)}
.ct .ms{font-size:18px}

/* ── 입력 (Outlined text field) ── */
.field{display:block;padding:0 16px 16px}
.field span{display:block;font:var(--label-m);color:var(--on-surface-v);margin:0 0 6px 4px}
.field input,.field select,.field textarea{width:100%;min-height:56px;padding:16px;border-radius:var(--r-xs);border:1px solid var(--outline);background:var(--surface);font:var(--body-l);appearance:none}
.field select{background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2343474F' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 16px center}
.field :focus{outline:none;border:2px solid var(--primary);padding:15px}

/* ── 추천 질문 ── */
.progress{height:4px;margin:0 16px;border-radius:var(--r-full);background:var(--surface-high);overflow:hidden}
.progress i{display:block;height:100%;background:var(--primary)}
.choices{display:grid;gap:8px;padding:0 16px}
.choice{display:block;width:100%;text-align:left;padding:16px 20px;border-radius:var(--r-l);background:var(--surface-low);box-shadow:inset 0 0 0 1px var(--outline-v)}
.choice b{font:var(--title-m)}
.choice small{display:block;font:var(--body-m);color:var(--on-surface-v)}
.choice[aria-checked=true]{background:var(--primary-c);color:var(--on-primary-c);box-shadow:inset 0 0 0 2px var(--primary)}
.prose{padding:0 16px}
.prose h3{font:var(--title-m);margin:20px 0 8px}
.prose li{margin:0 0 6px 20px;font:var(--body-l);color:var(--on-surface-v)}
.prose .ms{vertical-align:-4px}

/* ── Snackbar · Bottom sheet ── */
.snack{position:fixed;left:16px;right:16px;bottom:calc(88px + env(safe-area-inset-bottom));z-index:30;max-width:448px;margin:0 auto;padding:14px 16px;border-radius:var(--r-xs);background:var(--inverse);color:var(--on-inverse);font:var(--body-m);opacity:0;transform:translateY(8px);transition:.2s;pointer-events:none}
.snack.show{opacity:1;transform:none}
.scrim{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.32);opacity:0;pointer-events:none;transition:opacity .2s}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;max-width:480px;margin:0 auto;padding:0 0 calc(16px + env(safe-area-inset-bottom));border-radius:var(--r-xl) var(--r-xl) 0 0;background:var(--surface-low);transform:translateY(100%);transition:transform .28s cubic-bezier(.2,0,0,1)}
.sheet .handle{width:32px;height:4px;border-radius:var(--r-full);background:var(--outline);margin:16px auto 8px;opacity:.4}
.sheet h3{font:var(--title-l);padding:8px 24px 8px}
.opt{display:flex;align-items:center;justify-content:space-between;width:100%;height:56px;padding:0 24px;font:var(--body-l);text-align:left}
.opt[aria-checked=true]{color:var(--primary);font-weight:600}
.open .scrim{opacity:1;pointer-events:auto}
.open .sheet{transform:none}

/* ── PC 메뉴 줄 ── */
.top{position:sticky;top:0;z-index:100;background:var(--surface);border-bottom:1px solid var(--outline-v);transform:translateZ(0)}
.top-in{max-width:1200px;margin:0 auto;height:64px;padding:0 32px;display:flex;align-items:center;gap:12px}
.top nav{display:flex;gap:4px;margin-left:16px}
.top nav a{font:var(--label-l);color:var(--on-surface-v);text-decoration:none;padding:8px 16px;border-radius:var(--r-full)}
.top nav a:hover{background:var(--surface-c)}
.top nav a[aria-current=true]{background:var(--secondary-c);color:var(--on-secondary-c)}

/* ── PC (960px 이상): 위 메뉴 줄 + 오른쪽 비교함 ── */
@media (min-width:960px){
  .pc{display:block}
  .mo{display:none!important}
  .mo-i{display:none}.pc-i{display:inline-flex}
  body{background:var(--surface)}
  .app{max-width:1200px;padding:0 16px 40px}
  .app.has-bottom{padding-bottom:40px}
  .app .split{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:32px;align-items:start;padding-top:16px}
  .app .panel{position:sticky;top:88px}
  .app .panel-in{border-radius:var(--r-l);box-shadow:inset 0 0 0 1px var(--outline-v);overflow:hidden}
  .app .panel-in.pad{padding:16px 0 0}
  .app .panel h4{display:flex;align-items:center;gap:8px;font:var(--title-m);padding:16px 16px 8px}
  .app .cats{grid-template-columns:4fr 3fr;gap:32px;padding:32px 16px 16px}
  .app .cats section:last-child .tiles{grid-template-columns:repeat(3,1fr)}
  .app .tile{padding:24px 4px;font:var(--label-l)}
  .app .tile .ms{font-size:40px}
  .app .act{padding:20px}
  .app .act b{font:var(--title-l)}
  .app .act small{font:var(--body-m)}
  .app .cols{display:grid;grid-template-columns:1fr 1fr;gap:32px}
  .app .head{padding:32px 16px 16px}
  .app[data-page=quote] .head,.app[data-page=compare] .head{padding-top:32px}
  .app:is([data-page=rec],[data-page=how]) > *{max-width:640px;margin-left:auto;margin-right:auto}
  .app[data-page=rec]{padding-top:24px}
  .app[data-page=compare] > *{max-width:880px;margin-left:auto;margin-right:auto}
  .app .gal img{width:46%}
  .snack{bottom:32px}
  .sheet{left:50%;right:auto;bottom:auto;top:50%;width:400px;border-radius:var(--r-xl);padding:8px 0 16px;transform:translate(-50%,-46%);opacity:0;pointer-events:none;transition:.2s}
  .sheet .handle{display:none}
  .open .sheet{transform:translate(-50%,-50%);opacity:1;pointer-events:auto}
}