/* Pretendard — 월담이 쓰는 두 서체 중 하나(나머지는 조선궁서체).
   SIL OFL, 라이선스 원문은 static/fonts/pretendard/LICENSE.txt.
   전에는 jsdelivr 에서 92 개 조각을 받아 왔다. 남의 CDN 이 막히면 글씨가
   통째로 바뀌고 읽는 사람의 IP 도 그쪽으로 가므로 우리가 내려준다.
   가변축(wght 45~930)을 살려 두어 굵기는 자유롭게 쓴다. */
@font-face{font-family:'Pretendard Variable';src:url("../fonts/pretendard/PretendardVariable-subset.8f23b854b490.woff2") format('woff2-variations');font-weight:45 930;font-style:normal;font-display:swap}
/* 조선궁서체 — 월담이 쓰는 두 서체 중 하나(나머지는 Pretendard).
   라이선스는 static/fonts/chosun/LICENSE.txt. 원본 8.8MB 를 필요한 글자만
   남겨 0.26MB 로 줄였다(tools/subset_gungseo.py). 기기에 없어도 여기서 내려간다. */
@font-face{font-family:'Woldam Chosun Gungseo';src:url("../fonts/chosun/ChosunGs-subset.bd827614d8b5.woff2") format('woff2');font-weight:400;font-style:normal;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --app-w:448px; --ink:#111; --sub:#757575; --line:#f1f1f1; --line2:#e5e7eb;
  --brand:#c0392b; --outside:#9a9a9a;
  --el-1:#2e9e6b; --el-2:#e0533d; --el-3:#c79a3a; --el-4:#8e93a3; --el-5:#3a6fc4;
}
body{
  font-family:"Pretendard Variable",Pretendard,"Noto Sans KR","Apple SD Gothic Neo","맑은 고딕",sans-serif;
  color:var(--ink);background:var(--outside);letter-spacing:-.025em;
  display:flex;justify-content:center;min-height:100vh;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
input,select{font:inherit;color:inherit}
.app{width:100%;max-width:var(--app-w);background:#fff;min-height:100vh;position:relative;overflow-x:clip}
@media(max-width:448px){body{background:#fff}}

/* header */
.hd{position:sticky;top:0;z-index:40;background:#fff}
.hd-top{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 20px}
.logo{display:flex;align-items:center;min-height:44px}
/* 워드마크 잉크 영역은 896x514(비율 1.74)다. 상자를 2.77 로 잡으면 object-fit:contain 이
   로고를 왼쪽에 붙이고 오른쪽에 53px 를 빈 채로 남긴다. 상자를 로고 비율에 맞춘다. */
.logo-image{display:block;width:91px;height:52px;object-fit:contain}
.hd-top .logo-image,.drawer .logo-image{object-position:left center}
.footer-logo{width:120px;height:auto;vertical-align:middle;margin-bottom:8px}
.logo-mark{width:24px;height:24px;border-radius:4px;background:var(--brand);color:#fff;font-size:14px;font-weight:700;
  display:grid;place-items:center;line-height:1;letter-spacing:0;font-family:'Woldam Chosun Gungseo','Gungsuh','궁서',serif}
.logo-word{font-size:20px;font-weight:800;letter-spacing:-.05em;line-height:24px}
.hd-ico{display:flex;align-items:center;gap:12px}
.ic{width:28px;height:28px;stroke:#111;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hd-back .ic{width:24px;height:24px}
.hd-back{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700}
.tabs{display:flex;gap:24px;padding:0 20px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:0 0 auto}
.tabs button{display:block;padding:12px 8px 14px;font-size:16px;line-height:16px;font-weight:500;color:#424242;
  border-bottom:2px solid transparent}
.tabs button[aria-selected="true"]{color:#111;font-weight:700;border-bottom-color:#111}

/* layout */
main{padding-bottom:112px;min-height:60vh}
section{padding-top:48px}
.sec-hd{display:flex;align-items:center;justify-content:space-between;padding:0 20px;margin-bottom:16px}
.sec-t{font-size:20px;font-weight:700;line-height:26px;display:flex;align-items:center;gap:7px}
.more{font-size:16px;font-weight:400;color:#111;white-space:nowrap}
.more::after{content:"\203A";font-size:17px;margin-left:4px}
/* 스냅은 걸지 않는다. scroll-snap-align:start 가 스크롤포트 시작에 맞추면서
   좌측 20px 패딩을 스크롤로 상쇄해버린다 (원본도 스냅 없음). */
.rail{display:flex;gap:12px;overflow-x:auto;padding:0 20px 4px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.pad{padding:0 20px}
.empty{padding:80px 20px;text-align:center;color:#a1a1aa;font-size:14px;line-height:1.7}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* poster */
.poster{position:relative;width:100%;aspect-ratio:4/5;border-radius:8px;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 8px 16px;text-align:center}
.poster::after{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(120% 60% at 50% 8%,rgba(255,255,255,.28),transparent 60%),
  linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,.12) 45%,rgba(0,0,0,.28))}
/* 생성된 아트. 파일이 없으면 이 레이어만 비고 아래 그라디언트+실루엣이 그대로 보인다. */
.poster::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--img)}
.poster .fig{position:absolute;left:50%;top:52%;translate:-50% -50%;width:74%;aspect-ratio:1/1.45;z-index:-3;
  border-radius:50% 50% 46% 46%/60% 60% 40% 40%;filter:blur(1px);
  background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.34),rgba(255,255,255,.06) 55%,transparent 72%)}
.p-sub{font-size:14px;color:rgba(255,255,255,.92);font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.6);margin-bottom:2px;min-height:12px}
.p-ttl{font-size:20px;font-weight:800;color:#fff;line-height:1.15;letter-spacing:-.045em;
  text-shadow:0 2px 10px rgba(0,0,0,.65),0 0 26px rgba(255,255,255,.25)}
.badge{position:absolute;top:0;right:12px;z-index:2;width:34px;padding:5px 0 8px;text-align:center;color:#fff;
  background:#2f4fb5;border-radius:0 0 4px 4px}
.badge b{display:block;font-size:14px;letter-spacing:.06em;opacity:.9}
.badge i{display:block;font-style:normal;font-size:15px;font-weight:800}

/* hero */
.hero{padding-top:24px}
.hero-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.hero-track::-webkit-scrollbar{display:none}
.hero-slide{flex:0 0 100%;scroll-snap-align:center;padding:0 8px}
.hero-slide .poster{aspect-ratio:4/5;border-radius:16px;padding-bottom:30px}
.hero-slide .p-ttl{font-size:42px}
.hero-slide .p-sub{font-size:15px;margin-bottom:6px}
.dots{display:flex;gap:6px;justify-content:center;padding:16px 0 0}
.dots i{width:6px;height:6px;border-radius:50%;background:#e1e1e1;transition:.2s;cursor:pointer}
.dots i.on{background:#111}
/* 도트는 6px라 손가락으로 못 누른다. 히트박스만 넓힌다. */
.dots i{box-shadow:0 0 0 7px transparent;background-clip:padding-box}

.reco-note{display:inline-flex;margin:0 20px 14px;padding:6px 10px;border-radius:6px;background:#f4f4f5;
  font-size:14px;font-weight:600;color:#52525b}

/* card */
.card{flex:0 0 180px;width:180px}
.card .t{margin-top:13px;font-size:16px;font-weight:600;line-height:24px;color:#111}
.card .d{margin-top:2px;font-size:14px;font-weight:500;color:var(--sub);line-height:18.2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .by{margin-top:6px;font-size:14px;font-weight:500;color:#a78bfa}
.card-art{position:relative}
.likes{position:absolute;left:8px;top:8px;z-index:3;display:inline-flex;align-items:center;gap:4px;
  padding:4px 8px;border-radius:99px;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);
  color:#fff;font-size:14px;font-weight:600;letter-spacing:0}
.tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px;overflow:hidden;max-height:22px}
.tags span{font-size:14px;font-weight:500;color:#6b7280;background:#f4f4f5;border-radius:4px;padding:2px 6px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 12px;padding:0 20px}
.grid .card{flex:none;width:auto}

/* banner */
.banner{margin:0 20px;border-radius:12px;background:linear-gradient(120deg,#1b1b22,#2c2438 55%,#4a2b34);
  color:#fff;padding:30px 22px;text-align:center}
.banner b{display:block;font-size:14px;letter-spacing:.14em;opacity:.75;font-weight:600}
.banner p{margin-top:8px;font-size:19px;font-weight:800}
.banner .film{margin-top:18px;height:150px;border-radius:8px;display:grid;place-items:center;
  color:rgba(255,255,255,.35);font-size:14px;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 14px,rgba(255,255,255,.02) 14px 28px),#0d0d10}

/* review */
.rv{flex:0 0 256px;width:256px;border:1px solid var(--line);border-radius:8px;padding:14px}
.rv-list .rv{flex:none;width:auto;margin:0 20px 12px}
/* 2026-10-15 리뷰 카드 — 손님 프로필 대신 상담역 얼굴 */
.av-char{width:42px;height:42px;flex:0 0 42px;background-color:#e4e4e7}
.rv-head{flex:1;min-width:0}
.rv-char{display:block;font-size:15px;font-weight:700}
.rv .rv-item{margin-top:8px}
.rv-top{display:flex;align-items:center;gap:9px}
.av{width:34px;height:34px;border-radius:50%;flex:0 0 34px;background:linear-gradient(140deg,#f3d5dd,#c9b7e8)}
.stars{color:#f5a623;font-size:14px;letter-spacing:1px}
.rv-meta{font-size:14px;color:#6b7280;margin-top:3px}
.rv-time{margin-left:auto;font-size:14px;color:#a1a1aa;align-self:flex-start}
.rv-body{margin-top:10px;font-size:14px;line-height:1.55;color:#3f3f46}
.rv .clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* free wide */
.wide{flex:0 0 180px;width:180px;aspect-ratio:4/5;border-radius:8px;position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;justify-content:flex-end;padding:14px 12px;color:#fff}
.wide::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,.35) 38%,rgba(0,0,0,0) 62%)}
.wide .t{font-size:18px;font-weight:600;line-height:1.3}
.wide .d{margin-top:4px;font-size:14px;font-weight:400;line-height:1.4;color:#fff}

/* snack */
.snack-track{display:flex;gap:24px;overflow-x:auto;padding:0 20px;scroll-snap-type:x mandatory;
  scroll-padding-left:20px;scrollbar-width:none}
.snack-track::-webkit-scrollbar{display:none}
.snack-page{flex:0 0 288px;width:288px;scroll-snap-align:start;display:grid;gap:16px;align-content:start}
.snk{display:flex;align-items:center;gap:12px;height:64px}
.snk .n{font-size:16px;font-weight:600;width:14px;text-align:center;flex:0 0 14px}
.snk .th{width:100px;height:64px;border-radius:4px;flex:0 0 100px}
.snk .t{font-size:16px;font-weight:600;line-height:22px;display:block}
.snk .d{margin-top:2px;font-size:14px;font-weight:500;color:var(--sub);display:block;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

/* magazine */
.mg-tabs{display:flex;gap:16px;padding:0 20px;margin-bottom:12px}
.mg-tabs button{font-size:16px;font-weight:500;color:#424242;padding-bottom:6px;border-bottom:2px solid transparent}
.mg-tabs button[aria-selected="true"]{color:#111;font-weight:700;border-bottom-color:#111}
.mg{display:flex;gap:12px;padding:16px 20px;border-top:1px solid var(--line)}
.mg .n{font-size:16px;font-weight:600;width:14px;flex:0 0 14px}
.mg .th{flex:0 0 80px;width:80px;height:80px;border-radius:4px}
.mg .t{font-size:16px;font-weight:600;line-height:22px;display:block}
.mg .d{margin-top:5px;font-size:14px;line-height:1.6;color:var(--sub);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* footer */
footer{margin-top:44px;border-top:1px solid var(--line);padding:24px 20px 40px;background:#fafafa;
  font-size:14px;line-height:1.9;color:#9ca3af}
footer .links{display:flex;gap:14px;margin:12px 0 8px;color:#6b7280;font-weight:600}

/* bottom nav */
.bn{position:fixed;bottom:0;left:50%;translate:-50% 0;width:100%;max-width:var(--app-w);z-index:50;
  background:rgba(255,255,255,.9);backdrop-filter:blur(6px);border-radius:20px 20px 0 0;
  box-shadow:0 -4px 8px rgba(0,0,0,.08);display:grid;grid-template-columns:repeat(4,1fr);
  padding:10px 20px calc(18px + env(safe-area-inset-bottom))}
.bn a{height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-size:14px;font-weight:400;color:#555}
.bn a.on{color:#000;font-weight:600}
.bn svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bn a.on svg.fill{fill:currentColor}

/* drawer + modal */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60;opacity:0;pointer-events:none;transition:.2s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:50%;translate:100% 0;width:min(var(--app-w),100vw);height:100%;background:#fff;z-index:70;
  transition:translate .25s,visibility .25s;visibility:hidden;padding:22px 20px;overflow-y:auto;
  margin-right:calc(var(--app-w)/-2);box-shadow:-8px 0 24px rgba(0,0,0,.12)}
@media(max-width:448px){.drawer{right:0;margin-right:0}}
.drawer.on{translate:0 0;visibility:visible}
.drawer h3{font-size:14px;color:#a1a1aa;margin:22px 0 10px;font-weight:600}
.drawer a{display:block;padding:11px 0;font-size:15px;font-weight:600;border-bottom:1px solid var(--line)}
.modal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.5);padding:20px}
.modal.on{display:flex}
.modal-box{width:100%;max-width:408px;background:#fff;border-radius:12px;overflow:hidden}
.modal-box .art{aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;color:#fff;padding:24px;text-align:center}
.modal-box .art b{font-size:14px;opacity:.85}
.modal-box .art strong{font-size:34px;font-weight:800;letter-spacing:-.05em}
.modal-box .art span{font-size:14px;opacity:.9}
.modal-box .art .cta{margin-top:8px;background:rgba(255,255,255,.22);border-radius:8px;padding:10px 22px;font-weight:700;font-size:14px}
.modal-bar{display:flex;justify-content:space-between;padding:16px 18px;font-size:14px;color:#6b7280}

/* product detail */
.pd-hero{padding:0 20px}
.pd-hero .poster{aspect-ratio:5/7;border-radius:10px}
.pd-body{padding:24px 20px 0}
.pd-body h1{font-size:24px;font-weight:800;line-height:1.3}
.pd-body .lead{margin-top:8px;font-size:14px;color:#6b7280;line-height:1.6}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.chip{font-size:14px;font-weight:600;color:#52525b;background:#f4f4f5;border-radius:99px;padding:6px 11px}
.pd-idx{margin-top:26px;border-top:1px solid var(--line);padding-top:20px}
.pd-idx h2{font-size:16px;font-weight:800;margin-bottom:12px}
.pd-idx li{list-style:none;display:flex;gap:10px;padding:9px 0;font-size:14px;color:#3f3f46;line-height:1.5}
.pd-idx li b{color:#c0392b;font-weight:700;flex:0 0 auto}
.price-bar{position:fixed;bottom:0;left:50%;translate:-50% 0;width:100%;max-width:var(--app-w);z-index:55;
  background:rgba(255,255,255,.95);backdrop-filter:blur(6px);border-radius:20px 20px 0 0;
  box-shadow:0 -4px 8px rgba(0,0,0,.08);
  padding:14px 20px calc(18px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px}
.price-bar .p{flex:1}
/* 2026-10-15 사용자: 약관 안내는 버튼 바로 위에 작게 — 최소 14px 예외(사용자 허락). 다음 버튼 단계에선 숨김 */
.price-bar:has(.consent-fine){flex-wrap:wrap}
.consent-fine{flex:0 0 100%;font-size:11px;line-height:1.5;color:#8b8b93;letter-spacing:-.01em}
.consent-fine p{margin:0}
.consent-fine p+p{margin-top:4px}
.consent-fine b{font-weight:600;color:inherit}
.consent-fine a{color:inherit;text-decoration:underline}
.price-bar:has(button[type=submit][hidden]) .consent-fine{display:none}
/* 같은 날 사용자: 「카드 형식으로는 하지 말고」 — 약관이 보이는 단계에선 둥근 모서리·그림자 없이 바탕에 바로 */
.price-bar:has(.consent-fine):not(:has(button[type=submit][hidden])){border-radius:0;box-shadow:none;backdrop-filter:none}
.price-bar .p s{color:#c4c4cc;font-size:14px}
.price-bar .p b{display:block;font-size:19px;font-weight:800}
.price-bar .p b em{font-style:normal;color:#e0393e;margin-right:6px}
.btn{background:#111;color:#fff;border-radius:8px;padding:14px 22px;font-size:15px;font-weight:700;text-align:center;display:block}
.btn.full{width:100%}
.btn.ghost{background:#fff;color:#111;border:1px solid var(--line2)}

/* form */
.form{padding:24px 20px 0}
.form h1{font-size:22px;font-weight:800;line-height:1.35;margin-bottom:6px}
.form .sub{font-size:14px;color:#8b8b93;margin-bottom:24px}
.fld{margin-bottom:20px}
.fld label{display:block;font-size:14px;font-weight:700;margin-bottom:8px}
.fld input,.fld select{width:100%;border:1.5px solid #d4d4d8;border-radius:10px;padding:13px 12px;font-size:16px;background:#fff}
/* 셀렉트를 입력칸과 같은 얼굴로 맞춘다. 네이티브 화살표는 OS 마다 모양이 달라
   감추고 같은 아이콘을 직접 그린다. 값이 비면(placeholder) 글자를 흐리게 둔다. */
.fld select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;transition:border-color .15s,box-shadow .15s}
.fld select:hover{border-color:#b9b9c2}
.fld select:focus{outline:none;border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}
.fld select:invalid,.fld select option[value='']{color:#a1a1aa}
/* 텍스트/숫자 입력도 같은 얼굴로 */
.fld input[type=text],.fld input[type=number],.fld input[type=tel],.fld textarea{
  width:100%;border:1px solid var(--line2);border-radius:8px;padding:13px 12px;font-size:15px;
  background:#fff;transition:border-color .15s,box-shadow .15s}
.fld input[type=text]:focus,.fld input[type=number]:focus,.fld input[type=tel]:focus,.fld textarea:focus{
  outline:none;border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}
/* 8자리 생년월일 입력 — 숫자를 넓게 띄워 자릿수를 세기 쉽게 한다 */
.birth8{font-variant-numeric:tabular-nums;letter-spacing:.14em;font-size:17px!important;font-weight:600}
.birth8::placeholder{letter-spacing:.08em;font-weight:400;color:#c4c4cc}
.birth-echo{margin-top:8px;font-size:14px;color:#52525b;min-height:19px}
.birth-echo.bad{color:#af4333}
.fld input:focus,.fld select:focus{outline:none;border-color:#111}
.seg{display:flex;gap:8px}
.seg button{flex:1;border:1px solid var(--line2);border-radius:8px;padding:12px 0;font-size:14px;font-weight:600;color:#8b8b93}
.seg button[aria-pressed="true"]{border-color:#111;color:#111;font-weight:700;background:#fafafa}
/* 2026-10-15 사용자: 성별 버튼이 잘 안 보인다 → 글자 · 테두리를 진하게, 고른 쪽은 확실히 */
.seg button{color:#3f3f46;border-width:1.5px;border-color:#c4c4cc;font-size:16px}
.seg button[aria-pressed="true"]{border-width:2px;background:#f4f4f5}
.support-login{margin:24px 0;padding:20px;border:1px solid var(--line2);border-radius:14px}
.support-login p{font-size:15px;line-height:1.7;margin-bottom:14px}
.row3{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:8px}
.err{color:#e0393e;font-size:14px;margin-top:8px;min-height:16px}
.check{display:flex;align-items:center;gap:8px;font-size:14px;color:#52525b;margin-top:10px}

/* result */
.res-top{background:linear-gradient(160deg,#1b2b52,#2b4a86 55%,#0f172e);color:#fff;padding:30px 20px 32px;text-align:center}
.res-top .who{font-size:14px;opacity:.8}
.res-top h1{font-size:23px;font-weight:800;margin-top:6px;line-height:1.35}
.res-top .born{margin-top:8px;font-size:14px;opacity:.75}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:24px}
.pil{background:rgba(255,255,255,.1);border-radius:10px;padding:14px 4px}
.pil .lab{font-size:14px;opacity:.7;line-height:1.2}
.pil .gz{font-size:26px;font-weight:800;line-height:1.2;margin-top:7px}
.pil .ko{font-size:14px;opacity:.8;margin-top:4px;line-height:1.2}
.blk{padding:32px 20px 0}
.blk h2{font-size:17px;font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:6px}
.blk p{font-size:14px;line-height:1.75;color:#3f3f46}
.blk p+p{margin-top:12px}
.ohaeng{display:grid;gap:13px;margin-top:2px}
.oh{display:flex;align-items:center;gap:12px;font-size:14px}
.oh .nm{width:20px;font-weight:700;flex:0 0 20px}
.oh .bar{flex:1;height:10px;border-radius:99px;background:#f1f1f4;overflow:hidden}
.oh .bar i{display:block;height:100%;border-radius:99px;transition:width .5s ease}
.oh .ct{width:18px;text-align:right;color:var(--sub);flex:0 0 18px}
.kv{border:1px solid var(--line2);border-radius:10px;overflow:hidden}
.kv>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;
  font-size:14px;border-bottom:1px solid var(--line)}
.kv>div:last-child{border-bottom:0}
.kv>div>span:first-child{color:#6b7280;flex:0 0 auto}
.kv b{font-weight:700;text-align:right}
/* 자식 선택자로 한정하지 않으면 안쪽 .n/.l 까지 패딩을 먹는다 */
.score{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
.score>div{background:#fafafa;border-radius:10px;padding:16px 4px}
.score .n{font-size:22px;font-weight:800;line-height:1.2}
.score .l{font-size:14px;color:var(--sub);margin-top:4px;line-height:1.2}
.actions{padding:28px 20px 0;display:grid;gap:10px}
.note{padding:22px 20px 0;font-size:14px;color:#b4b4bb;line-height:1.7}

/* search */
.sbar{padding:14px 20px;position:sticky;top:60px;background:#fff;z-index:30}
.sbar input{width:100%;border:1px solid var(--line2);border-radius:99px;padding:12px 16px;font-size:14.5px}
.sbar input:focus{outline:none;border-color:#111}
.hits{padding:4px 20px 0;font-size:14px;color:#8b8b93}
.slist a{display:flex;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);align-items:center}
.slist .th{flex:0 0 64px;width:64px;height:80px;border-radius:4px}
.slist .t{font-size:16px;font-weight:600;line-height:22px}
.slist .d{margin-top:2px;font-size:14px;font-weight:500;color:var(--sub)}
.slist .cat{margin-top:6px;font-size:14px;color:#a1a1aa}
/* 보관함 (2026-10-15) — 멈춘 주문은 맨 위 한 칸, 나머지는 사람별 */
.lib-resume,.lib-person{padding-top:0}
/* 제목·날짜·상태는 한 줄씩 (예전엔 글자처럼 이어 붙어 보였다) */
.slist .t,.slist .d,.slist .cat{display:block}
.lib-resume{margin:16px 20px 4px;border:1px solid var(--line2);border-radius:14px;overflow:hidden;background:#fafafa}
.lib-resume-h{padding:12px 16px 0;font-size:14px;font-weight:700;color:#8b8b93}
.lib-resume-main{display:flex;gap:12px;align-items:center;padding:10px 16px 14px}
.lib-resume-main .th{flex:0 0 48px;width:48px;height:60px;border-radius:4px}
.lib-resume-main>span:nth-child(2){flex:1;min-width:0}
.lib-resume .t{display:block;font-size:16px;font-weight:700;line-height:22px}
.lib-resume .d{display:block;margin-top:2px;font-size:14px;color:var(--sub)}
.lib-go{flex:0 0 auto;font-size:14px;font-weight:700;padding:8px 12px;border-radius:99px;background:#111;color:#fff}
.lib-more{border-top:1px solid var(--line)}
.lib-more summary{padding:12px 16px;font-size:14px;color:#6b7280;cursor:pointer}
.lib-more a{display:block;padding:10px 16px;border-top:1px solid var(--line)}
.lib-person h2{padding:24px 20px 6px;font-size:17px;font-weight:800}
.lib-person h2 small{margin-left:4px;font-size:14px;font-weight:600;color:#a1a1aa}
/* 내 정보 (2026-10-15) — 로그인 전에도 메뉴 */
.me-login{display:flex;align-items:center;gap:12px;margin:20px 20px 0;padding:18px;border:1px solid var(--line2);border-radius:14px;background:#fafafa}
.me-login>span:first-child{flex:1}
.me-login b{display:block;font-size:18px;font-weight:800}
.me-login small{display:block;margin-top:4px;font-size:14px;color:var(--sub)}
.me-go{font-size:24px;color:#a1a1aa}
.me-menu{margin:24px 0 0;border-top:1px solid var(--line)}
.me-menu a{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;font-size:16px;font-weight:600;border-bottom:1px solid var(--line)}
.me-menu a span{color:#a1a1aa;font-size:20px}

/* today */
/* 2026-10-18 사용자: 보라 배경은 뺀다 — 바탕은 화면 그대로, 글자는 테마 색 */
.today-hd{color:inherit;padding:30px 20px 32px;text-align:center}
/* 2026-10-18 오늘의 운세 — 로그인 안내·생일 받기. 보라 배경 없이 */
.today-gate{color:inherit;padding:34px 20px 30px;text-align:center}
.today-gate-k{font-size:14px;font-weight:700;letter-spacing:.08em;color:#8a6a24}
.today-gate.has-art{padding-top:0}
.today-gate-art{display:block;width:calc(100% + 40px);height:auto;margin:0 -20px 14px;}
.today-gate h1{font-size:24px;line-height:1.4;font-weight:800;margin-top:10px}
.today-gate p:last-child{font-size:15px;line-height:1.65;margin-top:10px;color:var(--sub)}
.today-form{padding:24px 20px 32px}
.today-form .hint{font-size:14px;margin-top:6px}
.today-form .err{font-size:14px;margin-top:6px}
.today-consent{margin:4px 0 14px}
.today-hd .d{font-size:14px;opacity:.75}
.today-hd .gz{font-size:38px;font-weight:800;margin-top:10px}
.today-hd .ko{font-size:14px;opacity:.85;margin-top:4px}
/* 점수 대신 오늘의 이름(이슈 #80). 머리 띠가 테마와 상관없이 어두워 다크 덮어쓰기가 필요 없다. */
.today-name{margin:20px auto 0;max-width:20em;padding-top:18px;border-top:1px solid var(--line2)}
.today-name span{display:block;font-size:14px;opacity:.7;letter-spacing:.08em}
.today-name b{display:block;margin-top:8px;font-family:'Woldam Chosun Gungseo','Gungsuh','궁서',serif;
  font-size:24px;font-weight:400;line-height:1.5;letter-spacing:-.01em;word-break:keep-all;text-wrap:balance}
.today-name b::before{content:'「';font-family:"Pretendard Variable",Pretendard,sans-serif;opacity:.6}
.today-name b::after{content:'」';font-family:"Pretendard Variable",Pretendard,sans-serif;opacity:.6}

/* ===== 인터랙션 마감 ===== */
/* 눌렀을 때 반응이 없으면 앱이 죽은 것처럼 느껴진다 */
.card,.wide,.snk,.mg,.rv,.chip-char,.slist a{transition:transform .12s ease,opacity .12s ease}
.card:active,.wide:active,.snk:active,.mg:active,.chip-char:active,.slist a:active{transform:scale(.975);opacity:.85}
.btn{transition:transform .12s ease,opacity .12s ease}
.btn:active{transform:scale(.97);opacity:.9}
.tabs button,.mg-tabs button,.seg button,.more{transition:opacity .12s ease}
.tabs button:active,.mg-tabs button:active,.seg button:active,.more:active{opacity:.55}
:focus-visible{outline:2px solid #111;outline-offset:2px;border-radius:4px}
.rail.dragging,.snack-track.dragging,.hero-track.dragging{cursor:grabbing;user-select:none;scroll-behavior:auto}
.rail a,.hero-track a,.snack-track a{-webkit-user-drag:none}

/* 화면 전환 */
/* transform 을 쓰면 fixed 요소의 컨테이닝 블록이 되어 하단바가 밀린다. opacity 만 쓴다. */
#view.enter{animation:viewIn .22s ease}
@keyframes viewIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  #view.enter{animation:none}
  .card,.wide,.snk,.mg,.chip-char,.btn{transition:none}
}

/* 토스트 */
#toast{position:fixed;left:50%;bottom:96px;translate:-50% 8px;z-index:90;
  max-width:min(320px,80vw);padding:12px 18px;border-radius:99px;
  background:rgba(17,17,17,.92);color:#fff;font-size:14px;font-weight:500;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .18s ease,translate .18s ease}
#toast.on{opacity:1;translate:-50% 0}

/* ===== 캐릭터 ===== */
.char-rail{padding-top:2px}
.chip-char{flex:0 0 92px;width:92px;display:flex;flex-direction:column;align-items:center;text-align:center}
.av-lg{width:76px;height:76px;border-radius:50%;overflow:hidden;position:relative;isolation:isolate;background:#eee}
.av-lg::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--img);background-position:center 20%}
.chip-char .nm{margin-top:9px;font-size:14px;font-weight:700;line-height:1.25}
.chip-char .ro{margin-top:3px;font-size:14px;color:var(--sub);line-height:1.3}

.char-hero{position:relative;aspect-ratio:1/1;display:flex;align-items:flex-end;isolation:isolate}
.char-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--img);background-position:center 16%}
.char-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(0,0,0,.88) 6%,rgba(0,0,0,.25) 48%,rgba(0,0,0,.15))}
.char-meta{position:relative;z-index:1;padding:0 20px 24px;color:#fff}
.char-role{font-size:14px;opacity:.85}
.char-meta h1{font-size:30px;font-weight:800;margin-top:4px;letter-spacing:-.04em}
.char-quote{margin-top:10px;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.92)}
.tags.big{max-height:none;gap:6px}
.tags.big span{font-size:14px;padding:5px 10px;border-radius:99px}

/* ===== 캐릭터 인트로 ===== */
/* 인트로엔 하단탭이 없다. main 의 탭 자리(112px)를 비워두면 100vh 를 넘겨 스크롤이 생긴다. */
main:has(.intro){padding-bottom:0}
.intro{position:relative;min-height:100dvh;display:flex;align-items:flex-end;isolation:isolate}
/* --img 는 posterStyle 이 넣는 background 단축값 (이미지 → 플레이스홀더 순) */
.intro::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--img);background-position:center 18%}
.intro::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(0,0,0,.9) 12%,rgba(0,0,0,.35) 52%,rgba(0,0,0,.2))}
.intro-back{position:absolute;top:14px;left:14px;z-index:2;padding:6px;border-radius:50%;
  background:rgba(0,0,0,.35);backdrop-filter:blur(4px)}
.intro-back .ic{stroke:#fff;width:24px;height:24px}
.intro-body{position:relative;z-index:1;width:100%;padding:0 24px calc(36px + env(safe-area-inset-bottom));color:#fff}
.intro-quote{font-size:21px;font-weight:700;line-height:1.55;letter-spacing:-.03em;
  text-shadow:0 2px 12px rgba(0,0,0,.5)}
.intro-name{margin-top:12px;font-size:14px;color:rgba(255,255,255,.8)}
.intro-cta{margin-top:28px;background:rgba(255,255,255,.95);color:#111}

/* 시나리오 인트로 — .intro 위에 얹는다 */
.vn-skip{position:absolute;top:18px;right:16px;z-index:2;font-size:14px;color:rgba(255,255,255,.75);
  padding:6px 10px;border-radius:99px;background:rgba(0,0,0,.35);backdrop-filter:blur(4px)}
.vn-sfx{font-size:30px;font-weight:800;letter-spacing:-.04em;color:rgba(255,255,255,.55);
  margin-bottom:10px;text-shadow:0 2px 16px rgba(0,0,0,.6)}
.vn-who{margin-bottom:8px;font-size:14px;letter-spacing:.04em;color:rgba(255,255,255,.7)}
.vn-choices{display:flex;flex-direction:column;gap:10px;margin-top:28px}
.vn-choice{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(6px)}
.vn-choice:active{background:rgba(255,255,255,.26)}

/* 리뷰 필터 / 구매횟수 */
.rv-filter{display:flex;gap:8px;overflow-x:auto;padding:14px 20px 4px;scrollbar-width:none}
.rv-filter::-webkit-scrollbar{display:none}
/* 2026-10-15 버튼을 감싼 링크가 줄어들며 글자가 세로로 꺾였다 → 링크도 줄어들지 않게, 글자는 한 줄 */
.rv-filter a{flex:0 0 auto}
.stars .star-off{opacity:.25}
.rv-empty{line-height:1.8}
.rv-empty b{font-size:17px}
.rv-filter button{flex:0 0 auto;white-space:nowrap;padding:7px 14px;border-radius:99px;border:1px solid var(--line2);
  font-size:14px;font-weight:500;color:#52525b;background:#fff}
.rv-filter button[aria-pressed="true"]{background:#111;border-color:#111;color:#fff;font-weight:700}
.rv-meta b{font-weight:700;color:#111}
.rv-item{margin-top:2px;font-size:14px;color:#a1a1aa}

/* 드로어 로그인 유도 */
.drawer-login{display:block;padding:16px;border-radius:10px;background:#fafafa;border:1px solid var(--line);
  margin-bottom:8px}
.drawer-login b{display:block;font-size:15px;font-weight:700}
.drawer-login span{display:block;margin-top:4px;font-size:14px;color:var(--sub)}

/* 장고 이관분 */
.hint{margin-top:8px;font-size:14px;color:#a1a1aa;line-height:1.5}
.toast-static{margin:14px 20px 0;padding:12px 16px;border-radius:8px;background:#111;color:#fff;font-size:14px}
.form input[type=text],.form input[type=password],.form select{width:100%;border:1px solid var(--line2);
  border-radius:8px;padding:13px 12px;font-size:15px;background:#fff}
.form input:focus,.form select:focus{outline:none;border-color:#111}

/* 스프라이트 아이콘 — 색·굵기를 한 곳에서 통제 */
svg use { fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round }
.ic { width: 26px; height: 26px; color: #111; display: block }
.hd-back .ic { width: 24px; height: 24px }
.bn svg { width: 24px; height: 24px }
.bn a.on svg use { stroke-width: 2 }
.intro-back .ic { color: #fff }

/* 폼 컨트롤 정리 — 네이티브 체크박스/셀렉트는 OS마다 크기가 달라 그리드가 어긋난다 */
.form .fld { margin-bottom: 22px }
.form .fld > label:not(.check) { display:block; font-size:14px; font-weight:700; margin-bottom:8px; color:#111 }

/* 셀렉트: 화살표를 직접 그려 높이를 인풋과 맞춘다 */
.form select {
  -webkit-appearance:none; appearance:none;
  height:48px; padding:0 34px 0 12px; line-height:normal;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23757575' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:18px;
}
.form select:disabled { background-color:#fafafa; color:#a1a1aa }
.form input[type=text], .form input[type=password] { height:48px }

/* 세그먼트 버튼도 같은 높이로 */
.seg button { height:48px; padding:0 }

/* 3열 날짜: 년이 네 자리라 조금 넓게, 나머지는 균등 */
.row3 { display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:8px }

/* 체크박스 — appearance 를 꺼서 어디서나 같은 크기로 그린다.
   2026-10-14 사용자: 「태어난 시간 몰라요 체크박스는 좀 잘 보이게」 — 테두리가 연한 선 색이라 다크에서 묻혔다.
   줄 전체를 테두리 있는 칸으로, 상자는 22px · 진한 테두리로. */
.form .check, .check { display:flex; align-items:center; gap:12px; margin-top:12px; padding:13px 14px;
  border:1.5px solid #d4d4d8; border-radius:12px; background:#fff;
  font-size:15px; font-weight:600; color:#27272a; cursor:pointer; user-select:none;
  transition:border-color .15s, background .15s }
.check input[type=checkbox] {
  -webkit-appearance:none; appearance:none; margin:0; padding:0;
  width:22px; height:22px; min-width:22px; flex:0 0 22px; border:2px solid #71717a;
  border-radius:6px; background:#fff; position:relative; cursor:pointer;
  transition:background .15s, border-color .15s;
}
.check input[type=checkbox]:checked { background:#111; border-color:#111 }
.check input[type=checkbox]:checked::after {
  content:""; position:absolute; left:6px; top:2px;
  width:5px; height:11px; border:solid #fff; border-width:0 2.5px 2.5px 0; rotate:45deg;
}
.check input[type=checkbox]:focus-visible { outline:2px solid #111; outline-offset:2px }
.check:has(input:checked) { color:#111; font-weight:700; border-color:#111; background:#f4f4f5 }

[hidden]{display:none!important}

/* 브랜드 마크 — 글자 대신 심볼 */
/* 마크는 생성 이미지(투명 PNG). 배경 없이 그대로 얹는다. */
img.logo-mark { width:26px; height:26px; border-radius:0; background:none; display:block }
.logo-word { letter-spacing:-.03em }

/* 가로 레일 화살표 — 데스크톱에선 이게 유일한 조작 수단이다 */
.rail-wrap { position:relative }
.rail-nav { position:absolute; top:calc(50% - 42px); translate:0 -50%; z-index:5;
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.94); box-shadow:0 2px 10px rgba(0,0,0,.16);
  color:#111; transition:opacity .15s, scale .12s }
.rail-nav svg { width:20px; height:20px }
.rail-nav.prev { left:8px }
.rail-nav.next { right:8px }
.rail-nav:active { scale:.92 }
.rail-wrap.no-nav .rail-nav { display:none }
/* 히어로는 카드가 꽉 차서 화살표를 가운데 높이에 둔다 */
.hero .rail-nav { top:50% }
/* 터치 기기는 스와이프가 자연스러우니 화살표를 감춘다 */
@media (hover:none) { .rail-nav { display:none } }

/* 히어로 — Swiper cards. 겹쳐 쌓인 카드가 회전하며 넘어간다 */
.hero { padding-top:24px }
.hero-swiper { width:calc(100% - 40px); margin:0 auto; overflow:visible }
.hero-swiper .swiper-slide { border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 6px 20px rgba(0,0,0,.14) }
.hero-swiper .poster { aspect-ratio:4/5; border-radius:16px; padding-bottom:30px }
.hero-swiper .p-ttl { font-size:42px }
.hero-swiper .p-sub { font-size:15px; margin-bottom:6px }
/* 뒤에 깔린 카드는 살짝 눌러 깊이를 준다 */
.hero-swiper .swiper-slide:not(.swiper-slide-active) { filter:brightness(.92) }

/* 페이지네이션을 기존 도트 스타일에 맞춘다 */
.hero-dots { display:flex; gap:6px; justify-content:center; padding:16px 0 0 }
.hero-dots .dot { width:6px; height:6px; border-radius:50%; background:#e1e1e1;
  cursor:pointer; transition:.2s; border:0; padding:0 }
.hero-dots .dot.on { background:#111 }
/* Moonstone navigation: consistent optical grid and large touch targets. */
.hd-ico{gap:4px}
.hd-ico>a,.hd-ico>button,#menuClose{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;flex-shrink:0}
.hd-ico .ic,#menuClose .ic{display:block;width:24px;height:24px;stroke:#243b42;stroke-width:1.65}
#menuBtn{background:#f4f6f5;border:1px solid #e5ebea}
#menuBtn:hover,#menuClose:hover{background:#e9efed}
#menuClose{float:right;background:#f2f5f3}
.bn{padding:8px 12px calc(10px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;background:rgba(253,253,250,.97);border:1px solid #e4e9e5;border-bottom:0;box-shadow:0 -6px 28px #142b3510;backdrop-filter:blur(18px)}
.bn a{height:60px;gap:3px;font-size:14px;font-weight:550;color:#647476;border-radius:14px;letter-spacing:-.02em}
.bn .nav-icon{display:grid;place-items:center;width:44px;height:30px;border-radius:12px;transition:background .18s}
/* 하단 네비 아이콘. 2026-10-14 사용자: 「아이콘 크기 좀 줄여주라」 → 30px 에서 24px.
   작아지면 선이 같이 가늘어지므로 굵기를 2(누른 칸 2.3)로 올려 또렷함을 지킨다. */
.bn svg{width:24px;height:24px;stroke-width:2}
.bn a.on svg use{stroke-width:2.3}
.bn a.on{color:#213f44;font-weight:750}
.bn a.on .nav-icon{background:#e7efea}
.bn a.on .icon-accent{stroke:#a0804b}
.bn a:hover .nav-icon{background:#eef2ee}
.bn a:focus-visible,.hd-ico>a:focus-visible,.hd-ico>button:focus-visible,#menuClose:focus-visible{outline:2px solid #6b8886;outline-offset:2px}
.drawer{background:#fcfdfb;border-left:1px solid #dfe7e3}
.drawer h3{color:#80938c;font-size:14px;letter-spacing:.09em}
.drawer>a:not(.drawer-login){color:#294249;border-color:#eaf0eb;font-weight:550}
.drawer .drawer-login{padding:18px!important;background:#edf3ef;border:1px solid #dce6df;border-radius:16px}
.social-login{padding:32px 24px 0;display:grid;gap:12px}
.social-login>p{font-size:14px;line-height:1.7;color:#526761}
.social-button{width:100%;min-height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:12px;font-weight:650}
.social-button svg{width:21px;height:21px;fill:currentColor}
.social-button.kakao{background:#fee500;color:#191919}
.social-button.naver{background:#03c75a;color:#fff}
.autofill-note{padding:16px;background:#edf3ef;border:1px solid #dce6df;border-radius:12px;font-size:14px;line-height:1.8;color:#36534a;margin:18px 0}
.hero-dots{flex-wrap:wrap;max-width:85%;margin-inline:auto}
@media(prefers-reduced-motion:reduce){.drawer,.scrim,.bn .nav-icon{transition:none}}
/* 태어난 시간 — 시진 한 번 고르기 (2026-10-13). .fld label 공통 규칙을 이기도록 .fld 아래로 묶는다 */
/* 템플릿 style="" 에 박아 두던 글자색. 인라인이면 다크 테마가 바꿀 수 없어서 클래스로 뺐다(2026-10-14). */
.t-body{color:#3f3f46}.t-sub{color:#757575}.t-faint{color:#a1a1aa}
/* 검색 화면 (2026-10-14) — 머리글 자리에 닫기 + 검색칸, 아래로 키워드·고민·결과 */
.search-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.search-close{flex:0 0 44px;height:44px;display:grid;place-items:center;border-radius:12px;background:#f4f4f5;color:inherit}
.search-field{flex:1;display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:999px;background:#f4f4f5;border:1px solid #e4e4e7}
.search-field .ic{width:18px;height:18px;color:#71717a;flex:0 0 auto}
.search-field input{flex:1;min-width:0;border:0;background:transparent;font-size:16px;color:inherit;outline:0}
.search-page{padding:8px 20px 24px}
.search-h{font-size:15px;font-weight:700;margin:20px 0 10px;color:#3f3f46}
.search-chips{display:flex;flex-wrap:wrap;gap:8px}
.search-chips .chip{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;border:1px solid #e4e4e7;background:#fff;font-size:14px;font-weight:600;color:#27272a;text-decoration:none}
.search-chips .chip.is-on{background:#18181b;border-color:#18181b;color:#fff}
.search-concerns{list-style:none;margin:0;padding:0}
.search-concerns a{display:flex;align-items:center;gap:10px;padding:11px 2px;font-size:15px;font-weight:600;color:#3f3f46;text-decoration:none}
.search-concerns .ic{width:16px;height:16px;color:#a1a1aa}
.search-page .grid{margin-top:4px}
/* 홈 개인화 줄 (2026-10-14) — 위에 작은 회색 머리말, 카드 왼쪽 아래에 「○○ 픽」 배지 */
.personal .sec-hd>div{min-width:0}
.personal-kicker{margin:0 0 4px;font-size:14px;font-weight:600;color:#71717a}
.card-art{position:relative}
.pick-badge{position:absolute;left:10px;top:10px;z-index:3;padding:4px 10px;border-radius:999px;background:rgba(17,17,17,.82);color:#fff;font-size:14px;font-weight:700;line-height:1.2;backdrop-filter:blur(4px)}

/* 홈 하단 팝업 (2026-10-18) — 같은 화면 안의 시트라 팝업 차단과 상관없다 */
.hp{position:fixed;inset:0;z-index:90}
.hp-dim{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .3s}
.hp-sheet{position:absolute;left:50%;bottom:0;width:100%;max-width:var(--app-w);translate:-50% 100%;transition:translate .32s cubic-bezier(.2,.8,.2,1);
  border-radius:20px 20px 0 0;overflow:hidden;background:#fff}
.hp.is-on .hp-dim{opacity:1}
.hp.is-on .hp-sheet{translate:-50% 0}
.hp-slide{display:block;aspect-ratio:4/3;background:#f1f1f3}
.hp-slide img{width:100%;height:100%;object-fit:cover;display:block}
.hp-count{position:absolute;top:12px;right:12px;z-index:2;padding:3px 10px;border-radius:99px;background:rgba(0,0,0,.45);color:#fff;font-size:14px;font-weight:600}
.hp-foot{display:flex;justify-content:space-between;align-items:center;padding:16px 20px calc(16px + env(safe-area-inset-bottom))}
.hp-foot button{font-size:15px;color:#8b8b93;background:none;border:0;padding:4px 0}
.hp-foot .hp-close{color:#111;font-weight:700}
html.hp-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){.hp-dim,.hp-sheet{transition:none}}

/* 고객 문의 (2026-10-19) — 문의 종류 · 관련 주문, 내 문의 카드, 새 답변 점 */
.support-login-btn{margin-top:20px}
.fld .fld-label{display:block;font-size:14px;font-weight:700;margin-bottom:8px}
.cat-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cat-pick label{position:relative;margin:0}
.cat-pick input{position:absolute;opacity:0;pointer-events:none}
.cat-pick span{display:block;padding:12px 4px;border:1.5px solid #d4d4d8;border-radius:10px;text-align:center;font-size:15px;font-weight:600;color:#52525b;cursor:pointer}
.cat-pick input:checked+span{border-color:#111;background:#111;color:#fff}
.cat-pick input:focus-visible+span{outline:2px solid #3182f6;outline-offset:2px}
.support-form .hint{margin:-6px 0 14px}
.support-list-title{margin:40px 0 4px;font-size:18px;font-weight:800}
.ticket{margin:14px 0;padding:18px;border:1px solid var(--line2);border-radius:14px;font-size:15px;line-height:1.7}
.ticket.is-new{border-color:#e5484d}
.ticket-meta{display:flex;gap:6px;align-items:center;margin-bottom:8px}
.ticket-cat,.ticket-state,.ticket-new{padding:2px 9px;border-radius:999px;font-size:14px;font-weight:700;line-height:1.6}
.ticket-cat{background:#f4f4f5;color:#52525b}
.ticket-state{background:#fff7e0;color:#8a6a24}
.ticket-state.is-done{background:#e8f5ec;color:#1f7a45}
.ticket-new{background:#e5484d;color:#fff}
.ticket-subject{display:block;font-size:16px}
.ticket-sub{font-size:14px;color:#8b8b93;margin-top:2px}
.ticket-body{white-space:pre-line;margin-top:10px}
.ticket-reply{margin-top:14px;padding-top:14px;border-top:1px solid var(--line2)}
.ticket-reply p{white-space:pre-line;margin-top:4px}
.ticket-wait{margin-top:10px;font-size:14px;color:#8b8b93}
.bn .nav-icon{position:relative}
.nav-dot{position:absolute;top:3px;right:9px;width:8px;height:8px;border-radius:50%;background:#e5484d;box-shadow:0 0 0 2px #fff}
.me-menu .me-dot{display:inline-block;width:8px;height:8px;margin-left:6px;border-radius:50%;background:#e5484d;vertical-align:middle}
.refund-answer{margin-top:12px;padding:14px;border-radius:12px;background:#f4f4f5;font-size:15px;line-height:1.7}
.refund-answer b{display:block;margin-bottom:4px}
.refund-answer p{white-space:pre-line}
.me-menu .me-label{font-weight:inherit}
.support-form{margin-top:20px}
.result-order-link{margin:28px 0 8px;text-align:center;font-size:14px}.result-order-link a{color:#8b8b93;text-decoration:underline;text-underline-offset:3px}

/* 2026-10-25 카테고리 개수는 누르는 곳이 아니다 — 꺾쇠를 뺀다 */
.more.no-arrow::after{content:none}