/* ─────────────────────────────────────────────────────────────────────────
   MANASAJU — 공통 스타일시트

   [1] 아래 :root ~ .disp 블록은 web/design/tokens.css 의 사본이다.
       tokens.css 가 디자인 토큰의 단일 출처(single source of truth)이고,
       이 파일은 요청 1회를 아끼기 위한 인라인 사본일 뿐이다.
       tokens.css 가 바뀌면 반드시 이 블록에 그대로 반영할 것.
   [2] 그 아래가 공통 컴포넌트다. 모바일 퍼스트.
   [3] 성능 예산은 web/design/DESIGN.md 가 하드 제약이다.
       backdrop-filter 는 히어로 폼 카드(.form-card) 하나에만.
       실사 이미지는 히어로 하늘 한 장. 나머지 하늘은 전부 CSS.
   ───────────────────────────────────────────────────────────────────────── */

/* ── [1] tokens.css 사본 시작 ─────────────────────────────────────────── */
:root{
  --ink:#070B22; --ink-2:#141A3B; --paper:#F7F8FF; --paper-2:#ECEEFB;
  --mist:#C9D2F0; --dim:#767FA6; --rule:#E1E4F4;
  --cobalt:#2B4FCB; --violet:#7C6BE0; --coral:#FF7A6B;
  --gold:#FFD37A; --cyan:#6FE3FF;

  /* 오행 — 차트 UI 전용 */
  --el-wood:#4FBF7B; --el-fire:#FF6B57; --el-earth:#E8A33D;
  --el-metal:#C9CFDA; --el-water:#4A7DE8;

  /* 기본 하늘: 골든아워(SOLO) */
  --sky-0:#1A1140; --sky-1:#4A2C6B; --sky-2:#B65A6B; --sky-3:#F2A05C; --flare:#FFD37A;

  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px;
  --shadow:0 18px 60px rgba(7,11,34,.34);
  --ease:cubic-bezier(.2,.8,.2,1);
  --step:clamp(14px,1.1vw + 11px,16px);
  --display:clamp(40px,9vw,76px);
  --font:Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",system-ui,sans-serif;
  --mono:"Space Grotesk",ui-monospace,SFMono-Regular,Menlo,monospace;
}
/* SOLO · DUET · GROUP은 같은 저녁 하늘을 쓴다. 서비스가 달라도 한 권의
   매거진처럼 이어지고, 각 서비스의 색은 카드·일러스트 안에서만 갈린다. */
[data-mode="duet"],[data-mode="group"]{--sky-0:#1A1140;--sky-1:#4A2C6B;--sky-2:#B65A6B;--sky-3:#F2A05C;--flare:#FFD37A}

/* 하늘 한 겹 — 이미지 없이 CSS만으로. 히어로 외 모든 곳에서 이걸 쓴다. */
.sky{
  position:relative; color:var(--paper); isolation:isolate;
  background:
    radial-gradient(120% 68% at 78% 8%, color-mix(in oklab,var(--flare) 62%,transparent) 0%, transparent 46%),
    linear-gradient(178deg, var(--sky-0) 0%, var(--sky-1) 42%, var(--sky-2) 74%, var(--sky-3) 100%);
}
.sky::after{ /* 구름 층 + 플레어 호흡 */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 26% at 20% 72%, color-mix(in oklab,var(--paper) 22%,transparent), transparent 70%),
    radial-gradient(44% 18% at 84% 58%, color-mix(in oklab,var(--flare) 34%,transparent), transparent 72%);
  mix-blend-mode:screen; animation:breathe 14s var(--ease) infinite alternate;
}
@keyframes breathe{from{opacity:.55}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.sky::after{animation:none}}

.label{font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;font-size:11px}
.disp{font-weight:900;letter-spacing:-.06em;line-height:.98;font-size:var(--display)}
/* ── tokens.css 사본 끝 ───────────────────────────────────────────────── */


/* ── [2] 리셋 & 기본 ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font);font-size:var(--step);line-height:1.7;
  letter-spacing:-.03em;
  padding-bottom:env(safe-area-inset-bottom);
}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit}
h1,h2,h3{margin:0;letter-spacing:-.05em;line-height:1.12}
p{margin:0 0 .9em}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--col,700px);margin-inline:auto;padding-inline:24px}.wrap-wide{--col:1040px}
/* 랜딩(/solo)과 홈만 넓게 간다. 나머지 화면은 넓은 데스크톱에서 한 줄이
   너무 길어져서 읽는 눈이 줄을 놓치고, 카드 그리드도 늘어나 무너진다.
   본문 읽는 화면의 한 줄은 아무리 넓어도 900px 을 안 넘긴다. */
@media (min-width:1024px){
  body:not([data-page="home"]):not([data-page="solo"]) .wrap-wide{--col:900px}
  body:not([data-page="home"]):not([data-page="solo"]) .wrap:not(.wrap-wide):not(.wrap-narrow){--col:660px}
}
.wrap-narrow{max-width:680px}
/* 홈 포털만 데스크톱 편집 지면을 쓴다. 실제 서비스는 큰 화면에서도
   한 손에 읽히는 모바일 칼럼 너비를 유지한다. */
@media (min-width:700px){
  body:not([data-page="home"]) main#main{width:min(100%,600px);margin-inline:auto}
  body:not([data-page="home"]) .wrap{max-width:560px!important}
}
.mono{font-family:var(--mono)}
.dim{color:var(--dim)}
.on-sky .dim,.sky .dim{color:color-mix(in oklab,var(--mist) 84%,transparent)}
.stack>*+*{margin-top:var(--gap,14px)}

/* ── 미니 헤더 ───────────────────────────────────────────────────────── */
/* 하늘 맨 윗층과 같은 색이라, 히어로가 이어서 나오면 이음매가 보이지 않는다. */
.topbar{background:var(--sky-0);color:var(--paper)}
.top{ 
  position:relative;z-index:5;display:flex;align-items:center;gap:12px;
  padding:7px 28px;max-width:1040px;margin-inline:auto;
}
.top a{text-decoration:none}
.brand{font-weight:900;letter-spacing:-.1em;font-size:16px}
.brand i{font-style:italic;color:inherit}
.brand-logo{display:flex;align-items:center;gap:6px;font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;color:#fff}.brand-logo .comet{width:27px;height:24px;overflow:visible}.brand-logo .comet .orbit{fill:none;stroke:#fff;stroke-width:1;stroke-linecap:round;opacity:.72}.brand-logo .comet .star{fill:#fff}.brand-copy{display:grid}.brand-title{font-size:23px;font-weight:500;letter-spacing:-.055em;line-height:.83}.brand-title b{font-size:.82em;font-weight:400;margin:0 .04em}.top nav{margin-left:auto;display:flex;gap:14px}
.top nav a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.72}
.top nav a[aria-current="page"]{opacity:1;text-decoration:underline;text-underline-offset:5px}
.sky>.top,.sky .top{color:var(--paper)}
.nav-toggle{display:none;margin-left:auto;width:32px;height:28px;padding:6px;border:0;background:transparent;cursor:pointer}.nav-toggle span{display:block;height:1.5px;margin:4px 0;background:currentColor}
.site-masthead{padding:16px 24px 11px;background:#080a17;color:#fff;text-align:center}
.site-masthead-in{position:relative;display:flex;align-items:center;justify-content:center;max-width:1040px;margin-inline:auto}
.site-wordmark{display:inline-flex;align-items:baseline;justify-content:center;gap:.34em;color:inherit;text-decoration:none;font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(23px,5vw,30px);font-weight:500;letter-spacing:.16em;line-height:1}
.site-wordmark i{font-size:.65em;font-weight:400;letter-spacing:0;color:#c9c5f4}.site-wordmark span:last-child{font-size:.72em;letter-spacing:.22em}
.site-menu-toggle{display:block;position:absolute;z-index:32;right:0;color:#fff}.site-masthead nav{display:none;position:absolute;z-index:31;right:0;top:42px;width:min(310px,calc(100vw - 32px));padding:10px;border:1px solid rgba(255,255,255,.18);border-radius:15px;background:#17123f;box-shadow:0 18px 42px rgba(5,5,28,.46);text-align:left}.site-masthead nav.open{display:block}.site-nav-section{display:grid;gap:2px;padding:9px 7px}.site-nav-section+.site-nav-section{border-top:1px solid rgba(255,255,255,.14)}.site-nav-section>p{margin:0 0 5px;padding:0 8px;color:#a9a2db;font:700 8px var(--mono);letter-spacing:.17em}.site-masthead nav a{display:block;padding:10px 9px;color:rgba(255,255,255,.78);text-decoration:none;font-size:14px;font-weight:650;letter-spacing:-.025em;border-radius:8px}.site-masthead nav a:hover{background:rgba(255,255,255,.07);color:#fff}.site-masthead nav a[aria-current="page"]{background:rgba(201,197,244,.12);color:#fff}.site-nav-legal{display:grid;grid-template-columns:repeat(3,auto);gap:2px;margin-top:5px;padding-top:7px;border-top:1px solid rgba(255,255,255,.1)}.site-masthead .site-nav-legal a{padding:7px 5px;color:rgba(255,255,255,.48);font-size:9px;text-align:center;white-space:nowrap}
.site-masthead-rule{display:block;width:min(250px,62vw);height:7px;margin:10px auto 0;border-top:1px solid rgba(255,255,255,.48);border-bottom:1px solid rgba(255,255,255,.16);position:relative}.site-masthead-rule::after{content:"✦";position:absolute;left:50%;top:50%;padding:0 8px;background:#080a17;color:#c9c5f4;font-size:8px;line-height:1;transform:translate(-50%,-50%)}
.reading-bar{position:absolute;z-index:6;top:39px;left:0;right:0;padding:7px 28px;background:linear-gradient(180deg,rgba(8,11,40,.32),transparent);color:#fff}.reading-switch{display:flex;align-items:center;gap:5px;max-width:1040px;margin-inline:auto;font-size:11px;font-weight:800}.reading-switch a,.reading-current{display:inline-flex;align-items:center;justify-content:center;height:27px;padding:0 9px;border-radius:999px;text-decoration:none}.reading-switch a{color:rgba(255,255,255,.78)}.reading-current{background:var(--violet);color:#fff;box-shadow:0 3px 12px rgba(30,15,93,.35)}

/* ── 버튼 ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-weight:800;letter-spacing:-.02em;
  padding:12px 20px;border:0;border-radius:10px;
  background:linear-gradient(100deg,var(--cobalt),var(--violet));
  color:#fff;cursor:pointer;text-decoration:none;width:100%;
  transition:transform .18s var(--ease),filter .18s var(--ease);
}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(1px)}
.btn-ghost{
  background:none;color:inherit;font-weight:700;
  border:1px solid color-mix(in oklab,currentColor 26%,transparent);
  padding:11px 16px;width:auto;
}
.btn-quiet{background:none;color:var(--dim);border:0;padding:6px 0;width:auto;font-weight:700}

/* ── 폼 필드 ────────────────────────────────────────────────────────── */
.field{display:block;font-size:11px;font-weight:800;letter-spacing:.02em;color:var(--dim)}
.field>input,.field>select{
  width:100%;margin-top:6px;font:inherit;letter-spacing:-.02em;color:var(--ink);
  padding:12px 12px;border:1px solid var(--rule);border-radius:var(--r-sm);
  background:#fff;min-height:46px;
}
.field>input:focus,.field>select:focus{border-color:var(--cobalt);outline:none;box-shadow:0 0 0 3px color-mix(in oklab,var(--cobalt) 18%,transparent)}
.field input::placeholder,textarea::placeholder{color:#b9b8c2;font-weight:300;opacity:1}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fields .wide{grid-column:1/-1}

/* ── 카드 ───────────────────────────────────────────────────────────── */
.card{
  position:relative;display:block;overflow:hidden;text-decoration:none;
  border:1px solid var(--rule);border-radius:var(--r-lg);background:#fff;
  padding:18px;box-shadow:0 2px 10px rgba(7,11,34,.04);
  transition:transform .32s var(--ease),box-shadow .32s var(--ease);
}
a.card:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(7,11,34,.12)}
.card h3{font-size:21px;letter-spacing:-.05em}
.card .label{color:var(--dim)}
.cards{display:grid;gap:12px;grid-template-columns:1fr}

/* 카드가 자기 시간대 팔레트를 미리 보여주는 띠 */
.card .swatch{
  height:108px;margin:-18px -18px 16px;border-radius:0;
  background:
    radial-gradient(110% 74% at 76% 12%, color-mix(in oklab,var(--flare) 66%,transparent) 0%, transparent 52%),
    linear-gradient(176deg,var(--sky-0),var(--sky-1) 44%,var(--sky-2) 76%,var(--sky-3));
  position:relative;
}
.card .swatch::after{ /* 역광 도시 실루엣 — 이미지 없이 CSS로 */
  content:"";position:absolute;inset:auto 0 0 0;height:34px;
  background:var(--ink);opacity:.62;
  -webkit-mask-image:linear-gradient(#000,#000);
  clip-path:polygon(0 100%,0 64%,7% 64%,7% 42%,14% 42%,14% 70%,23% 70%,23% 30%,29% 30%,29% 58%,38% 58%,38% 46%,47% 46%,47% 76%,56% 76%,56% 36%,63% 36%,63% 62%,72% 62%,72% 24%,79% 24%,79% 66%,88% 66%,88% 50%,100% 50%,100% 100%);
}
.card .swatch .tag{
  position:absolute;left:16px;bottom:40px;color:var(--paper);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  text-shadow:0 2px 12px rgba(7,11,34,.6);
}

/* ── 재킷 (1:1 정사각) ───────────────────────────────────────────────── */
.jacket{
  position:relative;aspect-ratio:1/1;width:100%;overflow:hidden;
  border-radius:var(--r-md);color:var(--paper);isolation:isolate;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:20px;box-shadow:var(--shadow);
  background:
    radial-gradient(120% 70% at 74% 10%, color-mix(in oklab,var(--flare) 60%,transparent) 0%, transparent 50%),
    linear-gradient(176deg,var(--sky-0),var(--sky-1) 42%,var(--sky-2) 74%,var(--sky-3));
  background-size:cover;
}
.jacket::before{ /* 재킷 텍스처(이미지 있으면 얹히고, 없으면 그라디언트가 그대로 보인다) */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:image-set(
    url("/assets/jacket-grain-1024.avif") type("image/avif"),
    url("/assets/jacket-grain-1024.webp") type("image/webp"));
  background-size:cover;background-position:center;
  mix-blend-mode:soft-light;opacity:.8;
}
.jacket h2{font-weight:900;letter-spacing:-.06em;font-size:clamp(28px,7vw,44px);line-height:.98}
.jacket .label{opacity:.9}

/* ── 트랙리스트 ─────────────────────────────────────────────────────── */
.tracklist{list-style:none;margin:0;padding:0}
.tracklist li{
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:baseline;
  padding:13px 2px;border-top:1px solid var(--rule);
}
.tracklist li:last-child{border-bottom:1px solid var(--rule)}
.tracklist .no,.tracklist .time{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dim)}
.tracklist .ttl{font-weight:700;letter-spacing:-.04em}

/* ── 인서트 (본문 페이퍼) ───────────────────────────────────────────── */
.insert{
  background:var(--paper);color:var(--ink);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:36px 0 44px;position:relative;z-index:1;
}
.insert h2{font-size:clamp(24px,5.4vw,34px);margin:0 0 14px}
.insert p{max-width:62ch}
.insert .rule{height:1px;background:var(--rule);border:0;margin:28px 0}

/* ── 크레딧 ─────────────────────────────────────────────────────────── */
.credits{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);display:grid;gap:6px;padding:20px 0;border-top:1px solid var(--rule);
}
.credits b{color:var(--ink);font-weight:700}

/* ── 미터 (오행/강약 막대) ──────────────────────────────────────────── */
.meter{display:grid;gap:9px;margin:0;padding:0}
.meter>div{display:grid;grid-template-columns:2.6em 1fr auto;gap:10px;align-items:center}
.meter .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--dim)}
.meter .bar{height:7px;border-radius:99px;background:var(--paper-2);overflow:hidden}
.meter .bar>i{display:block;height:100%;border-radius:99px;background:var(--cobalt);
  transform-origin:left;transition:width .5s var(--ease)}
.meter .v{font-family:var(--mono);font-size:11px;color:var(--dim)}
.meter [data-el="목"] .bar>i{background:var(--el-wood)}
.meter [data-el="화"] .bar>i{background:var(--el-fire)}
.meter [data-el="토"] .bar>i{background:var(--el-earth)}
.meter [data-el="금"] .bar>i{background:var(--el-metal)}
.meter [data-el="수"] .bar>i{background:var(--el-water)}

/* ── 히어로 ─────────────────────────────────────────────────────────── */
/* SOLO는 별도 화보 컷 위에 타이틀·오행 심볼·입력 폼이 겹쳐지는 매거진 표지다. */
.hero{
  position:relative;overflow:hidden;color:var(--paper);isolation:isolate;
  padding-bottom:52px;
  background:#080a17;
}
[data-mode="duet"] .hero{background-image:
  url("/assets/duet-hero-mf-v1.png"),
  radial-gradient(78% 30% at 76% 16%, color-mix(in oklab,var(--flare) 88%,transparent) 0%, transparent 66%),
  radial-gradient(120% 34% at 50% 62%, color-mix(in oklab,var(--sky-2) 78%,transparent) 0%, transparent 74%),
  linear-gradient(178deg,var(--sky-0) 0%,var(--sky-1) 30%,var(--sky-2) 62%,var(--sky-3) 86%,var(--flare) 100%)}
[data-mode="duet"] .hero[data-pair="mm"]{background-image:
  url("/assets/duet-hero-mm-v1.png"),
  radial-gradient(78% 30% at 76% 16%, color-mix(in oklab,var(--flare) 88%,transparent) 0%, transparent 66%),
  radial-gradient(120% 34% at 50% 62%, color-mix(in oklab,var(--sky-2) 78%,transparent) 0%, transparent 74%),
  linear-gradient(178deg,var(--sky-0) 0%,var(--sky-1) 30%,var(--sky-2) 62%,var(--sky-3) 86%,var(--flare) 100%)}
[data-mode="duet"] .hero[data-pair="ff"]{background-image:
  url("/assets/duet-hero-ff-v1.png"),
  radial-gradient(78% 30% at 76% 16%, color-mix(in oklab,var(--flare) 88%,transparent) 0%, transparent 66%),
  radial-gradient(120% 34% at 50% 62%, color-mix(in oklab,var(--sky-2) 78%,transparent) 0%, transparent 74%),
  linear-gradient(178deg,var(--sky-0) 0%,var(--sky-1) 30%,var(--sky-2) 62%,var(--sky-3) 86%,var(--flare) 100%)}
[data-mode="group"] .hero{background-image:
  image-set(url("/assets/sky-blue-1600.avif") type("image/avif"),
            url("/assets/sky-blue-1600.webp") type("image/webp")),
  radial-gradient(78% 30% at 76% 16%, color-mix(in oklab,var(--flare) 88%,transparent) 0%, transparent 66%),
  radial-gradient(120% 34% at 50% 62%, color-mix(in oklab,var(--sky-2) 78%,transparent) 0%, transparent 74%),
  linear-gradient(178deg,var(--sky-0) 0%,var(--sky-1) 30%,var(--sky-2) 62%,var(--sky-3) 86%,var(--flare) 100%)}
@keyframes drift{from{background-position:center calc(50% - 14px)}to{background-position:center calc(50% + 14px)}}

.hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:56px;z-index:0;pointer-events:none;
  background:var(--ink);opacity:.72;
  clip-path:polygon(0 100%,0 62%,6% 62%,6% 40%,12% 40%,12% 72%,19% 72%,19% 28%,25% 28%,25% 56%,33% 56%,33% 44%,41% 44%,41% 78%,50% 78%,50% 34%,57% 34%,57% 60%,65% 60%,65% 22%,71% 22%,71% 66%,80% 66%,80% 48%,88% 48%,88% 70%,100% 70%,100% 100%);
}
.hero::before{display:none}
.hero::after{display:none}
.hero-in{padding:20px 0 24px;max-width:600px;margin-inline:auto;position:relative}.hero-title{display:block;margin:0}.magazine-wordmark{width:min(100%,455px);height:auto;filter:drop-shadow(0 4px 16px rgba(0,0,0,.48))}
.hero-logo{width:min(255px,68vw);height:auto;margin:0 0 24px;filter:drop-shadow(0 4px 12px rgba(1,8,38,.5))}
.hero .disp{margin:12px 0 14px;text-shadow:0 6px 34px rgba(7,11,34,.42)}
.hero .lede{color:color-mix(in oklab,var(--paper) 88%,transparent);max-width:44ch}

/* 히어로 폼 카드 — backdrop-filter 는 이 하나에만 쓴다(DESIGN.md 성능 예산) */
.magazine-panel{max-width:560px;margin-inline:auto;padding:clamp(18px,5vw,30px) clamp(18px,5vw,30px) 30px;border:1px solid rgba(255,255,255,.32);background:linear-gradient(145deg,rgba(9,9,18,.78),rgba(9,9,18,.5));box-shadow:0 20px 56px rgba(0,0,0,.32)}
.magazine-cover-art{position:relative;margin:14px 0 0;overflow:hidden;border-radius:16px;background:#090b16;aspect-ratio:4/5;box-shadow:0 14px 32px rgba(0,0,0,.28)}
.magazine-cover-art::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(2,4,14,.08),rgba(2,4,14,.04) 48%,rgba(2,4,14,.72))}
.magazine-cover-art>#heroPortrait{width:100%;height:100%;object-fit:cover;object-position:center top}
.five-elements-emblem{position:absolute;z-index:2;top:8px;right:8px;width:clamp(82px,24vw,132px);height:auto;filter:drop-shadow(0 5px 14px rgba(0,0,0,.58))}
.form-card{max-width:520px;margin-inline:auto;
  position:relative;z-index:2;margin:-110px 8px 0;padding:18px;border-radius:var(--r-lg);
  background:rgba(245,248,255,.88);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid color-mix(in oklab,#fff 40%,transparent);
  box-shadow:var(--shadow);color:var(--ink);
}
.form-card h2{font-size:17px;margin-bottom:6px}
.form-card .note{font-size:11.5px;color:var(--dim);margin:10px 0 0;line-height:1.55}
.form-card .fields{grid-template-columns:1fr}

/* ── 섹션 / 스티키 CTA / 푸터 ───────────────────────────────────────── */
.section{padding:44px 0}
.section>.label{color:var(--violet);margin-bottom:8px}
.section h2{font-size:clamp(28px,7vw,44px);letter-spacing:-.06em;margin-bottom:18px}

.sticky{
  position:fixed;z-index:9;left:0;right:0;bottom:0;
  padding:10px 24px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in oklab,var(--paper) 94%,transparent);
  border-top:1px solid var(--rule);
}
.sticky .btn{display:flex;max-width:652px;margin-inline:auto}
.sticky-price{max-width:652px;margin:0 auto 7px;text-align:center;font-size:12px;font-weight:500;line-height:1.25;color:var(--dim);letter-spacing:-.01em}
.sticky-price s{margin-right:4px;opacity:.6}
.sticky-price b{color:var(--ink);font-weight:800}
.sticky-price em{margin-left:4px;color:var(--violet);font-style:normal;font-weight:800}
.sticky-price i{margin-right:5px;padding:2px 6px;border-radius:4px;background:var(--violet);color:#fff;font-style:normal;font-size:10px;font-weight:800;letter-spacing:0}
.sticky-price u{margin-left:5px;text-decoration:none;opacity:.72}
/* 스티키 CTA 높이만큼 본문 아래를 비워 둔다 */
body{padding-bottom:96px}

footer.foot{background:#f8f8f9;color:#b0b0b5;padding:18px 0;border-top:1px solid #eeeeef;font-size:12px}
footer.foot>.wrap{display:flex;align-items:center;gap:10px 20px;flex-wrap:wrap}
footer.foot .brand{color:#a4a4a9;font-family:"Cormorant Garamond",Georgia,serif;font-size:16px;font-weight:500;letter-spacing:.035em}
footer.foot .brand i{color:#b5b5ba;font-weight:400}
footer.foot a{color:#ababaf;margin-right:12px;text-decoration:none;font-size:11px;font-weight:400}
footer.foot .links{margin:0}
footer.foot .fine{margin:0 0 0 auto;color:#bcbcc0;font-size:10px;font-weight:400}
@media (max-width:600px){footer.foot{padding:9px 0}footer.foot>.wrap{gap:5px 12px}footer.foot .brand{font-size:13px}footer.foot .fine{width:100%;margin:0;font-size:10px}}

/* ── 진입 모션 ──────────────────────────────────────────────────────── */
.rise{opacity:0;transform:translateY(12px);animation:rise .32s var(--ease) forwards}
.rise:nth-child(2){animation-delay:.06s}
.rise:nth-child(3){animation-delay:.12s}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rise{opacity:1;transform:none}
}

/* ── 태블릿 이상 ────────────────────────────────────────────────────── */
@media (min-width:760px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .hero-in{padding:64px 0 24px}
  .section{padding:64px 0}
  .insert{padding:52px 0 60px}
  .top{padding:18px 20px}
  .resultGrid{grid-template-columns:minmax(0,340px) minmax(0,1fr);align-items:start}
}

/* 정가 취소선 — 할인 중인 리딩(SOLO·GROUP)의 스티키 CTA와 잠금 안내에서 쓴다. */
.was{opacity:.6;text-decoration-thickness:1px;margin-right:.15em;font-weight:400}
.sticky .was{color:color-mix(in oklab,var(--paper) 72%,transparent)}

/* 닉네임은 필드 안에서 한 줄로. 랜덤은 CTA가 아니라 작은 유틸리티 배지다. */
.nick-row{display:flex;align-items:center;gap:7px;margin-top:6px}
.field>.nick-row>input{width:100%;min-width:0;margin:0;font:inherit;letter-spacing:-.02em;color:var(--ink);padding:12px;border:1px solid var(--rule);border-radius:var(--r-sm);background:#fff;min-height:46px}.nickname-field .field>input{width:100%;margin-top:6px;font:inherit;letter-spacing:-.02em;color:var(--ink);padding:12px;border:1px solid var(--rule);border-radius:var(--r-sm);background:#fff;min-height:46px}.nickname-field .nick-random{margin-top:7px}
.nick-random{flex:0 0 auto;margin:0;padding:8px 9px;border:1px solid color-mix(in oklab,var(--violet) 38%,var(--rule));border-radius:999px;background:color-mix(in oklab,var(--violet) 10%,#fff);color:var(--violet);font-size:11px;font-weight:800;white-space:nowrap;cursor:pointer}
.nick-random:hover{background:color-mix(in oklab,var(--violet) 18%,#fff)}
.nickname-help{display:block;margin-top:6px;color:var(--dim);font-size:11px;font-weight:500;letter-spacing:-.02em}

.form-pair{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:13px;align-items:end}.nickname-field{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:8px;align-items:end}.nickname-field>.field{grid-column:1;min-width:0}.nickname-field>.nick-random{grid-column:2;height:46px;margin:0}.time-row,.date-row{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:13px;align-items:center;margin-top:6px;white-space:nowrap}.time-row>input,.date-row>input{grid-column:1;box-sizing:border-box;width:100%;min-width:0;height:46px;margin:0;font:inherit;letter-spacing:-.02em;color:var(--ink);padding:0 12px;border:1px solid var(--rule);border-radius:var(--r-sm);background:#fff}.ampm,.calendar-choice{grid-column:2;display:grid;grid-template-columns:1fr 1fr;width:max-content;box-sizing:border-box;height:46px;flex:0 0 auto;border:1px solid var(--rule);border-radius:10px;overflow:hidden}.ampm input,.calendar-choice input,.gender-tabs input{position:absolute;opacity:0;pointer-events:none}.ampm label,.calendar-choice label{display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:44px;padding:0 13px;min-width:46px;font-weight:800;background:#fff;color:var(--dim);font-size:11px;cursor:pointer}.ampm label:last-child,.calendar-choice label:last-child{border-left:1px solid var(--rule)}.ampm input:checked+label,.calendar-choice input:checked+label{background:var(--violet);color:#fff;border-left-color:transparent}.gender-tabs{display:grid;grid-template-columns:1fr 1fr;width:max-content;margin-top:6px;height:46px;border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:#fff}.gender-tabs label{display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:44px;padding:0 13px;min-width:46px;background:#fff;color:var(--dim);font-size:11px;font-weight:800;cursor:pointer;transition:.18s ease}.gender-tabs input:checked+label{background:var(--violet);color:#fff;box-shadow:none}
.duet-gender{display:grid;grid-template-columns:1fr 1fr;width:max-content;margin-top:6px;height:46px;border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:#fff}.duet-gender input{position:absolute;opacity:0;pointer-events:none}.duet-gender label{display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:44px;padding:0 13px;min-width:46px;background:#fff;color:var(--dim);font-size:11px;font-weight:800;cursor:pointer;transition:.18s ease}.duet-gender input:checked+label{background:var(--violet);color:#fff}
.gender-tabs{border-color:#d9d8e2}
.gender-tabs label:last-child{border-left:1px solid #d9d8e2}
.time-help{display:block;margin-top:6px;font-size:11px;font-weight:500;letter-spacing:-.02em;color:color-mix(in oklab,var(--dim) 88%,transparent)}
.reading-picker{display:flex;align-items:center;gap:5px;margin-top:12px;color:#fff;font-size:11px;font-weight:800}.reading-picker a,.reading-picker .reading-current{display:inline-flex;align-items:center;justify-content:center;height:29px;padding:0 10px;border-radius:999px;text-decoration:none}.reading-picker a{color:rgba(255,255,255,.78)}.reading-picker .reading-current{background:var(--violet);box-shadow:0 3px 12px rgba(30,15,93,.35)}
.gallery-page{min-height:100vh;padding:52px 0;background:linear-gradient(145deg,#101044,#33236d 54%,#7c4a91);color:#fff}.gallery-page .label{color:#bfc8ff}.gallery-page .disp{font-size:clamp(38px,8vw,64px);margin:7px 0 14px}.gallery-note{color:rgba(255,255,255,.76);font-size:14px}.avatar-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:26px}.avatar-gallery figure{margin:0;overflow:hidden;border:1px solid rgba(255,255,255,.25);border-radius:17px;background:rgba(255,255,255,.1)}.avatar-gallery img{width:100%;aspect-ratio:1/1.25;object-fit:cover;object-position:center top}.avatar-gallery figcaption{display:flex;gap:7px;padding:9px 10px;font-size:12px;font-weight:800}.avatar-gallery figcaption span{font-family:var(--mono);color:#bfb5ff}@media (min-width:700px){.avatar-gallery{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (max-width:640px){.site-masthead{padding-inline:20px}.site-masthead nav{display:none;z-index:20;top:38px;right:0;transform:none;flex-direction:column;gap:0;min-width:124px;padding:7px;border:1px solid rgba(255,255,255,.2);border-radius:13px;background:#17123f;box-shadow:0 14px 30px rgba(5,5,28,.32);text-align:left}.site-masthead nav.open{display:flex}.site-masthead nav a{padding:9px 10px;font-size:11px}.nav-toggle{display:block}}

/* 360px 대에서는 닉네임+랜덤+성별 셋이 한 줄에 들어가면 입력칸이 못 쓰게 좁아진다. */
/* 커플 히어로는 세로 원화를 한 장의 장면처럼 먼저 보여 준 뒤 폼을 잇는다.
   cover로 좌우 인물을 잘라 내지 않아, 중앙에서 마주 보는 손이 작은 화면에도 남는다. */
@media (max-width:640px){
  [data-mode="duet"] .hero{background-image:
    url("/assets/duet-hero-mobile-mf-v1.png"),
    radial-gradient(78% 30% at 76% 16%, color-mix(in oklab,var(--flare) 88%,transparent) 0%, transparent 66%),
    radial-gradient(120% 34% at 50% 62%, color-mix(in oklab,var(--sky-2) 78%,transparent) 0%, transparent 74%),
    linear-gradient(178deg,var(--sky-0) 0%,var(--sky-1) 30%,var(--sky-2) 62%,var(--sky-3) 86%,var(--flare) 100%);
    background-size:100% auto,cover,cover,cover;background-position:center top,center,center,center;
  }
  [data-mode="duet"] .hero[data-pair="mm"]{background-image:url("/assets/duet-hero-mobile-mm-v1.png"),radial-gradient(78% 30% at 76% 16%, color-mix(in oklab,var(--flare) 88%,transparent) 0%, transparent 66%),radial-gradient(120% 34% at 50% 62%, color-mix(in oklab,var(--sky-2) 78%,transparent) 0%, transparent 74%),linear-gradient(178deg,var(--sky-0) 0%,var(--sky-1) 30%,var(--sky-2) 62%,var(--sky-3) 86%,var(--flare) 100%)}
  [data-mode="duet"] .hero[data-pair="ff"]{background-image:url("/assets/duet-hero-mobile-ff-v1.png"),radial-gradient(78% 30% at 76% 16%, color-mix(in oklab,var(--flare) 88%,transparent) 0%, transparent 66%),radial-gradient(120% 34% at 50% 62%, color-mix(in oklab,var(--sky-2) 78%,transparent) 0%, transparent 74%),linear-gradient(178deg,var(--sky-0) 0%,var(--sky-1) 30%,var(--sky-2) 62%,var(--sky-3) 86%,var(--flare) 100%)}
  [data-mode="duet"] .hero .hero-in{padding-bottom:clamp(280px,104vw,500px)}
}

@media (max-width:400px){
  .form-pair{grid-template-columns:1fr;gap:10px}
  .form-pair>.field .gender-tabs{width:100%}
}

/* iOS 자동 확대만 막고, 입력 중에도 하단 CTA는 계속 보여 준다. */
@media (max-width:759px){
  .field>input,.field>.nick-row>input,.nickname-field .field>input,
  .time-row>input,.date-row>input,.field>select,textarea{font-size:16px}
}

/* 날짜는 열 자리라 320px에서는 월·일이 잘리기 쉽다. 두 입력칸의 폭을
   같게 지키기 위해 달력/AM·PM 선택기는 입력칸 아래로 내린다. */
@media (max-width:350px){
  .date-row,.time-row{grid-template-columns:1fr;gap:6px}
  .calendar-choice,.ampm{grid-column:1;justify-self:start}
}

/* 히어로: 매거진 표지와 입력 폼이 한 단, Duet·Group이 그 다음 단이다. */
.hero-grid{display:grid;gap:14px}.hero-side{display:grid;grid-template-columns:1fr;gap:16px;width:100%;max-width:560px;margin-inline:auto}









/* 데스크톱은 모바일과 다른 치수를 쓴다. 같은 크기를 넓은 화면에 그대로 두면
   전부 작고 멀어 보인다 — 여기서는 한 단씩 올린다. */
@media (min-width:900px){
  /* PC에서는 표지 바깥을 조용한 파랑·보랏빛 저녁 하늘로 두고, 모바일만
     인물 커버가 화면을 채운다. */
  .hero,.hero[data-hero-gender="man"]{background-image:radial-gradient(80% 58% at 74% 0%,rgba(181,183,255,.38),transparent 60%),linear-gradient(145deg,#c5d4ef 0%,#b8b9e5 48%,#8e86c6 100%)}
  .hero-in{max-width:none}.hero-grid{gap:20px}.hero-side{grid-template-columns:1fr;max-width:560px}.hero-grid .form-card{max-width:none;padding:24px;border-radius:20px}
  .magazine-wordmark{max-width:500px}.magazine-cover-art{max-height:550px}.form-card{margin:-150px 16px 0}

  .form-card h2{font-size:20px;margin-bottom:9px}
  .fields{gap:13px}
  .field{font-size:12.5px}
  .field>input,.field>.nick-row>input,.nickname-field .field>input,
  .time-row>input,.date-row>input{height:52px;min-height:52px;font-size:16.5px}
  .ampm,.calendar-choice,.gender-tabs,.duet-gender{height:52px}
  .ampm label,.calendar-choice label,.gender-tabs label,.duet-gender label{height:50px;font-size:12.5px;min-width:52px;padding:0 15px}
  .nick-random{height:52px;padding:0 15px;font-size:12.5px}
  .time-help,.form-card .note{font-size:12.5px}

  .side-head .label{font-size:11px}
  .side-card b{font-size:27px}
  .side-card small{font-size:12.5px}
  .side-chips i{font-size:11.5px;padding:4px 10px}
  .sticky .btn{max-width:720px;font-size:17px;padding:14px 22px}
}

/* ── 히어로 사이드 카드 ────────────────────────────────────────────────
   결과가 어떻게 생겼는지 미리 보여 준다. 설명만 있는 카드는 안 눌린다.
   data-mode 가 하늘 팔레트를 바꾸므로 카드마다 그 리딩의 시간대가 깔린다. */
.side-card{position:relative;isolation:isolate;display:block;min-height:330px;overflow:hidden;border-radius:20px;text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.38);background:#091832;box-shadow:0 16px 38px rgba(5,7,32,.28);transition:transform .2s var(--ease),border-color .2s var(--ease)}
.side-card::after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(3,10,30,.04) 24%,rgba(3,10,30,.2) 48%,rgba(3,10,30,.94) 100%)}
.coming-soon{position:absolute;z-index:4;top:14px;left:14px;padding:7px 9px;border:1px solid rgba(255,255,255,.58);background:rgba(8,10,23,.74);backdrop-filter:blur(8px);color:#fff;font:800 9px/1 var(--mono);letter-spacing:.15em}
.side-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.45)}
.side-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.side-head .label{opacity:.75;font-size:10px}
.side-go{opacity:.65;font-size:15px;transition:transform .2s var(--ease)}
.side-card:hover .side-go{transform:translateX(3px)}
.side-image{position:absolute;z-index:0;inset:0;display:block;width:100%;height:100%;overflow:hidden;background:#0a1735}.side-image img{width:100%;height:100%;object-fit:cover;display:block}.side-copy{position:absolute;z-index:2;inset:auto 0 0;display:grid;gap:7px;min-width:0;padding:18px}.side-card b{font-family:"Song Myung",serif;font-size:25px;font-weight:400;letter-spacing:-.06em;line-height:1.18}.side-card small{max-width:32ch;font-size:12px;opacity:.88;line-height:1.55;word-break:keep-all}

.side-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.side-chips i{
  font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:-.02em;
  padding:3px 8px;border-radius:999px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.2);
}

/* 윤달 — 음력을 고른 사람에게만 보인다. 양력 쓰는 사람에게 윤달을 묻는 건
   답할 수 없는 질문이고, 늘 띄워두면 폼이 한 줄 더 무거워진다. */
.cal-leap{display:none;align-items:center;gap:6px;margin-left:8px;color:var(--dim);font-size:12px;font-weight:800;white-space:nowrap;cursor:pointer}
.date-row:has(input[value="lunar"]:checked) .cal-leap{display:inline-flex}
.cal-leap input{width:20px;height:20px;margin:0;accent-color:var(--violet);cursor:pointer}
@media (max-width:760px){.date-row:has(input[value="lunar"]:checked){grid-template-columns:minmax(0,1fr) max-content max-content}}

/* 공통 햄버거 메뉴는 화면 폭과 관계없이 같은 두 섹션 구조를 유지한다. */
@media (max-width:640px){.site-masthead nav{display:none;z-index:31;top:42px;width:min(310px,calc(100vw - 32px));padding:10px}.site-masthead nav.open{display:block}.site-masthead nav a{padding:10px 9px;font-size:14px}.site-masthead .site-nav-legal a{padding:7px 5px;font-size:9px}}