/* ============================================================
   Saju Pan · v2 Mobile-First System
   Extends C-ink tokens (shared/tokens.css + C-ink/style.css)
   ============================================================ */

:root {
  /* --- Tokens inherited from C-ink, restated for v2 clarity --- */
  --C-paper:     #faf8f3;
  --C-paper-2:   #f3efe4;
  --C-paper-3:   #e8e2d2;
  --C-ink:       #1a1612;
  --C-ink-2:     #3a3228;
  --C-ink-3:     #6b6356;
  --C-line:      rgba(26, 22, 18, 0.10);
  --C-line-2:    rgba(26, 22, 18, 0.20);
  --C-gold:      #b8860b;
  --C-gold-2:   #d97706;
  --C-seal:      #a83232;

  /* v2 five-elements (light-mode calibrated) */
  --wood:  #10b981;
  --fire:  #f97316;
  --earth: #fbbf24;
  --metal: #9ca3af;          /* border — silver */
  --metal-ink: #1a1612;      /* text — ink, for contrast */
  --water: #3b82f6;

  /* Mobile safe-area */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);

  /* v2 responsive rhythm */
  --gutter-m: 20px;
  --gutter-d: 32px;
  --tabbar-h: 62px;
}

/* ============================================================
   NAV · Desktop sticky + Mobile header
   ============================================================ */

/* Desktop nav — visible ≥768px */
.v2-nav { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(14px);
  background: rgba(250, 248, 243, 0.9); border-bottom: 1px solid var(--C-line); }
.v2-nav-inner { max-width: 1200px; margin: 0 auto;
  padding: 14px var(--gutter-d); display: flex; align-items: center;
  justify-content: space-between; gap: 24px; }
.v2-logo { display: flex; align-items: baseline; gap: 10px;
  font-family: var(--font-serif-kr); font-size: 19px; font-weight: 500;
  letter-spacing: -0.01em; white-space: nowrap; }
.v2-logo .seal { width: 22px; height: 22px; background: var(--C-seal);
  color: var(--C-paper); font-family: var(--font-serif-kr); font-size: 13px;
  font-weight: 600; display: inline-flex; align-items: center;
  justify-content: center; align-self: center; }
.v2-logo em { color: var(--C-gold); font-style: normal; }
.v2-nav-links { display: none; gap: 26px; align-items: center; }
.v2-nav-links a { font-size: 13px; color: var(--C-ink-3); transition: color 120ms;
  position: relative; white-space: nowrap; }
.v2-nav-links a:hover, .v2-nav-links a.is-active { color: var(--C-ink); }
.v2-nav-links .new { font-family: var(--font-mono); font-size: 9px;
  color: var(--C-seal); letter-spacing: 0.1em; margin-left: 4px;
  vertical-align: top; }
.v2-nav-actions { display: flex; align-items: center; gap: 10px; }
.v2-nav-cta { padding: 8px 14px; background: var(--C-ink); color: var(--C-paper);
  font-size: 13px; font-weight: 500; border-radius: 2px; transition: background 140ms;
  white-space: nowrap; }
.v2-nav-cta:hover { background: var(--C-gold-2); }
.v2-nav-ghost { padding: 8px 12px; font-size: 12px; color: var(--C-ink-2);
  border: 1px solid var(--C-line-2); border-radius: 2px; transition: all 140ms;
  white-space: nowrap; }
.v2-nav-ghost:hover { border-color: var(--C-ink); color: var(--C-ink); }
.v2-nav-ghost .new { font-family: var(--font-mono); font-size: 8px;
  color: var(--C-seal); letter-spacing: 0.1em; margin-left: 4px;
  vertical-align: top; }

@media (min-width: 768px) {
  .v2-nav-links { display: flex; }
}

/* ============================================================
   TABBAR · Mobile fixed bottom — 5 items
   ============================================================ */

.v2-tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: rgba(250, 248, 243, 0.94); backdrop-filter: blur(14px) saturate(1.2);
  border-top: 1px solid var(--C-line);
  padding-bottom: var(--safe-bottom);
  height: calc(var(--tabbar-h) + var(--safe-bottom));
  display: grid; grid-template-columns: repeat(5, 1fr); }
.v2-tab { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; padding: 8px 4px; color: var(--C-ink-3);
  transition: color 120ms; text-decoration: none; position: relative; }
.v2-tab svg { width: 22px; height: 22px; stroke-width: 1.3; }
.v2-tab .lbl { font-size: 10px; letter-spacing: 0.04em;
  font-family: var(--font-serif-kr); font-weight: 400; }
.v2-tab.is-active { color: var(--C-ink); }
.v2-tab.is-active .lbl { font-weight: 500; }
.v2-tab.is-active::before { content: ""; position: absolute; top: 0;
  left: 50%; transform: translateX(-50%); width: 18px; height: 2px;
  background: var(--C-gold); }

/* Pad body so tabbar doesn't cover content on mobile */
@media (max-width: 767px) {
  .v2-body { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 16px); }
}
@media (min-width: 768px) {
  .v2-tabbar { display: none; }
}

/* ============================================================
   FOOTER
   ============================================================ */

.v2-foot { padding: 40px var(--gutter-m) 56px; margin-top: 80px;
  border-top: 1px solid var(--C-line); color: var(--C-ink-3); font-size: 12px;
  line-height: 1.7; display: flex; flex-direction: column; gap: 16px; }
.v2-foot-top { display: flex; flex-direction: column; gap: 20px; }
.v2-foot-top nav { display: flex; flex-wrap: wrap; gap: 14px 20px; }
.v2-foot-top nav a { color: var(--C-ink-2); transition: color 120ms; }
.v2-foot-top nav a:hover { color: var(--C-ink); }
.v2-foot-meta { display: flex; flex-wrap: wrap; gap: 6px 18px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  color: var(--C-ink-3); text-transform: uppercase; }
@media (min-width: 768px) {
  .v2-foot { padding: 48px var(--gutter-d) 64px; flex-direction: row;
    justify-content: space-between; align-items: flex-end; gap: 32px; }
  .v2-foot-top { flex-direction: row; align-items: center; gap: 28px; }
}

/* ============================================================
   LAYOUT utilities
   ============================================================ */

.v2-wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter-m); }
.v2-wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter-m); }
@media (min-width: 768px) {
  .v2-wrap, .v2-wrap-narrow { padding: 0 var(--gutter-d); }
}

.v2-section { padding: 48px 0; }
@media (min-width: 768px) { .v2-section { padding: 80px 0; } }

/* ============================================================
   TYPE
   ============================================================ */

.v2-kicker { display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 10px; color: var(--C-gold);
  letter-spacing: 0.24em; text-transform: uppercase; }
.v2-kicker::before { content: ""; width: 20px; height: 1px;
  background: var(--C-gold); display: inline-block; }
.v2-kicker.is-seal { color: var(--C-seal); }
.v2-kicker.is-seal::before { background: var(--C-seal); }

.v2-h1 { font-family: var(--font-serif-kr); font-weight: 300;
  font-size: clamp(40px, 7vw, 72px); line-height: 1.08; letter-spacing: -0.03em;
  color: var(--C-ink); margin: 0; text-wrap: balance; }
.v2-h1 em { font-family: var(--font-serif-en); font-style: italic;
  font-weight: 400; color: var(--C-gold); }
.v2-h1 .hanja { font-family: var(--font-serif-kr); font-weight: 500;
  color: var(--C-seal); }

.v2-h2 { font-family: var(--font-serif-kr); font-weight: 400;
  font-size: clamp(24px, 4vw, 36px); line-height: 1.22; letter-spacing: -0.02em;
  margin: 0; text-wrap: balance; }
.v2-h2 em { font-family: var(--font-serif-en); font-style: italic;
  font-weight: 400; color: var(--C-gold); }

.v2-h3 { font-family: var(--font-serif-kr); font-weight: 500; font-size: 20px;
  line-height: 1.3; letter-spacing: -0.01em; margin: 0; }

.v2-lead { font-size: 15px; line-height: 1.75; color: var(--C-ink-2);
  text-wrap: pretty; max-width: 580px; }
@media (min-width: 768px) { .v2-lead { font-size: 17px; } }

.v2-small { font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; color: var(--C-ink-3); text-transform: uppercase; }

/* ============================================================
   BUTTONS
   ============================================================ */

.v2-btn { display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; padding: 14px 20px; font-size: 14px; font-weight: 500;
  border-radius: 2px; transition: all 160ms var(--ease-out);
  min-height: 48px; font-family: var(--font-sans); cursor: pointer;
  border: 1px solid transparent; }
.v2-btn-primary { background: var(--C-ink); color: var(--C-paper); }
.v2-btn-primary:hover { background: var(--C-gold-2); }
.v2-btn-ghost { border-color: var(--C-line-2); color: var(--C-ink);
  background: transparent; }
.v2-btn-ghost:hover { border-color: var(--C-ink); }
.v2-btn-block { width: 100%; }
.v2-btn-gold { background: var(--C-gold); color: var(--C-paper); }
.v2-btn-gold:hover { background: var(--C-gold-2); }

/* ============================================================
   HANJI CARD (double-border container)
   ============================================================ */

.hanji { position: relative; padding: 28px 18px; background: var(--C-paper-2);
  border: 1px solid var(--C-line);
  box-shadow: 0 20px 40px -24px rgba(26, 22, 18, 0.15); }
.hanji::before { content: ""; position: absolute; inset: 10px;
  border: 1px solid var(--C-line); pointer-events: none; }
.hanji .label { position: absolute; top: -9px; left: 20px;
  background: var(--C-paper); padding: 0 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--C-gold); }
@media (min-width: 768px) {
  .hanji { padding: 36px 24px; }
  .hanji::before { inset: 12px; }
}

/* ============================================================
   PILLARS (4 columns — stays 4 on mobile per spec)
   ============================================================ */

.pillars { display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; position: relative; z-index: 1; }
.pillar { display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 6px 0; border-right: 1px solid var(--C-line); }
.pillar:last-child { border-right: 0; }
.pillar .pl { font-family: var(--font-mono); font-size: 8px;
  letter-spacing: 0.18em; color: var(--C-ink-3); text-transform: uppercase;
  padding-bottom: 5px; border-bottom: 1px solid var(--C-line);
  width: 100%; text-align: center; margin-bottom: 8px; }
.pillar .s, .pillar .b { font-family: var(--font-serif-kr); font-weight: 500;
  font-size: clamp(36px, 9vw, 56px); line-height: 1.02; color: var(--C-ink); }
.pillar .b { color: var(--C-gold); }
.pillar .k { font-family: var(--font-serif-kr); font-size: 10px;
  color: var(--C-ink-3); margin-top: 6px; letter-spacing: 0.04em; }
@media (min-width: 768px) {
  .pillar .pl { font-size: 9px; }
  .pillar .k { font-size: 11px; margin-top: 8px; }
}

/* ============================================================
   SEAL STAMP
   ============================================================ */

.seal-stamp { display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; background: var(--C-seal); color: var(--C-paper);
  font-family: var(--font-serif-kr); font-weight: 600; font-size: 20px;
  transform: rotate(-6deg); box-shadow: 0 2px 0 rgba(168, 50, 50, 0.3); }
@media (min-width: 768px) { .seal-stamp { width: 56px; height: 56px; font-size: 22px; } }
.seal-stamp.is-sm { width: 32px; height: 32px; font-size: 14px; }
.seal-stamp.is-xs { width: 22px; height: 22px; font-size: 11px; }

/* ============================================================
   FORM FIELDS — shared form language
   ============================================================ */

.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field .lbl { font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; color: var(--C-ink-3); text-transform: uppercase; }
.field input, .field select, .field textarea { font: inherit;
  font-family: var(--font-sans); font-size: 15px; color: var(--C-ink);
  background: var(--C-paper); border: 1px solid var(--C-line-2);
  padding: 14px 14px; border-radius: 2px; min-height: 48px; width: 100%;
  transition: border-color 140ms; -webkit-appearance: none; appearance: none; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none;
  border-color: var(--C-ink); }
.field .hint { font-size: 11px; color: var(--C-ink-3); line-height: 1.5; }
.field select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%231a1612' fill='none'/></svg>");
  background-repeat: no-repeat; background-position: right 16px center;
  padding-right: 40px; }

.field-row { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 480px) {
  .field-row-2 { grid-template-columns: 1fr 1fr; }
  .field-row-2-1 { grid-template-columns: 2fr 1fr; }
}

/* Segmented control */
.seg { display: grid; gap: 0; border: 1px solid var(--C-line-2);
  border-radius: 2px; overflow: hidden; }
.seg.cols-2 { grid-template-columns: 1fr 1fr; }
.seg.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.seg button, .seg label { padding: 12px 8px; font-size: 13px; color: var(--C-ink-2);
  background: var(--C-paper); cursor: pointer; text-align: center;
  border-right: 1px solid var(--C-line-2); transition: all 140ms;
  min-height: 44px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-weight: 500; }
.seg button:last-child, .seg label:last-child { border-right: 0; }
.seg button.on, .seg input:checked + label { background: var(--C-ink);
  color: var(--C-paper); }
.seg input { display: none; }

/* Field group (visual card wrapping a form) */
.formcard { background: var(--C-paper-2); border: 1px solid var(--C-line);
  padding: 24px 20px; position: relative; }
.formcard .formcard-label { position: absolute; top: -9px; left: 20px;
  background: var(--C-paper); padding: 0 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--C-gold); }
@media (min-width: 768px) { .formcard { padding: 32px 28px; } }

/* ============================================================
   CARDS
   ============================================================ */

.card { background: var(--C-paper-2); border: 1px solid var(--C-line);
  padding: 20px; }
@media (min-width: 768px) { .card { padding: 28px; } }
.card-ink { background: var(--C-ink); color: var(--C-paper); }
.card-ink .v2-kicker { color: var(--C-gold); }
.card-ink .v2-kicker::before { background: var(--C-gold); }

/* ============================================================
   CTA STRIP (upsell)
   ============================================================ */

.cta-strip { background: var(--C-ink); color: var(--C-paper);
  padding: 32px 20px; display: flex; flex-direction: column; gap: 20px;
  position: relative; overflow: hidden; }
.cta-strip::after { content: "盤"; position: absolute; right: -20px; top: -40px;
  font-family: var(--font-serif-kr); font-size: 220px; font-weight: 500;
  color: rgba(184, 134, 11, 0.08); line-height: 1; pointer-events: none; }
.cta-strip .v2-kicker { color: var(--C-gold); position: relative; z-index: 1; }
.cta-strip .v2-kicker::before { background: var(--C-gold); }
.cta-strip h3 { font-family: var(--font-serif-kr); font-weight: 400;
  font-size: clamp(22px, 3.5vw, 32px); line-height: 1.25; margin: 0;
  position: relative; z-index: 1; }
.cta-strip .price-row { display: flex; align-items: baseline; gap: 10px;
  position: relative; z-index: 1; }
.cta-strip .price-row .was { font-size: 13px; color: var(--C-ink-3);
  text-decoration: line-through; }
.cta-strip .price-row .now { font-family: var(--font-serif-en);
  font-size: 34px; color: var(--C-gold); font-weight: 500; font-style: italic; }
.cta-strip .actions { display: flex; gap: 10px; position: relative; z-index: 1; }
.cta-strip .v2-btn-gold { flex: 1; }
@media (min-width: 768px) {
  .cta-strip { flex-direction: row; align-items: center; padding: 40px 36px;
    justify-content: space-between; gap: 32px; }
  .cta-strip > * { flex: 1; }
  .cta-strip .actions { flex: 0 0 auto; }
}

/* ============================================================
   SHARE BUTTONS
   ============================================================ */

.share-row { display: flex; gap: 8px; }
.share-btn { flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 6px; padding: 12px; font-size: 12px; border: 1px solid var(--C-line-2);
  color: var(--C-ink-2); background: var(--C-paper); border-radius: 2px;
  transition: all 140ms; min-height: 44px; font-family: var(--font-sans); }
.share-btn:hover { border-color: var(--C-ink); color: var(--C-ink); }
.share-btn svg { width: 14px; height: 14px; }

/* ============================================================
   UTILITY
   ============================================================ */

.ruler { height: 1px; background: var(--C-line); border: 0; margin: 32px 0; }
.ruler-dashed { height: 0; border: 0; border-top: 1px dashed var(--C-line-2);
  margin: 24px 0; }

.el-dot { display: inline-block; width: 8px; height: 8px; border-radius: 0; }
.el-dot.wood { background: var(--wood); }
.el-dot.fire { background: var(--fire); }
.el-dot.earth { background: var(--earth); }
.el-dot.metal { background: var(--metal); border: 1px solid var(--C-ink-3); }
.el-dot.water { background: var(--water); }

/* Metal element special rendering — silver border + ink text */
.el-metal-token { border: 1px solid var(--metal); color: var(--C-ink);
  padding: 2px 8px; font-family: var(--font-serif-kr); font-size: 13px;
  font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.el-metal-token::before { content: ""; width: 6px; height: 6px;
  background: var(--metal); border: 0.5px solid var(--C-ink-3); }

/* NEW badge */
.badge-new { font-family: var(--font-mono); font-size: 9px;
  color: var(--C-seal); letter-spacing: 0.1em; margin-left: 4px; }

/* scroll hint scrollbar hide */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }