/* 모아 — Material 3 (플랫: 그림자 대신 색 층·상태 층) */
/* ── 토큰: 색 역할 (씨앗 #2F86FF) ─────────────────── */
:root{
  --primary:#2F86FF; --on-primary:#fff;
  --primary-c:#D8E6FF; --on-primary-c:#00285C;
  --secondary-c:#DDE3F2; --on-secondary-c:#151C2A;
  --accent:#FFC83D; --on-accent:#3D2E00;   /* 캐릭터 안전모 노랑 */
  --surface:#FAFBFF; --surface-low:#F2F5FB; --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;
  /* 모양 */
  --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}
.only-pc{display:none}

/* 상태 층: 누르면 현재 글자색을 8~12% 겹친다 */
.btn,.icon-btn,.chip:not(.assist),.card,.tab,.li,.choice,.opt,.rvc{position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}
.btn::after,.icon-btn::after,.chip:not(.assist)::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}
/* 마우스 올림은 진짜 마우스에서만 · 누름은 JS 가 붙이는 .pressed (끌어서 취소하면 바로 빠짐) */
@media (hover:hover) and (pointer:fine){:is(.btn,.icon-btn,.chip,.card,.tab,.li,.choice,.opt,.rvc,.fo):hover::after{opacity:.06}}
.pressed::after{opacity:.08!important}
: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{display:inline-flex;align-items:center;gap:6px;font:800 22px/1 var(--f);color:var(--primary);text-decoration:none;letter-spacing:-.03em}
.brand img{width:30px;height:30px}
.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}
.title-row{display:flex;align-items:flex-start;gap:4px}
.title-row > div{flex:1;min-width:0}
.title-row .icon-btn{margin-top:-4px}
.icon-btn.scrap{color:var(--on-surface-v)}
.ms.o{font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24}
.icon-btn.me{color:var(--primary)}
.loading{padding:16px;display:grid;gap:12px}
.loading .sk{height:120px;border-radius:var(--r-m);background:linear-gradient(90deg,var(--surface-low) 25%,var(--surface-c) 50%,var(--surface-low) 75%);background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{to{background-position:-200% 0}}
.icon-btn.scrap.on{color:var(--primary)}
.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 h2.total-n{font:var(--title-l)}
.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)}
.add-hint{display:flex;align-items:center;justify-content:center;gap:4px}
.add-hint .ms{font-size:22px;color:var(--outline-v)}
.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)}
.mascot{display:block;width:72px;height:72px;margin:0 auto 12px}
.mascot.sm{width:56px;height:56px;margin:8px 24px 0}
.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}
/* 구글 공식 버튼 모양: 흰 바탕 · 회색 테두리 · G 로고 · 높이 48 */
.btn.google{height:48px;background:#fff;color:#1f1f1f;box-shadow:inset 0 0 0 1px #747775;font:500 15px/1 'Pretendard Variable',Roboto,sans-serif;gap:12px}
.sheet-p{font:var(--body-m);color:var(--on-surface-v);padding:0 24px 8px}
.icon-btn.add{color:var(--outline-v)}
.icon-btn.add .ms{font-size:32px}
.icon-btn.add.on{color:var(--primary)}
.btn.wide{width:100%;height:48px}
.btn[disabled]{background:var(--surface-high);color:var(--outline);pointer-events:none}
.panel-cta{position:sticky;bottom:0;padding:12px 16px 16px;background:linear-gradient(transparent,var(--surface) 30%)}
.stack{display:flex;flex-direction:column;gap:8px;padding:16px}
.stack .btn{width:100%;flex:none}
/* 바닥 고정 버튼 줄 */
.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}

/* ── 필터 상자: 이름 칸 + 4열 선택지 (네이버 가격비교식 배치, 우리 색) ── */
.fbox{margin:12px 16px 0;border-radius:var(--r-l);background:var(--surface-low);padding:4px 0}
.frow{padding:10px 12px}
.frow + .frow{border-top:1px solid var(--surface-high)}
.fl{display:block;font:var(--label-m);color:var(--on-surface-v);margin:0 0 8px 4px}
.fopts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.fo{display:flex;align-items:center;gap:6px;height:40px;padding:0 8px;border-radius:var(--r-s);font:var(--label-l);font-weight:500;color:var(--on-surface);text-align:left;min-width:0;position:relative;overflow:hidden}
.fo span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fo .ms{font-size:20px;color:var(--primary)}
.fbox .frow:nth-child(2) .fo{flex-direction:column;justify-content:center;gap:4px;height:64px;padding:4px 2px;font:var(--label-m);font-weight:500;text-align:center}
.fbox .frow:nth-child(2) .fo .ms{font-size:24px}
.fbox .frow:nth-child(2) .fo span:last-child{max-width:100%}
.fopts.wrap{display:flex;flex-wrap:wrap}
.fopts.wrap .fo{padding:0 14px}
.fopts.wrap .fo span{overflow:visible}
.pc-in{display:none}
.fo[aria-pressed=true]{background:var(--secondary-c);color:var(--on-secondary-c);font-weight:700}
.fo::after{content:"";position:absolute;inset:0;background:currentColor;opacity:0;pointer-events:none}
/* 페이지 번호 */
.pager{display:flex;align-items:center;justify-content:center;gap:4px;padding:20px 16px 8px}
.pg{width:40px;height:40px;border-radius:var(--r-full);font:var(--label-l);color:var(--on-surface-v)}
.pg[aria-current=true]{background:var(--primary);color:var(--on-primary)}
.pager .icon-btn[disabled]{opacity:.3;pointer-events:none}

/* ── 업체 줄 (선으로 나눔) ── */
.list{display:flex;flex-direction:column}
/* 업체 줄: 카드 없이 아래 선으로만 나눈다 */
.card{display:block;padding:16px;background:var(--surface);cursor:pointer;text-align:left}
/* 구분 선은 양옆 16px 안쪽, 누름 표시는 화면 끝까지 */
.card:not(:last-child)::before{content:"";position:absolute;left:16px;right:16px;bottom:0;height:1px;background:#F1F3F7}
.card-hd{display:flex;align-items:flex-start;gap:12px}
.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}
.meta2{display:flex;gap:12px;margin-top:4px;font:var(--body-s);color:var(--on-surface-v)}
.meta2 span{display:inline-flex;align-items:center;gap:3px}
.meta2 .ms{font-size:14px;color:var(--outline)}
.meta b{font:var(--label-m);color:var(--primary)}
.card .icon-btn{margin:-10px -8px -10px 0}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:12px 0 0 0;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}
.why1{font:var(--label-m);color:var(--primary);padding:10px 0 0}

/* 목록 줄 */
.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;scroll-padding-inline:16px;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}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 16px 8px}
.facts > div{display:flex;align-items:center;gap:10px;padding:12px;border-radius:var(--r-m);background:var(--surface-low)}
.facts .ms{font-size:22px;color:var(--primary)}
.facts small{display:block;font:var(--body-s);color:var(--on-surface-v)}
.facts b{font:var(--label-l)}
.tbl td.sm{font:var(--body-s)}
.tbl td small{color:var(--on-surface-v)}
.sum{display:flex;align-items:center;gap:16px;padding:8px 16px 0}
.sum .num{color:var(--primary)}
.sum small{color:var(--on-surface-v)}
.sum .num{font:700 52px/1 var(--f);letter-spacing:-.04em}
.sum + .sec-t{padding-top:16px}
.sum b{display:block;font:var(--title-m)}
.sum small{font:var(--body-s)}
.why{display:flex;gap:10px;align-items:center;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)}
/* 업계 평균: 막대 위 세로 눈금 + 오른쪽 작은 글자(높으면 초록, 낮으면 빨강) */
.seg-wrap{position:relative}
.avg{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;border-radius:1px;background:var(--on-surface)}
.legend i.avg-key{width:2px;height:12px;border-radius:1px;background:var(--on-surface);margin-left:8px}
.vs{font:var(--body-s);color:var(--on-surface-v);white-space:nowrap}
.vs.up{color:var(--good)}.vs.down{color:var(--bad)}
.sum small.vs{display:block;margin-top:2px}
.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{display:flex;align-items:center;gap:6px;font:var(--label-l);margin-bottom:8px}
.kw h3 .ms{font-size:20px}
.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);table-layout:fixed}
.tbl th a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.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}
.nil{color:var(--outline-v);font-weight:500}
.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}

/* ── 견적 문자: 미리보기 + 고르기 ── */
.q-preview{padding:8px 16px 0}
.sms{border-radius:var(--r-xl);background:var(--surface-low);padding:16px}
.sms-hd{display:flex;align-items:center;gap:6px;font:var(--label-m);color:var(--on-surface-v);margin-bottom:12px}
.bubble{white-space:pre-wrap;background:var(--primary);color:var(--on-primary);font:var(--body-l);padding:14px 16px;border-radius:20px 20px 4px 20px;margin-left:auto;max-width:92%;width:fit-content}
.btn.lg-w{width:100%;height:48px;margin-top:12px}
.btn.gray{background:var(--surface-high);color:var(--on-surface-v)}
/* 보낼 업체 고르기: 줄을 누르면 선택 — 초록 테두리 + 오른쪽 체크 원 */
.pick-list{display:grid;gap:8px}
.pick-to{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--r-m);box-shadow:inset 0 0 0 1px var(--outline-v);cursor:pointer;transition:box-shadow .15s,background .15s}
.pick-to input{position:absolute;opacity:0;pointer-events:none}
.pick-to img{width:44px;height:44px;border-radius:var(--r-s);object-fit:cover}
.pick-to b{display:block;font:var(--body-l);font-weight:600}
.pick-to small{font:var(--body-m);color:var(--on-surface-v)}
.pick-to > .ms{font-size:24px;color:var(--good);opacity:0;transform:scale(.6);transition:.15s}
.pick-to:has(input:checked){box-shadow:inset 0 0 0 2px var(--good);background:color-mix(in srgb,var(--good-c) 35%,var(--surface))}
.pick-to:has(input:checked) > .ms{opacity:1;transform:none}
.pick-to:has(input:focus-visible){outline:2px solid var(--primary);outline-offset:2px}
.btn.off{background:var(--surface-high);color:var(--outline);pointer-events:none}
.pc-only-note{display:none;text-align:center}
.q-preview .sec-t,.q-preview .hint{padding-left:0;padding-right:0}
.q-preview .li{padding-left:0;padding-right:0}
/* 좋다·보통·나쁘다 고르기 (세그먼트 버튼) */
/* M3 Segmented button: 높이 40 · 둥근 테두리 하나 · 고른 칸은 secondary container + 체크 */
.seg3{display:flex;height:40px;border-radius:var(--r-full);border:1px solid var(--outline);overflow:hidden}
.seg3 label{flex:1;position:relative;cursor:pointer;display:flex}
.seg3 label + label{border-left:1px solid var(--outline)}
.seg3 input{position:absolute;opacity:0;pointer-events:none}
.seg3 span{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;font:var(--label-l);color:var(--on-surface);margin:0!important}
.seg3 input:checked + span{background:var(--secondary-c);color:var(--on-secondary-c)}
.seg3 input:checked + span::before{content:"check";font-family:'Material Symbols Rounded';font-size:18px;font-weight:normal;-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 1,'wght' 500}
.seg3 input:focus-visible + span{outline:2px solid var(--primary);outline-offset:-2px}
/* ── 추천 질문 ── */
.story{display:flex;gap:4px;padding:4px 16px 0}
.story i{flex:1;height:4px;border-radius:var(--r-full);background:var(--surface-high)}
.story i.done{background:var(--primary)}
.story i.now{background:linear-gradient(90deg,var(--primary) 50%,var(--surface-high) 50%)}
.choices.grid2{grid-template-columns:1fr 1fr}
.choice{display:flex!important;align-items:center;gap:10px}
.choice .ms{font-size:24px;color: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-right{display:flex;align-items:center;gap:4px}

/* ── PC (960px 이상): 위 메뉴 줄 + 오른쪽 비교함 ── */
@media (min-width:960px){
  .pc{display:block}
  .app .only-pc{display:flex}
  .mo{display:none!important}
  .mo-i{display:none}.pc-i{display:inline-flex}
  .pc-in{display:inline}
  .pc-only-note{display:block}
  .app .fopts.wrap{display:grid}
  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;max-height:calc(100vh - 104px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .app .panel-in{border-left:1px solid #F1F3F7}
  .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 .frow{display:flex;align-items:flex-start;padding:8px 16px 8px 0}
  .app .fl{width:120px;flex:none;margin:12px 0 0 20px;font:var(--label-l)}
  .app .fopts{flex:1;grid-template-columns:repeat(4,minmax(0,1fr))}
  .app .fbox .frow:nth-child(2) .fo{flex-direction:row;justify-content:flex-start;gap:8px;height:40px;padding:0 10px;font:var(--label-l);font-weight:500;text-align:left}
  .app .fbox .frow:nth-child(2) .fo .ms{font-size:20px}
  .app   .app   .app   .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%}
  .app .quote{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;max-width:1000px;margin:0 auto}
  .app .q-preview{grid-column:1;grid-row:1;position:sticky;top:88px;padding:0}
  .app .q-form{grid-column:2;grid-row:1}
  .app[data-page=quote] > .head{max-width:1000px;margin:0 auto;padding-left:0;padding-right:0}
  .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}
}

.mid-rv{padding:4px 0 20px;border-bottom:1px solid #F1F3F7;margin:0 16px}
.mid-rv .sec-t,.mid-rv .hscroll{padding-left:0;padding-right:0}

/* 추천 받기 반짝임: 아이콘만 */
.twinkle{color:var(--primary);animation:twinkle 1.6s ease-in-out infinite}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0);opacity:1}40%{transform:scale(1.25) rotate(12deg);opacity:.75;filter:drop-shadow(0 0 4px var(--primary))}60%{transform:scale(.95) rotate(-4deg);opacity:1}}
@media (prefers-reduced-motion:reduce){.twinkle{animation:none}}


/* 비용 체감 막대 */
.pfeel{margin:0 16px 8px;padding:12px;border-radius:var(--r-m);background:var(--surface-low)}
.pfeel-hd{display:flex;align-items:center;gap:10px}
.pfeel-hd .ms{font-size:22px;color:var(--primary)}
.pfeel-hd small{display:block;font:var(--body-s);color:var(--on-surface-v)}
.pfeel-hd b{font:var(--label-l)}
.pseg{display:flex;gap:2px;height:8px;border-radius:var(--r-full);overflow:hidden;margin:10px 0 8px;background:var(--surface-high)}
.pseg i{display:block}
.pseg .c,.pkey .c{background:#7FB3FF}.pseg .f,.pkey .f{background:var(--primary)}.pseg .p,.pkey .p{background:#F28B82}
.pkey{display:flex;gap:12px;flex-wrap:wrap;font:var(--body-s);color:var(--on-surface-v)}
.pkey span{display:inline-flex;align-items:center;gap:4px}.pkey i{width:8px;height:8px;border-radius:2px}
/* 포트폴리오 */
.folio{flex:none;width:200px;text-align:left}
.folio img{width:200px;height:150px;object-fit:cover;border-radius:var(--r-m);display:block;background:var(--surface-high)}
.folio b{display:block;font:var(--label-l);margin-top:8px}
.folio small{font:var(--body-s);color:var(--on-surface-v)}
.folio-big{display:grid;gap:8px;padding:8px 16px 0;max-height:60vh;overflow-y:auto}
.folio-big img{width:100%;border-radius:var(--r-m)}

/* 검색창 · 종류별/동네별 칩 (화해식: 누르면 바텀시트) */
.search{display:flex;align-items:center;gap:8px;margin:4px 16px 0;padding:0 4px 0 16px;height:48px;border-radius:var(--r-full);background:var(--surface-c)}
.search > .ms{color:var(--on-surface-v)}
.search input{flex:1;min-width:0;border:0;background:none;font:var(--body-l);outline:none}
.search input::-webkit-search-cancel-button{display:none}
.search .icon-btn{width:40px;height:40px}
.search input:placeholder-shown + .clearq{display:none}
.search .icon-btn .ms{font-size:20px;color:var(--outline)}
.filters{display:flex;gap:8px;padding:12px 16px 0;overflow-x:auto;scrollbar-width:none}
.fchip{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 18px 0 14px;border-radius:var(--r-full);background:var(--surface-c);font:500 16px/1 var(--f);color:var(--on-surface);white-space:nowrap;position:relative;overflow:hidden;flex:none}
.fchip .ms{font-size:22px;color:var(--primary)}
/* 고른 칩: 파란 테두리 + 옅은 파랑 바탕 + 파란 글자 (화해 「급상승」 칩처럼) */
.fchip.on{background:var(--primary-c);color:var(--primary);box-shadow:inset 0 0 0 2px var(--primary);font-weight:700}
.fchip::after{content:"";position:absolute;inset:0;background:currentColor;opacity:0;pointer-events:none}
.sheet-grid{padding:0 16px 8px}
.sheet-grid .fo{flex-direction:column;justify-content:center;gap:4px;height:72px;padding:4px 2px;font:var(--label-m);font-weight:500;text-align:center}
.sheet-grid .fo .ms{font-size:26px;color:var(--primary)}
@media (min-width:960px){ .app .search{margin-top:20px} }

/* 가견적 결과 */
.fchip.calc .ms{color:var(--primary)}
.est{margin:8px 16px 0;padding:20px;border-radius:var(--r-l);background:var(--primary-c);color:var(--on-primary-c)}
.est small{display:block;font:var(--body-s);opacity:.8}
.est b{display:block;font:700 30px/1.2 var(--f);margin:6px 0 4px;letter-spacing:-.02em}
.est span{font:var(--body-s);opacity:.8}
.app[data-page=calc] .sheet-grid{padding:0 16px 12px}
.app[data-page=calc] .field > small.hint{padding:6px 4px 0}

/* 시공 사례 */
.folio-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 8px;padding:12px 16px 0}
.fg{text-decoration:none;color:inherit;display:block;min-width:0}
.fg img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-m);display:block;background:var(--surface-high)}
.fg b{display:block;font:var(--label-l);margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fg small{display:block;font:var(--body-s);color:var(--on-surface-v)}
.fg em{display:block;font-style:normal;font:var(--label-m);color:var(--primary);margin-top:2px}
.ffacts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 16px}
.ffacts > div{padding:12px;border-radius:var(--r-m);background:var(--surface-low)}
.ffacts small{display:block;font:var(--body-s);color:var(--on-surface-v)}
.ffacts b{display:block;font:var(--title-m);margin-top:2px}
.ffacts em{font-style:normal;font:var(--body-s);color:var(--on-surface-v)}
.specs{display:grid;grid-template-columns:96px 1fr;margin:0 16px;border-top:1px solid var(--surface-high)}
.specs dt,.specs dd{padding:12px 0;border-bottom:1px solid var(--surface-high);font:var(--body-m)}
.specs dt{color:var(--on-surface-v)}
@media (min-width:960px){ .app .folio-grid{grid-template-columns:repeat(4,1fr);max-width:1000px;margin:0 auto} .app[data-page=folio] .head{max-width:1000px;margin:0 auto} }

/* 비슷한 사례 찾기 결과 */
.mrow{display:flex;gap:12px;padding:16px;border-bottom:1px solid var(--surface-high)}
.mrow-pic img{width:96px;height:96px;object-fit:cover;border-radius:var(--r-m);display:block}
.mrow .name{font:var(--title-m);color:var(--on-surface);text-decoration:none}
.mrow small{display:block;font:var(--body-s);color:var(--on-surface-v);margin-top:2px}
.why-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.mrow-act{display:flex;gap:4px;margin-top:8px}