/* 메인(Drop 01)과 같은 톤 - 색 · 글꼴 토큰과 공개 페이지 공통 규칙. 메인 전용 레이아웃은 drop01.css */
:root{
  --accent:#3C4498; --accent-on-dark:#8A93F0;   /* 톤앤매너 포인트 코발트 블루 (검정 위 글자는 밝은 쪽) */
  --pink:#FF5FA8; --pink-2:#FFB3D3; --choc:#2B160B; --choc-2:#4A2814; --bone:#EFE9E0; --black:#0E0C0B; --white:#FFFFFF; --tan:#C98B57; --lime:#D7F15A;
  --x:"Archivo","Arial Black",Arial,sans-serif;
  --kr:"Black Han Sans","IBM Plex Sans KR","Apple SD Gothic Neo",sans-serif;
  --ko:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --script:"Pinyon Script","Snell Roundhand",cursive;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
  --stamp:url(/images/drop01/stamp-d45dcf32c7e5ec2bf1b8a2c84b158583.webp);
}
.x{font-family:var(--x); font-variation-settings:"wdth" 125; font-weight:900; letter-spacing:-.04em; text-transform:uppercase}

/* ===== 상단 검정 바 (메인과 같은 48px) ===== */
.story-tone .top-nav, .notice > .top-nav, .legal > .top-nav{top:0; left:0; right:0; height:48px; align-items:center; padding-inline:max(18px, env(safe-area-inset-left, 0px)); background:var(--black); color:var(--white); --ink:var(--white); font-size:13px; text-shadow:none}
.story-tone .top-nav .nav-logo, .notice > .top-nav .nav-logo, .legal > .top-nav .nav-logo{top:0; font-size:28px}

/* 큰 CTA 버튼 */
.auth-primary, .pd-buy-btn, .co-pay{background:var(--accent); color:var(--white); border:0; border-radius:999px; font-weight:800; box-shadow:none}
.auth-primary:hover:not(:disabled), .pd-buy-btn:hover, .co-pay:hover:not(:disabled){background:var(--accent); filter:brightness(1.1)}

/* ===== story - 메인과 같은 톤 (상단 검정 바 · 페이지별 색 블록). 상하 고정 · 가운데만 스크롤은 그대로 ===== */
.story-tone{--bar-top:48px; background:var(--story-bg); color:var(--story-fg); font-family:var(--ko)}
/* brand (story 1·2) 톤앤매너 (2026-11-12, 메인과 같게): 연회색 / 흰 바탕 · 검정 글자 · 포인트 코발트 블루 */
.story-tone-choc{--story-bg:#F4F4F4; --story-fg:#1A1A1A; --story-accent:#3C4498; --story-script:#3C4498; --story-stamp:#000; --story-stamp-o:.035}
.story-tone-bone{--story-bg:#FFFFFF; --story-fg:#1A1A1A; --story-accent:#3C4498; --story-script:#3C4498; --story-stamp:#000; --story-stamp-o:.035}
.story-tone-tan{--story-bg:#F4F4F4; --story-fg:#1A1A1A; --story-accent:#3C4498; --story-script:#3C4498; --story-stamp:#000; --story-stamp-o:.035}   /* aging */
.story-tone-black{--story-bg:var(--black); --story-fg:#FFFFFF; --story-accent:var(--accent-on-dark); --story-script:var(--accent-on-dark); --story-stamp:#FFFFFF; --story-stamp-o:.06}   /* EDC - 검정 배경은 유지 */
.story-tone .story-frame{overflow:hidden}
.story-tone .story-frame::after{content:""; position:absolute; right:-80px; bottom:-80px; width:min(520px, 80vw); aspect-ratio:1; background:var(--story-stamp); opacity:var(--story-stamp-o); -webkit-mask:var(--stamp) center/contain no-repeat; mask:var(--stamp) center/contain no-repeat}
.story-tone .story-text, .story-tone .aging{text-shadow:none; font-weight:500}
.story-title{margin:0 0 .2em; font-size:clamp(40px,8vw,110px); line-height:.9; color:var(--story-fg)}
.story-title i{white-space:nowrap; font-family:var(--script); font-style:normal; font-weight:400; text-transform:none; letter-spacing:0; color:var(--story-script, var(--pink)); font-size:.8em}
.story-hl{font-family:var(--kr); font-weight:400; font-size:clamp(24px,3.2vw,40px); line-height:1.15; color:var(--story-accent)}
.story-tone .page-arrow{color:var(--story-accent)}
.story-tone .page-arrow-label{font-weight:700; text-shadow:none}
.story-tone .edc-lead{margin:0 0 2.2em; font-family:var(--kr); font-weight:400; font-size:clamp(20px,2.4vw,30px); line-height:1.2}
.story-tone .edc-head{font-family:var(--kr); font-weight:400; font-size:clamp(22px,2.6vw,34px); line-height:1.15; color:var(--story-accent)}
.story-tone .edc-rules{font-weight:700}
.story-tone .edc-thumb{border-radius:16px; border:0}

/* ===== 로그인 · 가입 · 마이페이지 · Coming soon · 오류 ===== */
.notice{--ink:#1A1A1A; background:#F4F4F4; color:var(--ink); font-family:var(--ko); overflow:clip; text-shadow:none}
.notice::after{content:none}
.notice::before{content:""; position:absolute; z-index:0; right:-80px; bottom:-80px; width:min(520px, 80vw); aspect-ratio:1; background:#000; opacity:.035; -webkit-mask:var(--stamp) center/contain no-repeat; mask:var(--stamp) center/contain no-repeat; pointer-events:none}
.notice > .script{font-family:var(--x); font-variation-settings:"wdth" 125; font-weight:900; letter-spacing:-.04em; text-transform:uppercase; font-size:clamp(40px,9vw,110px); line-height:.9}
.notice > .coming-title{font-size:clamp(34px,9.5vw,170px); white-space:nowrap}
.notice > .script{color:var(--accent)}
.notice.coming-soon.tone-pink{--ink:#FFFFFF; background:var(--accent)}
.notice.coming-soon.tone-pink > .script{color:#FFFFFF}
.notice.coming-soon.tone-pink::before{background:#FFFFFF; opacity:.08}
.notice .auth-outline{border-radius:999px}

/* ===== 약관 ===== */
.legal{--ink:#1A1A1A; background:#FFFFFF; color:var(--ink); font-family:var(--ko)}
.legal-doc h1{font-family:var(--kr); font-weight:400; font-size:clamp(34px,5vw,56px); line-height:1.05}
.legal-doc h2{font-weight:700}
.legal-doc th, .legal-doc td{border-bottom-color:rgba(14,12,11,.18)}
.legal-draft{border-color:rgba(0,0,0,.25); color:#6B6B6B}

/* ===== 제품 · 주문 ===== */
body.page-shop{--ink:#1A1A1A; background:#F4F4F4; font-family:var(--ko)}
.shop-header{--header-h:48px; --ink:var(--white); background:var(--black); color:var(--white)}
.shop-header::before, .shop-header::after{content:none}
.page-shop .top-nav{font-size:13px; text-shadow:none}
.page-shop .top-nav .nav-logo{top:0; font-size:28px}
.page-shop .nav-mega{background:rgba(14,9,5,.72)}
.page-shop .mnav-panel{background:rgba(14,9,5,.72)}
.page-shop .mnav-sub{border-left-color:rgba(255,255,255,.25)}
.line-name, .pd-name{font-family:"Archivo","Black Han Sans",sans-serif; font-variation-settings:"wdth" 125; font-weight:900; letter-spacing:-.03em; text-transform:uppercase; line-height:.95}
.co-title{font-family:var(--kr); font-weight:400; font-size:clamp(34px,5vw,56px); line-height:1.05}
.card, .pd-photo{background:var(--white); border:0; border-radius:16px; overflow:hidden; box-shadow:2px 5px 10px rgba(0,0,0,.06)}
.card-name{font-weight:700}
.pd-notice{background:var(--white)}
.co-btn-line{border:1px solid rgba(0,0,0,.25); border-radius:999px; font-weight:700}
/* 토스 결제위젯은 흰 판 위에 */
#payment-method, #agreement{background:var(--white); border-radius:12px}