/* =====================================================================
   SajuName — card-styles.css (motion integration staging v1)
   Eight K-Name Card preview themes, applied to #k-name-card via
   .kcs-* classes. Privacy-safe: themes are pure CSS — they add no
   content. The saved PNG export keeps the Original Classic design.
   Garden Light fix: every decorative shape sits at z-index:0 with
   pointer-events:none, all text is z-index:1, and ornaments are
   positioned with clearance so Hanja/Hangul never sit under them.
   ===================================================================== */

.k-name-card {
  --kc-bg: linear-gradient(165deg, #FCF8EF 0%, #F4ECDA 100%);
  --kc-ink: #26231D;
  --kc-sub: #5A554B;
  --kc-line: #E3D8C1;
  --kc-accent: #A97B2A;
  --kc-seal-bg: #B5482F;
  --kc-seal-ink: #FBF3E4;
  background: var(--kc-bg) !important;
  color: var(--kc-ink) !important;
  border-color: var(--kc-line) !important;
}
/* Isolated stacking context: decorative layers go to z-index:-1 so they
   sit above the card background but UNDER all text — without disturbing
   the app's original (absolute) card layout. */
.k-name-card { isolation: isolate; }
.k-name-card .card-roman { color: var(--kc-accent); }
.k-name-card .card-hanja, .k-name-card .muted,
.k-name-card .pronunciation-guide, .k-name-card .card-created-from { color: var(--kc-sub); }
.k-name-card .card-seal { background: var(--kc-seal-bg); color: var(--kc-seal-ink); }
.k-name-card::before, .k-name-card::after { z-index: -1; pointer-events: none; }

/* 1 · Original SajuName Classic — the refined current card (default). */
.k-name-card.kcs-classic::after {
  content: ""; position: absolute; inset: 9px;
  border: 1px solid color-mix(in srgb, #A97B2A 24%, transparent); border-radius: 13px;
}

/* 2 · Ivory Ink — graphite sketch, quiet space. */
.k-name-card.kcs-ivory-ink {
  --kc-bg: #FEFDFA; --kc-line: #ECE8DC; --kc-accent: #26231D;
  --kc-seal-bg: transparent; --kc-seal-ink: #26231D;
}
.k-name-card.kcs-ivory-ink .card-seal { box-shadow: inset 0 0 0 1.6px #26231D; transform: rotate(0deg); }
.k-name-card.kcs-ivory-ink .sn-kcard-gat { opacity: .16; width: 64px; height: 44px; left: auto; right: 26px; top: 54px; bottom: auto; }

/* 3 · Hanji Warmth — soft fiber grain, stitched border. */
.k-name-card.kcs-hanji {
  --kc-bg: #F3EAD7; --kc-ink: #4D4434; --kc-sub: rgba(77, 68, 52, .65); --kc-line: #DFD2B4; --kc-accent: #A97B2A;
  background-image:
    url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="300" height="300"%3E%3Cfilter id="f"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.006 0.12" numOctaves="2" seed="4"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0.50 0 0 0 0 0.42 0 0 0 0 0.28 0.07 0 0 0 0"/%3E%3C/filter%3E%3Crect width="300" height="300" filter="url(%23f)"/%3E%3C/svg%3E'),
    url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="260" height="260"%3E%3Cfilter id="m"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="3" seed="11"/%3E%3CfeColorMatrix type="matrix" values="0 0 0 0 0.42 0 0 0 0 0.35 0 0 0 0 0.22 0.10 0 0 0 0"/%3E%3C/filter%3E%3Crect width="260" height="260" filter="url(%23m)"/%3E%3C/svg%3E') !important;
}
.k-name-card.kcs-hanji::after {
  content: ""; position: absolute; inset: 8px;
  border: 1px dashed color-mix(in srgb, #A97B2A 45%, transparent); border-radius: 13px;
}

/* 4 · Amber Seal — thin gold frame, softly celebratory. */
.k-name-card.kcs-amber-seal {
  --kc-bg: linear-gradient(160deg, #FDF8EC 0%, #F7EBCD 100%);
  --kc-ink: #3D3326; --kc-sub: rgba(61, 51, 38, .62); --kc-line: #E2CFA0; --kc-accent: #A97B2A;
}
.k-name-card.kcs-amber-seal::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, #C9962E, #A97B2A 55%, #C9962E); opacity: .9;
}
.k-name-card.kcs-amber-seal::after {
  content: ""; position: absolute; inset: 10px;
  border: 1px solid color-mix(in srgb, #C9962E 55%, transparent); border-radius: 12px;
}
.k-name-card.kcs-amber-seal .card-seal { border-radius: 50%; background: radial-gradient(circle at 36% 30%, #C4543A, #A33B2B); }

/* 5 · Seoul Night — graphite night, moonlit edge. */
.k-name-card.kcs-seoul-night {
  --kc-bg: linear-gradient(172deg, #231F18 0%, #120F0B 100%);
  --kc-ink: #EFE7D6; --kc-sub: rgba(239, 231, 214, .58); --kc-line: #352F25; --kc-accent: #C9962E;
  --kc-seal-bg: #8E3B26;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(239, 231, 214, .16);
}
.k-name-card.kcs-seoul-night::before {
  content: ""; position: absolute; top: -40px; right: -30px; width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 231, 214, .2) 0%, transparent 62%);
}
.k-name-card.kcs-seoul-night::after {
  content: ""; position: absolute; top: 30px; left: 24px; width: 2.5px; height: 2.5px; border-radius: 50%;
  background: rgba(239, 231, 214, .6);
  box-shadow: 40px 18px 0 -.5px rgba(239, 231, 214, .38), 80px 6px 0 -.8px rgba(239, 231, 214, .26);
}
.k-name-card.kcs-seoul-night .card-hangul { text-shadow: 0 0 20px rgba(239, 231, 214, .2); }
.k-name-card.kcs-seoul-night .sn-kcard-gat { filter: invert(.88); opacity: .18; }

/* 6 · Garden Light — green-sand calm, organic.
   Overlap fix: the leaf arc is anchored to the card's top-right corner
   INSIDE a reserved 64px corner zone, behind text (z-index:0), and the
   topline text keeps right padding so nothing sits under it. */
.k-name-card.kcs-garden {
  --kc-bg: linear-gradient(160deg, #F1F3E6 0%, #E2E7CE 100%);
  --kc-ink: #39422F; --kc-sub: rgba(57, 66, 47, .62); --kc-line: #D5DBBE; --kc-accent: #6B7C4F;
  --kc-seal-bg: #6B7C4F;
}
.k-name-card.kcs-garden::before {
  content: ""; position: absolute; bottom: -54px; left: -44px; width: 170px; height: 170px;
  background: #6B7C4F; opacity: .1; border-radius: 58% 42% 55% 45%/55% 48% 52% 45%;
}
.k-name-card.kcs-garden::after {
  content: ""; position: absolute; top: 16px; right: 16px; width: 34px; height: 17px;
  border: 1.6px solid #6B7C4F; border-bottom: 0; border-radius: 34px 34px 0 0; opacity: .4;
}
.k-name-card.kcs-garden .card-topline { padding-right: 58px; }
.k-name-card.kcs-garden .card-seal { top: 44px; }

/* 7 · Modern Scholar — aged paper, sepia rules, colophon. */
.k-name-card.kcs-scholar {
  --kc-bg: linear-gradient(170deg, #FAF6EA 0%, #F3ECD9 100%);
  --kc-ink: #3B3226; --kc-sub: rgba(59, 50, 38, .6); --kc-line: #D8CFB6; --kc-accent: #3B3226;
  --kc-seal-bg: transparent; --kc-seal-ink: #A33B2B;
  border-radius: 10px !important;
}
.k-name-card.kcs-scholar::before {
  content: ""; position: absolute; left: 20px; right: 20px; top: 46px; height: 5px;
  border-top: 1.6px solid rgba(59, 50, 38, .8); border-bottom: .7px solid rgba(59, 50, 38, .45);
}
.k-name-card.kcs-scholar .card-hangul { font-style: italic; font-weight: 470; }
.k-name-card.kcs-scholar .card-seal {
  box-shadow: inset 0 0 0 1.4px #A33B2B; border-radius: 5px; transform: rotate(-2deg); font-size: 15px;
}

/* 8 · Soft K-Profile — rounded identity card. */
.k-name-card.kcs-k-profile {
  --kc-bg: linear-gradient(165deg, #FFFDF8 0%, #F8ECDF 100%);
  --kc-ink: #4A3B2E; --kc-sub: rgba(74, 59, 46, .6); --kc-line: #EBDCC8; --kc-accent: #C76B4A;
  --kc-seal-bg: linear-gradient(145deg, #F6E6D2, #E9CDB2); --kc-seal-ink: #A05537;
  border-radius: 26px !important;
  box-shadow: 0 30px 60px -36px rgba(160, 85, 55, .4);
}
.k-name-card.kcs-k-profile .card-seal {
  border-radius: 50%; transform: none;
  box-shadow: 0 0 0 2px #FFFDF8, 0 0 0 3.6px #E8BD92;
}

/* ============ STYLE PICKER ============ */
.sn-card-style-picker { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 18px 0 4px; }
.sn-card-style-picker .label { margin-right: 4px; }
.sn-style-chip {
  font-family: var(--sn-font-mono, ui-monospace); font-size: 10px; letter-spacing: .08em;
  border: 1px solid var(--line, #E3D8C1); border-radius: 999px; padding: 7px 13px;
  background: var(--surface, #FBF8F1); color: var(--graphite, #5A554B); cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; transition: all .3s;
}
.sn-style-chip i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(38, 35, 29, .18); background: var(--sw, #FCF8EF); }
.sn-style-chip:hover { border-color: var(--sn-amber, #A97B2A); color: var(--sn-amber, #A97B2A); }
.sn-style-chip.is-active { background: var(--ink, #26231D); color: var(--surface, #FBF8F1); border-color: var(--ink, #26231D); }
.sn-card-style-note { font-size: 11.5px; color: var(--graphite, #5A554B); margin: 6px 0 0; }

/* =====================================================================
   PASS 3 — two additional styles (10 total)
   ===================================================================== */

/* 9 · Liquid Ivory Glass — translucent warm glass, original treatment.
   Soft blur over the page texture, highlight edge, warm depth. */
.k-name-card.kcs-liquid-ivory {
  --kc-bg: linear-gradient(160deg, rgba(255, 253, 248, .78) 0%, rgba(246, 238, 221, .66) 100%);
  --kc-ink: #2A261F; --kc-sub: rgba(58, 52, 43, .62); --kc-line: rgba(255, 255, 255, .72); --kc-accent: #A97B2A;
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, .72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -1px 0 rgba(170, 150, 110, .22),
    inset 1px 0 0 rgba(255, 255, 255, .35),
    0 34px 68px -34px rgba(110, 92, 56, .45);
}
.k-name-card.kcs-liquid-ivory::before {
  content: ""; position: absolute; top: -30%; left: -20%; width: 80%; height: 70%;
  background: linear-gradient(135deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 58%);
  transform: rotate(-8deg); border-radius: 50%;
}
.k-name-card.kcs-liquid-ivory::after {
  content: ""; position: absolute; inset: 7px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .45);
}
.k-name-card.kcs-liquid-ivory .card-seal {
  background: rgba(181, 72, 47, .88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 18px -8px rgba(140, 50, 30, .5);
}

/* 10 · Aurora Glass — soft prismatic glass; pastel refracted light,
   iridescent hairline edge. Quiet, not neon. */
.k-name-card.kcs-aurora-glass {
  --kc-bg: linear-gradient(155deg, rgba(255, 253, 251, .92) 0%, rgba(247, 242, 240, .88) 100%);
  --kc-ink: #322B2E; --kc-sub: rgba(74, 64, 70, .6); --kc-line: rgba(255, 255, 255, .8); --kc-accent: #8A6FA8;
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid transparent !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 34px 68px -34px rgba(120, 95, 130, .4);
}
.k-name-card.kcs-aurora-glass::before {
  /* iridescent hairline edge drawn behind content (z-index:-1 via base rule) */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px;
  background: linear-gradient(135deg, #EFC3BC 0%, #EEDFB6 26%, #C8E2D0 52%, #C3D4EC 76%, #DEC8E6 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: .85;
}
.k-name-card.kcs-aurora-glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(120px 90px at 86% 8%, rgba(214, 184, 226, .22), transparent 70%),
    radial-gradient(140px 100px at 8% 92%, rgba(186, 216, 200, .22), transparent 70%),
    radial-gradient(110px 80px at 70% 80%, rgba(238, 205, 186, .16), transparent 70%);
}
.k-name-card.kcs-aurora-glass .card-roman { color: #8A6FA8; }
.k-name-card.kcs-aurora-glass .card-seal {
  background: linear-gradient(145deg, #B0599B 0%, #8A6FA8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 8px 18px -8px rgba(138, 111, 168, .55);
}

/* =====================================================================
   PASS 5 — card taste & readability overhaul
   Numbered editorial indices, credit-card edge details, high-contrast
   dark styles. Pure CSS decoration — adds no user data to any card.
   ===================================================================== */

/* editorial index — every style reads as a numbered series piece */
.k-name-card .card-label::after {
  font-family: var(--sn-font-mono, ui-monospace);
  font-size: 9px; letter-spacing: .14em;
  color: var(--kc-accent); opacity: .85;
}
.k-name-card.kcs-classic .card-label::after { content: " · No.01"; }
.k-name-card.kcs-ivory-ink .card-label::after { content: " · No.02"; }
.k-name-card.kcs-hanji .card-label::after { content: " · No.03"; }
.k-name-card.kcs-amber-seal .card-label::after { content: " · No.04"; }
.k-name-card.kcs-seoul-night .card-label::after { content: " · No.05"; }
.k-name-card.kcs-garden .card-label::after { content: " · No.06"; }
.k-name-card.kcs-scholar .card-label::after { content: " · No.07"; }
.k-name-card.kcs-k-profile .card-label::after { content: " · No.08"; }
.k-name-card.kcs-liquid-ivory .card-label::after { content: " · No.09"; }
.k-name-card.kcs-aurora-glass .card-label::after { content: " · No.10"; }

/* ---- dark-card readability: Seoul Night, fully legible ---- */
.k-name-card.kcs-seoul-night {
  --kc-ink: #F4EDDC;
  --kc-sub: rgba(244, 237, 220, .74);
  --kc-accent: #E0B45C;
  border-top: 1px solid rgba(244, 237, 220, .26) !important;
}
.k-name-card.kcs-seoul-night .card-hangul {
  color: #FBF6E9; text-shadow: 0 0 26px rgba(224, 180, 92, .35);
}
.k-name-card.kcs-seoul-night .card-roman { color: #E0B45C; }
.k-name-card.kcs-seoul-night .card-label { color: rgba(244, 237, 220, .8); letter-spacing: .26em; }

/* ---- Ivory Ink: one vertical brush stroke, wide quiet space ---- */
.k-name-card.kcs-ivory-ink::before {
  content: ""; position: absolute; left: 18px; top: 20px; bottom: 20px; width: 3px;
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(38, 35, 29, .85) 0%, rgba(38, 35, 29, .25) 70%, rgba(38, 35, 29, .55) 100%);
}
.k-name-card.kcs-ivory-ink { padding-left: 38px !important; }
.k-name-card.kcs-ivory-ink .card-label { letter-spacing: .3em; }

/* ---- Hanji Warmth: clearer sub ink on fiber paper ---- */
.k-name-card.kcs-hanji { --kc-sub: rgba(77, 68, 52, .74); }

/* ---- Amber Seal: gently embossed name, credit-card sheen ---- */
.k-name-card.kcs-amber-seal .card-hangul {
  text-shadow: 0 1px 0 rgba(255, 252, 242, .9), 0 -1px 0 rgba(61, 51, 38, .18);
}
.k-name-card.kcs-amber-seal .card-roman { letter-spacing: .04em; }

/* ---- Garden Light: stronger body ink ---- */
.k-name-card.kcs-garden { --kc-sub: rgba(57, 66, 47, .72); }

/* ---- Modern Scholar: clearer sepia body ---- */
.k-name-card.kcs-scholar { --kc-sub: rgba(59, 50, 38, .7); }

/* ---- Soft K-Profile: soft identity blob behind the corner ---- */
.k-name-card.kcs-k-profile::before {
  content: ""; position: absolute; top: -46px; right: -40px; width: 150px; height: 150px;
  background: radial-gradient(circle at 40% 42%, rgba(199, 107, 74, .16), transparent 68%);
  border-radius: 50%;
}
.k-name-card.kcs-k-profile { --kc-sub: rgba(74, 59, 46, .7); }

/* ---- Glass styles: readable body text over blur ---- */
.k-name-card.kcs-liquid-ivory { --kc-sub: rgba(58, 52, 43, .72); }
.k-name-card.kcs-aurora-glass { --kc-sub: rgba(74, 64, 70, .7); }

/* Seoul Night: every text element explicitly readable on the dark field */
.k-name-card.kcs-seoul-night .label,
.k-name-card.kcs-seoul-night #card-type { color: rgba(244, 237, 220, .78); }
.k-name-card.kcs-seoul-night p { color: rgba(244, 237, 220, .85); }
.k-name-card.kcs-seoul-night .card-hanja,
.k-name-card.kcs-seoul-night .pronunciation-guide,
.k-name-card.kcs-seoul-night .muted,
.k-name-card.kcs-seoul-night .card-created-from { color: var(--kc-sub); }

/* The base card's ::before is a 1px divider (top:78px; left/right:28px;
   height:1px). Themed ::before decorations must reset the leaking box
   properties or they collapse into that divider's geometry. */
.k-name-card.kcs-ivory-ink::before { height: auto; right: auto; }
.k-name-card.kcs-seoul-night::before { left: auto; }
.k-name-card.kcs-garden::before { top: auto; right: auto; }
.k-name-card.kcs-k-profile::before { left: auto; bottom: auto; }
.k-name-card.kcs-liquid-ivory::before { right: auto; bottom: auto; }