/* ══════════════════════════════════════════════════════════════
   사주코끼리 메인 v7 — 원형(_v7이식_작업/입력/v7_원본.html 2~361행) 이식본

   원형에서 바꾼 것은 셋뿐이다.
     ① 스코프  : 전역 셀렉터를 #v7-app 아래로 (원형은 단독 페이지용이었다)
     ② 경로    : /*FONT*/ /*ARTS*/ 플레이스홀더를 실제 파일 경로로
     ③ 정합    : 430px 폰 프레임을 걷어내고 라이브 컨테이너(480px)에 맞춤

   선언 내용은 원형 그대로다. "정리"하거나 "개선"하지 않았다.
   ══════════════════════════════════════════════════════════════ */

/* ── ① 폰트 (원형 3행 /*FONT*/ 자리) ────────────────────────────
   .css 는 정적 서빙이라 템플릿 파서가 안 돈다.
   {$layout_info->path} 를 쓰면 그대로 문자열로 나가서 폰트가 통째로 죽는다. */
@font-face{font-family:Pretendard;src:url('../font/Pretendard-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Pretendard;src:url('../font/Pretendard-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Pretendard;src:url('../font/Pretendard-ExtraBold.woff2') format('woff2');font-weight:800;font-display:swap}

/* ── 토큰 (원형 :root 16~45행) ────────────────────────────────── */
#v7-app{
  --paper:#FFFFFF;
  --tint:#F5F6F8;
  --tint-2:#EAECEF;
  --ink:#0B0D10;
  --ink-2:#31373F;
  --muted:#5D646E;
  --hair:rgba(11,13,16,.13);
  --hair-2:rgba(11,13,16,.07);
  --key:#BD3728;
  --key-ink:#FFFFFF;
  --key-soft:#FBEDEA;
  --on-art:#FFFFFF;
  --on-art-2:rgba(255,255,255,.94);
  --scrim:rgba(6,8,11,.84); --scrim-mid:rgba(6,8,11,.36); --scrim-top:rgba(6,8,11,.02);
  --halo:rgba(6,8,11,.5);
  --knob:rgba(255,255,255,.22);
  --glass:rgba(255,255,255,.9);
  --wood:#3F6B52; --fire:#A8503E; --earth:#8A6E3C; --metal:#5E6873; --water:#2F5170;
  --s0:2px; --s1:4px; --s1h:6px; --s2:8px; --s2h:10px; --s3:12px; --s3h:14px;
  --s4:16px; --s5:20px; --s6:24px; --s7:28px; --s8:32px; --s10:40px;
  --e1:0 1px 2px rgba(11,16,26,.05);
  --e2:0 1px 2px rgba(11,16,26,.05), 0 12px 24px -16px rgba(11,16,26,.24);
  --e3:0 22px 48px -24px rgba(11,16,26,.4);
  --font-body:'Pretendard','Pretendard Variable',-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  --font-seal:'AppleMyungjo','Nanum Myeongjo','Batang','Noto Serif KR',serif;
  --ease:cubic-bezier(.32,.72,0,1);

  /* ② 아트워크 (원형 44행 /*ARTS*/ 자리) */
  --art-hero:url('../img/v7/hero.jpg');
  --art-lt:url('../img/v7/lt.jpg');
  --art-gh:url('../img/v7/gh.jpg');
  --art-ny:url('../img/v7/ny.jpg');
  --art-td:url('../img/v7/td.jpg');
  --art-pl:url('../img/v7/pl.jpg');
  /* mb.jpg 는 아직 서버에 없다(404). 전용 아트워크가 준비되면 교체할 것. */
  --art-mb:url('../img/v7/mb.jpg');
}

/* ── 기본 (원형 46~60행) ───────────────────────────────────────
   원형의 html{scroll-behavior} · html,body{background:#DFE2E6} · .grain 은
   버렸다. 사이트 전체를 덮치는 규칙이라 이식하면 안 된다. */
#v7-app,#v7-app *{box-sizing:border-box}
#v7-app{font-family:var(--font-body);color:var(--ink);-webkit-font-smoothing:antialiased;
  font-size:15px;line-height:1.55;letter-spacing:-.018em}
#v7-app a{color:inherit;text-decoration:none}
#v7-app button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}
#v7-app :focus-visible{outline:2px solid var(--key);outline-offset:2px;border-radius:6px}
#v7-app .sprite{display:none}
#v7-app .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 원형 .i 는 stroke-width:1.6 이다. 그건 원형의 손그림 sprite 기준값이고
   우리 sprite 는 Phosphor viewBox 256 이라 22px 로 줄면 0.14px 가 되어 사라진다.
   12/256*22 ≈ 1.03px. */
#v7-app .i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:12;
  stroke-linecap:round;stroke-linejoin:round}
#v7-app .i-sm{width:15px;height:15px}
#v7-app .i-lg{width:28px;height:28px}

/* ── ③ 프레임 정합 (원형 .app 62행) ────────────────────────────
   원형 .app 은 max-width:430px + 회색 바탕 + min-height:100dvh 의 폰 프레임이다.
   라이브는 .sk-wrapper/.sk-content/.sk-footer 가 전부 480px 라
   그대로 두면 좌우 25px 회색 띠가 남고 푸터·독과 폭이 어긋난다. */
#v7-app{background:transparent}
#v7-app .app{max-width:none;margin:0;background:var(--paper);min-height:0;
  position:relative;box-shadow:none;padding-bottom:0}
#v7-app .skip{position:absolute;left:var(--s5);top:-60px;z-index:70;padding:var(--s2) var(--s4);
  border-radius:8px;background:var(--ink);color:var(--on-art);font-size:13px;font-weight:800;
  transition:top .3s var(--ease)}
#v7-app .skip:focus{top:var(--s2)}

/* ══ 화면 라우팅 (원형 72~75행) ══ */
#v7-app .scr{display:none}
#v7-app .scr.on{display:block;animation:v7-screen .42s var(--ease)}
@keyframes v7-screen{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}

/* ══ 상단 바 (원형 77~87행) ══ */
#v7-app .bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3h) var(--s5);background:var(--glass);
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  box-shadow:0 1px 0 var(--hair-2)}
#v7-app .bar .seal{font-family:var(--font-seal);font-size:22px;line-height:1;color:var(--key)}
#v7-app .bar h1{margin:0;font-size:17px;font-weight:800;letter-spacing:-.05em;flex:1;
  overflow-wrap:anywhere;min-width:0}
#v7-app .ib{width:38px;height:38px;display:grid;place-items:center;color:var(--ink-2);
  border-radius:10px;transition:color .14s var(--ease),background-color .14s var(--ease)}
#v7-app .ib:active{color:var(--key);background:var(--tint)}

/* ══ 공통 조각 (원형 89~99행) ══ */
#v7-app .a-lt{background-image:var(--art-lt)} #v7-app .a-gh{background-image:var(--art-gh)}
#v7-app .a-ny{background-image:var(--art-ny)} #v7-app .a-td{background-image:var(--art-td)}
#v7-app .a-pl{background-image:var(--art-pl)} #v7-app .a-mb{background-image:var(--art-mb)}
#v7-app .oh{border-radius:6px;flex:0 0 auto;display:grid;place-items:center;
  font-family:var(--font-seal);color:var(--on-art);line-height:1;
  width:20px;height:20px;font-size:11px}
#v7-app .oh-w{background:var(--wood)} #v7-app .oh-f{background:var(--fire)}
#v7-app .oh-e{background:var(--earth)} #v7-app .oh-m{background:var(--metal)}
#v7-app .oh-a{background:var(--water)}
#v7-app .won{font-variant-numeric:tabular-nums;letter-spacing:-.04em}
#v7-app .was{color:var(--muted);font-weight:400;font-size:.72em;margin-right:var(--s1)}

#v7-app .sec{padding:0 var(--s5);margin-top:var(--s8)}
#v7-app .sec.tight{margin-top:var(--s7)}
#v7-app .sec.band{margin-top:var(--s7);padding-top:var(--s5);padding-bottom:var(--s6);
  background:var(--tint);box-shadow:inset 0 1px 0 var(--hair-2),inset 0 -1px 0 var(--hair-2)}
#v7-app .hd{display:flex;align-items:flex-end;gap:var(--s3);margin-bottom:var(--s3)}
#v7-app .hd h2{margin:0;font-size:20px;font-weight:800;letter-spacing:-.05em;
  overflow-wrap:anywhere;min-width:0}
#v7-app .hd .sb{margin-top:var(--s0);font-size:12.5px;color:var(--muted)}
#v7-app .hd .mo{margin-left:auto;font-size:12.5px;color:var(--muted);white-space:nowrap;
  display:inline-flex;align-items:center;gap:var(--s0);
  padding:var(--s2h) var(--s1);margin-block:calc(var(--s2h) * -1);
  transition:color .14s var(--ease)}
#v7-app .hd .mo:active{color:var(--key)}

#v7-app .cta{display:inline-flex;align-items:center;gap:var(--s3);
  padding:var(--s2) var(--s2) var(--s2) var(--s5);border-radius:999px;
  background:var(--key);color:var(--key-ink);font-size:15px;font-weight:800;line-height:1;
  white-space:nowrap;transition:transform .2s var(--ease),filter .14s var(--ease)}
#v7-app .cta:hover{filter:brightness(1.07)}
#v7-app .cta:active{transform:scale(.97)}
#v7-app .cta .knob{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--knob)}
#v7-app .cta.wide{width:100%;justify-content:center;padding:var(--s3h) var(--s5)}
#v7-app .cta.ghost{background:var(--tint);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair-2)}
#v7-app .cta.ghost .knob{background:rgba(11,13,16,.07)}

/* ══ 히어로 (원형 127~143행) ══ */
#v7-app .hero{padding:var(--s4) var(--s5) 0}
#v7-app .hero .art{border-radius:22px;overflow:hidden;position:relative;isolation:isolate;
  min-height:232px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--s6) var(--s5);box-shadow:var(--e3);
  background-image:var(--art-hero);background-size:cover;background-position:58% 40%;
  color:var(--on-art)}
#v7-app .hero .art::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,var(--scrim) 0%,var(--scrim) 28%,var(--scrim-mid) 58%,var(--scrim-top) 100%)}
#v7-app .hero .yr{font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--on-art-2);
  text-shadow:0 1px 10px var(--halo)}
#v7-app .hero h2{margin:var(--s2) 0 var(--s2);font-size:29px;font-weight:800;letter-spacing:-.055em;
  line-height:1.12;overflow-wrap:anywhere;min-width:0;text-wrap:balance;
  text-shadow:0 2px 16px var(--halo)}
#v7-app .hero p{margin:0 0 var(--s5);font-size:14px;color:var(--on-art-2);
  text-shadow:0 1px 10px var(--halo)}
#v7-app .hero .cta{align-self:flex-start}

/* ══ 오늘 요약 띠 (원형 145~157행) ══ */
#v7-app .tdy{display:flex;align-items:center;gap:var(--s4)}
#v7-app .tdy .stamp{width:60px;height:60px;border-radius:15px;flex:0 0 auto;display:grid;
  place-items:center;background:var(--ink);color:var(--key);
  font-family:var(--font-seal);font-size:42px;line-height:1;box-shadow:var(--e2)}
#v7-app .tdy .fig{flex:1;min-width:0}
#v7-app .tdy .lab{font-size:12.5px;color:var(--muted)}
#v7-app .tdy .big{font-size:27px;font-weight:800;letter-spacing:-.06em;line-height:1.08;
  overflow-wrap:anywhere;min-width:0;margin-top:var(--s0)}
#v7-app .tdy .big small{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:-.02em}
#v7-app .tdy-note{margin-top:var(--s3h);padding-top:var(--s3);border-top:1px solid var(--hair);
  font-size:13.5px;line-height:1.7;color:var(--ink-2)}
#v7-app .tdy-note b{color:var(--ink);font-weight:800}

/* ══ 유료 레일 (원형 159~183행) ══ */
#v7-app .rail{display:flex;flex-direction:column;gap:22px}
#v7-app .cd{flex:0 0 auto;width:100%;text-align:left;
  transition:transform .2s var(--ease)}
#v7-app .cd:active{transform:scale(.985)}
#v7-app .cd .im{position:relative;isolation:isolate;aspect-ratio:5/2;border-radius:13px;
  overflow:hidden;background-size:cover;background-position:60% 40%;box-shadow:var(--e1);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;color:var(--on-art)}
#v7-app .cd .im::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,var(--scrim) 0%,var(--scrim) 24%,var(--scrim-mid) 56%,var(--scrim-top) 100%)}
#v7-app .cd .lb{display:block;padding:0 var(--s3);margin-bottom:var(--s0);font-size:12.5px;
  font-weight:800;color:var(--on-art);opacity:.88;text-shadow:0 1px 10px var(--halo)}
#v7-app .cd .im b{display:block;padding:0 var(--s3) var(--s3);font-size:19px;font-weight:800;
  letter-spacing:-.05em;line-height:1.28;overflow-wrap:anywhere;min-width:0;
  text-shadow:0 1px 10px var(--halo)}

/* ══ 무료 벤토 (원형 185~200행) ══ */
#v7-app .bento{display:grid;grid-template-columns:1fr;gap:var(--s3)}
#v7-app .tl{position:relative;isolation:isolate;overflow:hidden;border-radius:15px;
  background-size:cover;background-position:60% 40%;color:var(--on-art);text-align:left;
  min-height:102px;padding:var(--s3h);display:flex;flex-direction:column;
  align-items:flex-start;justify-content:flex-end;box-shadow:var(--e2);
  transition:transform .2s var(--ease)}
#v7-app .tl::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,var(--scrim) 0%,var(--scrim) 24%,var(--scrim-mid) 58%,var(--scrim-top) 100%)}
#v7-app .tl.lite{color:var(--ink)}
#v7-app .tl.lite::before{background:linear-gradient(0deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.90) 24%,rgba(255,255,255,.50) 58%,rgba(255,255,255,.02) 100%)}
#v7-app .tl.lite b{color:var(--ink);text-shadow:none}
#v7-app .tl.lite .mt{color:var(--ink-2);text-shadow:none}
#v7-app .tl:active{transform:scale(.985)}
#v7-app .tl b{display:block;width:100%;font-size:17px;font-weight:800;letter-spacing:-.05em;
  line-height:1.25;overflow-wrap:anywhere;min-width:0;text-shadow:0 1px 10px var(--halo)}
#v7-app .tl .mt{display:flex;align-items:center;gap:var(--s1h);margin-top:var(--s1h);
  font-size:11.5px;color:var(--on-art-2);text-shadow:0 1px 10px var(--halo)}

/* ══ 순위 행 (원형 202~222행) ══ */
#v7-app .rank{display:flex;flex-direction:column;gap:var(--s2)}
#v7-app .rw{display:flex;align-items:center;gap:var(--s4);width:100%;text-align:left;
  padding:var(--s3) var(--s4);border-radius:16px;background:var(--tint);
  box-shadow:inset 0 0 0 1px var(--hair-2);
  transition:background-color .14s var(--ease),transform .2s var(--ease)}
#v7-app .rw:hover{background:var(--tint-2)}
#v7-app .rw:active{transform:scale(.99)}
#v7-app .rw .no{flex:0 0 auto;width:17px;text-align:center;font-size:15px;font-weight:800;
  color:var(--key);font-variant-numeric:tabular-nums}
#v7-app .rw .bd{flex:1;min-width:0}
#v7-app .rw .nm{font-size:16px;font-weight:800;letter-spacing:-.05em;
  overflow-wrap:anywhere;min-width:0}
#v7-app .rw .use{flex:0 0 auto;display:flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
#v7-app .rw .use i{font-style:normal;font-size:12px;line-height:1}
.rw .use{flex:0 0 auto;display:flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.rw .use i{font-style:normal;font-size:12px;line-height:1}
#v7-app .rw .cps{display:flex;gap:var(--s1);margin-top:var(--s1h);flex-wrap:wrap}
#v7-app .cp{font-size:11.5px;line-height:1;padding:var(--s1h) var(--s2);border-radius:999px;
  color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--hair)}
#v7-app .cp.sl{color:var(--on-art);box-shadow:none;font-family:var(--font-seal)}

/* ══ 무료 화면 (원형 246~269행) ══ */
#v7-app .fl{display:flex;align-items:center;gap:var(--s3h);width:100%;text-align:left;
  padding:var(--s3h) 0;border-bottom:1px solid var(--hair-2);
  transition:opacity .14s var(--ease),transform .2s var(--ease)}
#v7-app .fl:last-child{border-bottom:none}
#v7-app .fl:active{opacity:.72;transform:scale(.995)}
#v7-app .fl .th{width:52px;height:52px;border-radius:13px;flex:0 0 auto;background-size:cover;
  background-position:60% 40%;box-shadow:var(--e1)}
#v7-app .fl .tx{flex:1;min-width:0}
#v7-app .fl .tx b{display:block;font-size:16px;font-weight:800;letter-spacing:-.045em}
#v7-app .fl .tx span{display:block;margin-top:var(--s0);font-size:12.5px;color:var(--muted);
  line-height:1.45}
#v7-app .fl .go{flex:0 0 auto;color:var(--muted)}
#v7-app .nt{margin-top:var(--s4);font-size:13.5px;line-height:1.7;color:var(--ink-2)}
#v7-app .nt b{color:var(--ink);font-weight:800}

/* ══ 내 결과 화면 (원형 271~289행) ══ */
#v7-app .empt{margin:var(--s6) var(--s5) 0;padding:var(--s7) var(--s5);border-radius:18px;
  background:var(--tint);text-align:center;box-shadow:inset 0 0 0 1px var(--hair-2)}
#v7-app .empt .sl{font-family:var(--font-seal);font-size:38px;color:var(--key);line-height:1}
#v7-app .empt h2{margin:var(--s3) 0 var(--s1h);font-size:18px;font-weight:800;letter-spacing:-.05em}
#v7-app .empt p{margin:0 0 var(--s5);font-size:13px;color:var(--muted);line-height:1.65}
#v7-app .rs{display:flex;align-items:center;gap:var(--s3h);width:100%;text-align:left;
  padding:var(--s3h);border-radius:14px;background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--hair-2);margin-bottom:var(--s2);
  transition:transform .2s var(--ease),background-color .14s var(--ease)}
#v7-app .rs:active{transform:scale(.99);background:var(--tint)}
#v7-app .rs .th{width:46px;height:46px;border-radius:11px;flex:0 0 auto;background-size:cover;
  background-position:60% 40%}
#v7-app .rs .tx{flex:1;min-width:0}
#v7-app .rs .tx b{display:block;font-size:15px;font-weight:800;letter-spacing:-.045em}
#v7-app .rs .tx span{font-size:11.5px;color:var(--muted)}
#v7-app .rs .st{flex:0 0 auto;font-size:11.5px;font-weight:800;padding:var(--s1h) var(--s2h);
  border-radius:999px;background:var(--key-soft);color:var(--key)}
#v7-app .rs .st.done{background:var(--tint-2);color:var(--ink-2)}

/* ══ 상담 화면 (원형 291~318행) ══ */
#v7-app .ch{display:flex;align-items:center;gap:var(--s4);width:100%;text-align:left;
  padding:var(--s4);border-radius:16px;margin-bottom:var(--s2h);
  transition:transform .2s var(--ease)}
#v7-app .ch:active{transform:scale(.99)}
#v7-app .ch.k{background:var(--ink);color:var(--on-art)}
#v7-app .ch.q{background:var(--tint);box-shadow:inset 0 0 0 1px var(--hair-2)}
#v7-app .ch .ic{width:42px;height:42px;border-radius:12px;flex:0 0 auto;display:grid;
  place-items:center;background:rgba(255,255,255,.12)}
#v7-app .ch.q .ic{background:var(--paper);color:var(--key);box-shadow:inset 0 0 0 1px var(--hair-2)}
#v7-app .ch .tx{flex:1;min-width:0}
#v7-app .ch .tx b{display:block;font-size:16px;font-weight:800;letter-spacing:-.045em}
#v7-app .ch .tx span{font-size:12.5px;opacity:.72}
#v7-app .ch .go{flex:0 0 auto}
#v7-app .faq{margin-top:var(--s3)}
#v7-app .faq details{border-bottom:1px solid var(--hair-2)}
#v7-app .faq summary{list-style:none;cursor:pointer;padding:var(--s4) 0;font-size:14.5px;
  font-weight:600;display:flex;align-items:center;gap:var(--s3);
  transition:color .14s var(--ease)}
#v7-app .faq summary::-webkit-details-marker{display:none}
#v7-app .faq summary::after{content:"";margin-left:auto;width:9px;height:9px;flex:0 0 auto;
  border-right:1.8px solid var(--muted);border-bottom:1.8px solid var(--muted);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s var(--ease)}
#v7-app .faq details[open] summary{color:var(--key)}
#v7-app .faq details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
#v7-app .faq .an{padding:0 0 var(--s4);font-size:13.5px;line-height:1.75;color:var(--ink-2)}
#v7-app .hours{margin-top:var(--s5);padding:var(--s4);border-radius:14px;background:var(--key-soft);
  font-size:12.5px;line-height:1.7;color:var(--ink-2)}
#v7-app .hours b{display:block;color:var(--ink);font-weight:800;margin-bottom:var(--s0)}

/* ══ 안내 메모 (원형 320~323행) ══ */
#v7-app .memo{margin:var(--s8) var(--s5) 0;padding:var(--s5);border-radius:16px;background:var(--tint);
  box-shadow:inset 0 0 0 1px var(--hair-2);font-size:13px;line-height:1.75;color:var(--ink-2)}
#v7-app .memo b{display:block;margin-bottom:var(--s1h);color:var(--ink);font-weight:800}

/* ══ 하단 독 (원형 335~348행) ══
   원형 max-width:430px → 라이브 .sk-wrapper 와 같은 480px */
#v7-app .dock{position:fixed;left:0;right:0;bottom:0;z-index:40;max-width:480px;margin:0 auto;
  background:var(--glass);backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  box-shadow:0 -1px 0 var(--hair-2),inset 0 1px 0 rgba(255,255,255,.8);
  display:grid;grid-template-columns:repeat(5,1fr);
  padding:var(--s2) 0 max(var(--s3),env(safe-area-inset-bottom))}
#v7-app .dk{min-height:46px;display:grid;justify-items:center;align-content:center;gap:3px;
  font-size:10.5px;font-weight:600;color:var(--muted);position:relative;
  transition:color .14s var(--ease),transform .2s var(--ease)}
#v7-app .dk[aria-current="page"]{color:var(--ink);font-weight:800}
#v7-app .dk[aria-current="page"]::before{content:"";position:absolute;top:-8px;width:16px;height:2px;
  border-radius:2px;background:var(--key)}
#v7-app .dk:active{color:var(--key);transform:scale(.94)}

/* .sk-wrapper 의 padding-bottom 은 옛 sticky CTA 용 90px 이다.
   독(68px)보다 커서 푸터 아래에 어두운 바탕이 드러난다. 독 높이와 같게 맞춘다.
   스코프 밖이지만 main_v7.css 는 <load> 로 메인에만 걸리므로 안전하다. */
.sk-wrapper{padding-bottom:calc(56px + max(12px, env(safe-area-inset-bottom)))}

/* ══ 모션 (원형 350~360행) ══ */
@media (prefers-reduced-transparency:reduce){
  #v7-app .bar,#v7-app .dock{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}
}
#v7-app .en{opacity:0;transform:translate3d(0,14px,0);
  animation:v7-enter .8s var(--ease) var(--d,0s) forwards}
@keyframes v7-enter{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  #v7-app .en{opacity:1;transform:none;animation:none}
  #v7-app .scr.on{animation:none}
  #v7-app *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ══════════════════════════════════════════════════════════════
   원형에 없는 추가분 — 사용자 승인 하에 1차에서 넣은 것
   토큰은 전부 원형 것을 쓴다.
   ══════════════════════════════════════════════════════════════ */

/* ── CS 배너 ── */
#v7-app .cs{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding-top:var(--s5);padding-bottom:var(--s5);background:var(--ink);color:var(--on-art)}
#v7-app .cs b{font-size:12.5px;color:var(--on-art-2)}
#v7-app .cs h2{margin:var(--s0) 0;font-size:20px;font-weight:800;letter-spacing:-.05em}
#v7-app .cs p{margin:0;font-size:12.5px;color:var(--on-art-2)}
#v7-app .cs a{flex:0 0 auto;padding:var(--s2h) var(--s4);border-radius:999px;
  background:var(--key);color:var(--key-ink);font-size:13px;font-weight:800}

/* ── 준비중 토스트 (mbti·products 는 서버에 아직 없다) ── */
#v7-app .toast{position:fixed;left:50%;bottom:96px;z-index:45;transform:translate(-50%,8px);
  max-width:calc(100% - 40px);padding:var(--s3) var(--s5);border-radius:999px;
  background:var(--ink);color:var(--on-art);font-size:13px;font-weight:600;white-space:nowrap;
  box-shadow:var(--e2);opacity:0;pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease)}
#v7-app .toast.on{opacity:1;transform:translate(-50%,0)}

/* ══════════════════════════════════════════════════════════════
   layout.css 충돌 방어 — 반드시 파일 맨 끝
   layout.css → pages/style.css 가 먼저 로드되고 전역 태그 셀렉터가 걸려 있다.
     h1{color:#fff} h2{color:#fff}  → color 선언이 없으면 상속이 아니라 이게 이긴다
     a 에 어두운 background        → 링크 영역이 검정 위 검정이 된다
   2026-08-24 라이브에서 실제로 터진 것이다. 색은 상속에 기대지 말고 선언한다.
   ══════════════════════════════════════════════════════════════ */
#v7-app h1,#v7-app h2{color:var(--ink)}
#v7-app .hero h2,#v7-app .cd .im b,#v7-app .tl b,#v7-app .cs h2{color:var(--on-art)}
#v7-app a{background:transparent}
#v7-app .ch.k,#v7-app .ch.k .tx b{color:var(--on-art)}
#v7-app .ch.q,#v7-app .ch.q .tx b{color:var(--ink)}
#v7-app .cta,#v7-app .cs a{color:var(--key-ink)}
#v7-app .toast{color:var(--on-art)}
#v7-app .mine-wrap{display:flex;flex-direction:column;gap:var(--s5)}
#v7-app .mine-group{display:flex;flex-direction:column;gap:var(--s2)}
#v7-app .mg-hd{display:flex;align-items:center;gap:8px;padding:0 2px 2px}
#v7-app .mg-hd b{font-size:13px;font-weight:800;letter-spacing:-.03em;color:var(--muted)}
#v7-app .mg-hd span{font-size:11px;font-weight:700;color:var(--muted);opacity:.62;font-variant-numeric:tabular-nums}
#v7-app .mine-list{display:flex;flex-direction:column;gap:var(--s2)}
#v7-app .mine-row{display:flex;align-items:center;gap:var(--s3);width:100%;padding:21px 24px;border-radius:18px;background:var(--tint);box-shadow:inset 0 0 0 1px var(--hair-2);text-decoration:none;color:var(--ink);transition:background-color .14s var(--ease)}
#v7-app .mine-row:hover{background:var(--tint-2)}
#v7-app .mine-row .mk{flex:0 0 auto;font-size:11px;font-weight:700;padding:5px 10px;border-radius:999px}
#v7-app .mine-row .mk.paid{background:var(--key-soft);color:var(--key)}
#v7-app .mine-row .mk.free{background:rgba(63,107,82,.12);color:var(--wood)}
#v7-app .mine-row .bd{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
#v7-app .mine-row .bd b{display:flex;align-items:baseline;gap:7px;min-width:0;font-size:16px;font-weight:800;letter-spacing:-.04em}
#v7-app .mine-row .bd b i{flex:0 0 auto;font-style:normal;font-size:12.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
#v7-app .mine-row .bd em{display:flex;align-items:center;gap:7px;font-style:normal;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
#v7-app .mine-row .bd em s{text-decoration:none;font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--tint-2);color:var(--muted)}