:root {
--ink: #0e0810;
--ink-2: #15101a;
--paper: #f5efe6;
--paper-soft: #d8cfc2;
--gold: #c9973a;
--gold-light: #e8c87a;
--gold-dim: #8e6a2a;
--rose: #c4616e;
--rose-light: #e8a0a8;
--jade: #4a7c6a;
--jade-light: #7ec4ac;
--mist: #a99aaf;
--mist-light: #c8bcd0;
--border: rgba(201,151,58,0.12);
--border-strong: rgba(201,151,58,0.3);
--serif: 'Noto Serif KR', serif;
--sans: 'Noto Sans KR', sans-serif;
--text-xs: 11px;
--text-sm: 13px;
--text-md: 14px;
--text-lg: 17px;
--text-xl: 20px;
--text-2xl: 26px;
--text-3xl: 34px;
--sp-xs: 4px;
--sp-sm: 8px;
--sp-md: 12px;
--sp-lg: 16px;
--sp-xl: 24px;
--sp-2xl: 32px;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { overflow-x:hidden; background:#0e0810; }
body {
background:#000;
color:var(--paper);
font-family:var(--sans);
font-weight:300;
font-size:var(--text-md);
line-height:1.75;
min-height:100vh;
display:flex;
justify-content:center;
word-break:keep-all;
-webkit-font-smoothing:antialiased;
}
.device {
width:100%; max-width:440px;
min-height:100vh;
background:var(--ink);
position:relative;
box-shadow:0 0 100px rgba(0,0,0,0.8);
padding-top:48px;
padding-bottom:70px;
overflow:hidden;
}
.v2-app-header {
position:fixed;
top:0; left:50%; transform:translateX(-50%);
width:100%; max-width:440px;
height:48px;
background:rgba(13, 16, 21, 0.92);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border-bottom:1px solid #241a12;
display:flex; align-items:center; justify-content:center;
z-index:90;
}
.v2-app-header-logo {
display:flex; align-items:center; gap:8px;
cursor:pointer; user-select:none;
}
.v2-app-header-logo-chinese {
font-family:var(--serif);
color:var(--gold-light);
font-size:22px;
font-weight:400;
line-height:1;
}
.v2-app-header-logo-text {
font-family:var(--serif);
color:var(--paper);
font-size:16px;
letter-spacing:0.08em;
line-height:1;
}
.cosmos { position:absolute; inset:0; z-index:0; pointer-events:none; }
.cosmos::before {
content:''; position:absolute; inset:0;
background:
radial-gradient(ellipse 80% 50% at 20% 10%, rgba(90,40,70,0.45) 0%, transparent 60%),
radial-gradient(ellipse 60% 70% at 85% 90%, rgba(30,50,80,0.55) 0%, transparent 60%),
radial-gradient(ellipse 40% 40% at 60% 40%, rgba(180,140,60,0.08) 0%, transparent 50%),
linear-gradient(170deg, #0e0810 0%, #15101a 40%, #0a1020 100%);
}
.cosmos .star {
position:absolute; width:2px; height:2px;
background:white; border-radius:50%; opacity:0.6;
animation:twinkle 3s ease-in-out infinite alternate;
}
@keyframes twinkle {
0%   { opacity:0.2; transform:scale(0.8); }
100% { opacity:0.9; transform:scale(1.2); }
}
.wrap { position:relative; z-index:1; }
.sub-header {
position:sticky; top:0;
background:rgba(14,8,16,0.85);
backdrop-filter:blur(12px);
border-bottom:1px solid var(--border);
padding:14px 16px;
display:flex; align-items:center; gap:12px;
z-index:100;
}
.sub-back {
background:none; border:none; appearance:none; -webkit-appearance:none;
font:inherit; line-height:1;
font-size:18px; color:var(--mist-light);
cursor:pointer; padding:4px 8px 4px 0;
min-width:30px;
}
.sub-title {
flex:1; font-family:var(--serif);
font-size:15px; color:var(--paper);
letter-spacing:0.08em;
display:flex; align-items:baseline; gap:8px; min-width:0;
}
.sub-title small {
display:inline; margin-left:auto; flex-shrink:0;
font-size:11px; color:var(--mist);
letter-spacing:0.16em;
font-weight:300; font-family:var(--sans);
}
.screen-ai-history-v2-wrap .sub-title small {
display:inline; margin:0 0 0 8px;
}
.sub-action {
font-size:12px; color:var(--gold-light);
cursor:pointer; letter-spacing:0.12em; padding:6px 10px;
}
.screen { display:none; }
.screen.active { display:block; animation:fadeUp 0.28s ease both; }
@keyframes fadeUp {
from { opacity:0; transform:translateY(6px); }
to   { opacity:1; transform:translateY(0); }
}
.card {
background:rgba(255,255,255,0.03);
border:1px solid var(--border);
border-radius:3px;
padding:20px 18px;
margin-bottom:14px;
position:relative;
overflow:hidden;
}
.card::before {
content:''; position:absolute;
top:0; left:15%; right:15%; height:1px;
background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.card-title {
font-family:var(--sans);
font-size:11px; font-weight:500;
letter-spacing:0.28em; color:var(--gold);
margin-bottom:14px;
display:flex; align-items:center; gap:10px;
text-transform:uppercase;
}
.card-title::after {
content:''; flex:1; height:1px;
background:linear-gradient(90deg, var(--border), transparent);
}
.card-narrative {
font-size:13px; color:var(--paper);
line-height:1.85; font-weight:300;
letter-spacing:0.02em;
}
.card-narrative strong { color:var(--gold-light); font-weight:500; }
.card-narrative em { color:var(--rose-light); font-style:normal; }
.title-plate {
padding:22px 16px;
background:rgba(201,151,58,0.04);
border:1px solid var(--border);
border-radius:2px; text-align:center;
position:relative;
margin-bottom:14px;
}
.title-plate::before, .title-plate::after {
content:'✦'; color:var(--gold);
font-size:11px; opacity:0.6;
position:absolute; left:50%; transform:translateX(-50%);
}
.title-plate::before { top:8px; }
.title-plate::after  { bottom:8px; }
.plate-name {
font-family:var(--serif); font-size:22px;
font-weight:700; color:var(--gold-light);
letter-spacing:0.12em; margin:6px 0 4px;
}
.plate-name .plate-hanja {
font-size:13px; font-weight:500; color:var(--mist);
letter-spacing:0.05em; margin-left:6px; opacity:0.75;
}
.plate-sub {
font-size:11px; color:var(--mist);
letter-spacing:0.16em;
}
.zw-gung .zw-pos {
font-size:9.5px; font-weight:500; color:var(--mist);
letter-spacing:0.02em; opacity:0.7; margin-left:3px;
}
.zw-center-title .plate-hanja {
font-size:11px; font-weight:500; color:var(--mist);
letter-spacing:0.05em; margin-left:4px; opacity:0.7;
}
.lucky-header {
font-size:11px; color:var(--mist);
letter-spacing:0.14em; margin-bottom:14px;
padding-bottom:10px; border-bottom:1px solid var(--border);
}
.lucky-row {
padding:12px 0;
border-bottom:1px solid rgba(255,255,255,0.06);
}
.lucky-row:last-child { border-bottom:none; }
.lucky-row-head {
display:flex; align-items:center; gap:6px;
font-size:11px; color:var(--mist);
letter-spacing:0.15em; margin-bottom:5px;
}
.lucky-row-icon { font-size:13px; }
.lucky-row-lbl { text-transform:none; }
.lucky-row-val {
font-family:var(--serif); font-size:15px;
color:var(--paper); margin-bottom:5px;
letter-spacing:0.04em;
}
.lucky-row-desc {
font-size:12px; color:var(--mist);
line-height:1.65;
}
.home-td-dd {
display:grid; grid-template-columns:1fr 1fr; gap:8px;
margin-top:10px;
}
.home-td-col { padding:11px; border-radius:2px; font-size:11px; }
.home-td-col.do {
background:rgba(126,196,172,0.08);
border:1px solid rgba(126,196,172,0.3);
color:var(--jade-light);
}
.home-td-col.dont {
background:rgba(196,97,110,0.08);
border:1px solid rgba(196,97,110,0.3);
color:var(--rose-light);
}
.home-td-lbl {
font-weight:500; font-size:11px; margin-bottom:6px;
letter-spacing:0.24em;
}
.home-td-val {
color:var(--paper); font-weight:300; line-height:1.85;
font-size:12px;
}
.oh-wrap {
display:flex; gap:14px; align-items:center;
}
.oh-chart { flex:0 0 140px; height:140px; }
.oh-bars { flex:1; }
.oh-bar { margin-bottom:8px; }
.oh-bar-lbl {
font-size:11px; display:flex; justify-content:space-between;
margin-bottom:3px; letter-spacing:0.1em;
color:var(--mist-light);
}
.oh-bar-lbl .han { font-family:var(--serif); color:var(--gold-light); margin-right:6px; }
.oh-bar-track {
height:3px; background:rgba(255,255,255,0.04);
border-radius:1px; overflow:hidden;
}
.oh-bar-fill { height:100%; opacity:0.85; }
.manse-scroll { overflow-x:auto; padding:6px 0; }
.manse-table {
width:100%; border-collapse:separate; border-spacing:6px; table-layout:fixed;
}
.manse-table th {
font-size:11px; font-weight:400;
letter-spacing:0.22em; color:var(--mist);
padding:4px 0 8px; text-align:center;
}
.manse-cell {
background:rgba(255,255,255,0.03);
border:1px solid var(--border);
border-radius:2px; text-align:center;
padding:10px 4px;
vertical-align:top;
}
.manse-cell.ilgan {
border-color:var(--border-strong);
background:rgba(201,151,58,0.07);
box-shadow:0 0 18px rgba(201,151,58,0.1);
}
.ss-badge {
display:inline-block;
font-size:10px; font-weight:600;
padding:2px 6px;
background:rgba(255,255,255,0.06);
border:1px solid rgba(255,255,255,0.1);
border-radius:2px;
letter-spacing:0.04em; color:var(--paper);
margin-bottom:4px;
}
.ss-badge.cheon-badge { background:rgba(201,151,58,0.1); border-color:rgba(201,151,58,0.25); color:var(--gold-light); }
.ss-badge.ji-badge { background:rgba(169,154,175,0.08); border-color:rgba(169,154,175,0.2); color:var(--mist-light); }
.ss-badge.mt-3 { margin-top:8px; }
.manse-cell.ilgan .ss-badge.cheon-badge {
background:rgba(201,151,58,0.2); color:var(--gold-light);
border-color:rgba(201,151,58,0.4);
}
.cheon, .ji {
display:block;
font-family:var(--serif); font-weight:700;
line-height:1.1;
}
.cheon { font-size:24px; }
.ji { font-size:22px; margin-top:2px; }
.cheon.wood, .ji.wood { color:#7fb380; }
.cheon.fire, .ji.fire { color:#e8a0a8; }
.cheon.earth, .ji.earth { color:#c9973a; }
.cheon.metal, .ji.metal { color:#d8d4c8; }
.cheon.water, .ji.water { color:#7a9bb5; }
.jijanggan {
margin-top:6px; padding-top:6px;
border-top:1px dashed rgba(255,255,255,0.08);
font-size:10px; color:var(--mist);
font-family:var(--serif);
letter-spacing:0.06em;
}
.twelve-won {
margin-top:4px;
font-size:10px; color:var(--gold);
letter-spacing:0.14em;
font-weight:500;
}
.manse-footer { margin-top:16px; }
.manse-footer .ohaeng-hidden-info {
background:none; border:none; padding:0;
margin-top:16px;
}
.manse-footer-bar {
font-size:13px; color:var(--paper);
line-height:1.85; font-weight:300; letter-spacing:0.02em;
}
.manse-footer-label {
font-family:var(--sans); font-size:11px; font-weight:500;
letter-spacing:0.2em; color:var(--gold);
margin-bottom:6px;
}
.manse-footer-val {
font-family:var(--serif); font-size:14px; color:var(--ivory);
letter-spacing:0.03em;
}
.manse-footer-sub {
font-size:12px; color:var(--mist-light);
line-height:1.7; letter-spacing:0.02em;
margin-top:6px;
}
.manse-footer .yongsin-divider {
height:1px; margin:8px 0;
background:linear-gradient(90deg, var(--border), transparent);
}
.ohaeng-hidden-info-q {
font-family:var(--serif); font-size:12px;
color:var(--gold); letter-spacing:0.14em;
margin-bottom:8px;
}
.ohaeng-hidden-info-a {
font-size:12.5px; color:var(--paper-soft);
line-height:1.7; letter-spacing:0.02em;
}
.manse-footer-row {
display:flex; justify-content:space-between; align-items:center;
font-size:12px; padding:5px 0;
}
.manse-footer-row + .manse-footer-row {
border-top:1px dashed rgba(255,255,255,0.06);
}
.manse-footer-k {
color:var(--gold); letter-spacing:0.16em;
font-weight:600; font-size:11px;
}
.manse-footer-v {
color:var(--paper); font-family:var(--serif);
letter-spacing:0.04em;
}
.unified-lock {
padding:22px 20px;
background:linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(14,8,16,0.4) 100%);
border:1px solid var(--border);
border-radius:4px;
margin-bottom:14px;
position:relative;
}
.unified-lock::before {
content:''; position:absolute;
top:0; left:15%; right:15%; height:1px;
background:linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}
.ul-head {
display:flex; align-items:center; gap:12px;
margin-bottom:16px;
padding-bottom:14px;
border-bottom:1px solid var(--border);
}
.ul-seal {
width:34px; height:34px; border-radius:50%;
background:rgba(201,151,58,0.08);
border:1px solid var(--border-strong);
color:var(--gold-light);
display:flex; align-items:center; justify-content:center;
font-size:13px;
flex-shrink:0;
}
.ul-head-txt { flex:1; }
.ul-title {
font-family:var(--serif);
font-size:14px; color:var(--paper);
letter-spacing:0.1em; font-weight:600;
}
.ul-title-sub {
font-size:11px; color:var(--mist);
letter-spacing:0.16em; margin-top:3px;
}
.ul-list { display:flex; flex-direction:column; gap:8px; }
.ul-item {
display:flex; gap:12px; padding:11px 12px;
background:rgba(14,8,16,0.35);
border:1px solid var(--border);
border-radius:2px;
}
.ul-item-icon {
flex:0 0 22px;
display:flex; align-items:center; justify-content:center;
font-size:14px;
color:var(--gold-dim);
}
.ul-item-body { flex:1; min-width:0; }
.ul-item-title {
font-family:var(--serif);
font-size:13px; color:var(--paper);
letter-spacing:0.04em; margin-bottom:3px;
}
.ul-item-desc {
font-size:11px; color:var(--mist-light);
letter-spacing:0.04em; line-height:1.65;
}
.ul-hint {
margin-top:14px; padding-top:12px;
border-top:1px dashed var(--border);
font-size:11px; color:var(--gold);
letter-spacing:0.3em; text-align:center;
}
.ul-hint::before { content:'✦ '; }
.ohaeng-radar-wrap {
width:100%; max-width:340px; margin:0 auto;
aspect-ratio:340/330;
}
.ohaeng-radar-svg {
width:100%; height:100%; display:block;
}
.overview-ohaeng-radar {
width:100%; max-width:280px; margin:0 auto 12px;
aspect-ratio:280/300;
}
.overview-ohaeng-radar .ohaeng-radar-svg {
width:100%; height:100%; display:block;
}
.ohaeng-radar-full {
width:100%; max-width:400px; margin:16px auto 6px;
aspect-ratio:1/1;
}
.ohaeng-radar-full .ohaeng-radar-svg {
width:100%; height:100%; display:block;
}
.overview-ohaeng-layout {
display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr);
gap:14px; align-items:center;
margin:14px 0 4px;
}
@media (max-width:380px) {
.overview-ohaeng-layout { grid-template-columns:1fr; }
}
.overview-ohaeng-bars { display:flex; flex-direction:column; gap:8px; }
.ohaeng-bar-row {
display:grid; grid-template-columns:42px 1fr 28px;
gap:8px; align-items:center;
font-size:11.5px; color:var(--mist-light);
}
.oh-bar-name { font-family:var(--serif); letter-spacing:0.08em; }
.ohaeng-bar-row .oh-bar {
height:7px; background:rgba(255,255,255,0.05);
border-radius:1px; overflow:hidden;
}
.ohaeng-bar-row .oh-bar-fill { height:100%; transition:width 0.4s ease-out; }
.ohaeng-bar-row .oh-bar-val {
text-align:right; font-family:var(--serif);
color:var(--ivory); font-size:11px;
}
.ohaeng-toggle {
display:flex; align-items:center; gap:10px;
cursor:pointer; user-select:none;
margin:6px 0 4px;
padding:8px 0;
}
.ohaeng-toggle input[type="checkbox"] {
position:absolute; opacity:0; pointer-events:none;
}
.ohaeng-toggle-slider {
width:34px; height:18px; flex-shrink:0;
background:rgba(255,255,255,0.1);
border-radius:9px;
position:relative;
transition:background 0.2s;
}
.ohaeng-toggle-slider::after {
content:'';
position:absolute; top:2px; left:2px;
width:14px; height:14px;
background:var(--mist); border-radius:50%;
transition:transform 0.2s, background 0.2s;
}
.ohaeng-toggle input:checked + .ohaeng-toggle-slider {
background:rgba(232,160,168,0.5);
}
.ohaeng-toggle input:checked + .ohaeng-toggle-slider::after {
transform:translateX(16px);
background:var(--rose-light);
}
.ohaeng-toggle-label {
font-size:12.5px; color:var(--ivory);
letter-spacing:0.04em;
}
.ohaeng-toggle-help {
font-size:11px; color:var(--mist);
letter-spacing:0.04em; line-height:1.6;
padding:4px 0 8px 44px;
}
#ohaengCard:not(.show-hidden) .ohaeng-hidden-poly { display:none; }
#ohaengCard:not(.show-hidden) .ohaeng-hidden-info { display:none; }
.insight-box {
margin-top:14px; padding:12px 14px;
background:rgba(201,151,58,0.08);
border-left:3px solid var(--gold);
border-radius:0 3px 3px 0;
font-size:12.5px; color:var(--paper-soft);
line-height:1.7; letter-spacing:0.04em;
}
.insight-box strong { color:var(--gold-light); font-family:var(--serif); }
.insight-box--spaced { margin:14px 0 10px; }
.ohaeng-hidden-info {
margin-top:10px; padding:11px 14px;
background:rgba(232,160,168,0.08);
border-left:3px solid var(--rose-light);
border-radius:0 3px 3px 0;
}
.ohaeng-hidden-info .ohi-title {
font-family:var(--serif); font-size:12px;
color:var(--rose-light); letter-spacing:0.14em;
margin-bottom:5px;
}
.ohaeng-hidden-info .ohi-narr {
font-size:12px; color:var(--paper-soft);
line-height:1.7; letter-spacing:0.02em;
}
.ohaeng-hidden-info strong { color:var(--rose-light); }
.zw-tl-toggle {
width:100%; margin-top:12px; padding:11px;
background:rgba(201,151,58,0.06);
border:1px solid rgba(201,151,58,0.25);
border-radius:3px;
color:var(--gold-light); font-size:12px;
letter-spacing:0.14em; font-weight:600;
cursor:pointer; transition:background 0.2s;
}
.zw-tl-toggle:hover { background:rgba(201,151,58,0.12); }
.sinsal-potential-toggle {
width:100%; margin-top:14px; padding:11px;
background:transparent;
border:1px dashed var(--border);
border-radius:3px;
color:var(--mist); font-size:12px;
letter-spacing:0.14em; font-weight:600;
cursor:pointer; transition:background 0.2s;
}
.sinsal-potential-toggle:hover {
background:rgba(201,151,58,0.08);
}
.sinsal-potential-section {
margin-top:12px;
border-left:2px solid var(--border);
padding-left:14px; margin-left:6px;
}
.sps-period {
position:relative;
margin-bottom:14px; padding-bottom:12px;
border-bottom:1px dashed rgba(255,255,255,0.06);
}
.sps-period::before {
content:''; position:absolute;
left:-21px; top:4px; width:7px; height:7px;
border-radius:50%; background:var(--border);
}
.sps-period:last-child { margin-bottom:0; padding-bottom:0; border-bottom:none; }
.sps-period.is-now {
background:linear-gradient(90deg, rgba(201,151,58,0.08) 0%, transparent 100%);
padding:10px 12px; border-radius:3px;
border-bottom:none;
}
.sps-period.is-now::before {
background:var(--gold-light);
box-shadow:0 0 0 3px rgba(232,200,122,0.18);
}
.sps-period-head {
display:flex; align-items:center; gap:8px;
margin-bottom:6px;
}
.sps-age {
font-family:var(--serif); font-size:13px;
color:var(--gold-light); letter-spacing:0.06em;
}
.sps-now-badge {
font-size:9px; padding:1px 6px; border-radius:2px;
background:var(--gold-light); color:var(--ink);
letter-spacing:0.12em; font-weight:700;
}
.sps-items { font-size:11.5px; color:var(--mist-light); margin-bottom:4px; }
.sps-items strong { color:var(--ivory); }
.sps-narr { font-size:12px; color:var(--paper-soft); line-height:1.7; }
.ul-cta {
width:100%; margin-top:14px;
padding:14px 18px;
background:var(--gold);
border:none; border-radius:3px;
color:var(--ink); font-weight:700;
font-size:13px; letter-spacing:0.16em;
cursor:pointer; font-family:var(--sans);
display:flex; align-items:center; justify-content:space-between;
gap:10px;
box-shadow:0 4px 18px rgba(201,151,58,0.3);
transition:transform 0.15s, box-shadow 0.15s;
}
.ul-cta:hover { transform:translateY(-1px); box-shadow:0 6px 22px rgba(201,151,58,0.45); }
.ul-cta .ul-cta-price {
font-family:var(--serif); font-size:15px;
letter-spacing:0.04em;
}
.compat-new-btn {
width:100%; padding:18px 16px;
background:linear-gradient(135deg, rgba(232,160,168,0.08) 0%, rgba(14,8,16,0.5) 100%);
border:1px dashed rgba(232,160,168,0.4);
border-radius:4px;
display:flex; align-items:center; gap:14px;
color:var(--rose-light);
cursor:pointer; font-family:var(--sans);
margin-bottom:18px;
transition:all 0.15s;
}
.compat-new-btn:hover {
background:rgba(232,160,168,0.12);
border-color:rgba(232,160,168,0.6);
}
.cnb-ic {
width:36px; height:36px; flex-shrink:0;
background:rgba(232,160,168,0.15);
border:1px solid rgba(232,160,168,0.4);
border-radius:50%;
display:flex; align-items:center; justify-content:center;
font-size:18px; font-weight:700;
}
.cnb-label {
font-family:var(--serif); font-size:14px;
letter-spacing:0.1em; flex:1;
text-align:left; font-weight:600;
}
.cnb-sub {
display:block; font-size:10px;
color:var(--mist); letter-spacing:0.04em;
margin-top:3px; font-weight:300;
}
.compat-empty {
text-align:center; padding:40px 20px;
background:rgba(255,255,255,0.025);
border:1px solid var(--border);
border-radius:4px;
}
.ce-ic {
font-size:42px; color:var(--rose-light);
margin-bottom:14px; letter-spacing:0.1em;
}
.ce-title {
font-family:var(--serif); font-size:16px;
color:var(--paper); letter-spacing:0.12em;
margin-bottom:10px;
}
.ce-body {
font-size:12px; color:var(--mist);
letter-spacing:0.06em; line-height:1.8;
margin-bottom:24px;
}
.ce-cta {
padding:12px 24px;
background:rgba(232,160,168,0.1);
border:1px solid rgba(232,160,168,0.4);
color:var(--rose-light);
border-radius:3px;
font-size:12px; letter-spacing:0.16em;
cursor:pointer; font-family:var(--sans);
}
body:not(.has-pairs) .compat-history { display:none; }
body.has-pairs .compat-empty { display:none; }
.ch-section-head {
display:flex; align-items:center; gap:8px;
margin:18px 0 10px;
padding-bottom:8px;
border-bottom:1px dashed rgba(255,255,255,0.08);
}
.ch-section-head:first-child { margin-top:6px; }
.chs-ic { font-size:14px; }
.chs-label {
flex:1;
font-family:var(--serif); font-size:12px;
color:var(--gold); letter-spacing:0.18em;
font-weight:600;
}
.chs-count {
font-size:10px; color:var(--mist);
letter-spacing:0.14em;
}
.compat-row.locked {
opacity:0.7;
}
.compat-row .score.dim { color:var(--mist); }
.compat-cta-card {
background:linear-gradient(135deg, rgba(232,160,168,0.08) 0%, rgba(14,8,16,0.4) 100%);
border:1px solid rgba(232,160,168,0.25);
}
.compat-cta-card .card-title { color:var(--rose-light); }
.cc-actions {
display:flex; flex-direction:column; gap:8px;
margin-top:16px;
}
.cc-btn {
padding:12px 16px; border-radius:3px; cursor:pointer;
font-size:12px; letter-spacing:0.16em; font-family:var(--sans);
}
.cc-btn.primary {
background:var(--rose-light); border:none;
color:var(--ink); font-weight:700;
}
.cc-btn.secondary {
background:transparent;
border:1px solid rgba(232,160,168,0.4);
color:var(--rose-light);
}
.compat-lock-pick {
display:flex; flex-direction:column; gap:8px;
margin-top:14px;
}
.compat-lock-pay-btn {
padding:12px 16px; border-radius:3px; cursor:pointer;
font-size:12px; letter-spacing:0.1em; font-family:var(--sans);
background:transparent;
border:1px solid rgba(232,160,168,0.4);
color:var(--rose-light); font-weight:600;
text-align:center;
}
@media (min-width:480px) {
.compat-lock-pick { flex-direction:row; }
.compat-lock-pay-btn { flex:1; }
}
.compat-picker {
width:100%; max-width:380px; margin:0 auto;
background:linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);
border:1px solid var(--border-strong);
border-radius:8px;
padding:30px 22px 22px;
text-align:center;
position:relative;
max-height:90vh;
max-height:90dvh;
overflow-y:auto;
}
.cp-sub {
font-size:11px; color:var(--mist);
letter-spacing:0.06em; line-height:1.7;
margin:8px 0 22px;
}
.cp-slots-row {
display:flex; align-items:flex-end; gap:10px;
margin-bottom:8px;
}
.cp-slot {
flex:1; min-width:0;
}
.cp-slot-label {
font-size:10px; color:var(--gold);
letter-spacing:0.3em; margin-bottom:6px;
}
.cp-slot-pick {
display:flex; align-items:center; gap:12px;
padding:12px 14px;
position:relative; padding-right:40px;
background:rgba(201,151,58,0.08);
border:1px solid rgba(201,151,58,0.4);
border-radius:3px;
cursor:pointer;
}
.cp-slot-pick.cp-slot-active {
border-color:var(--rose-light);
box-shadow:0 0 0 1px var(--rose-light) inset;
}
.cp-slot-pick.empty {
background:rgba(255,255,255,0.025);
border:1px dashed var(--border-strong);
color:var(--mist);
justify-content:center;
}
.cp-slot-pick img {
width:36px; height:36px;
object-fit:contain;
flex-shrink:0;
}
.cp-slot-pick span {
font-family:var(--serif); font-size:14px;
color:var(--paper); letter-spacing:0.06em;
text-align:left;
}
.cp-slot-pick small {
display:block; font-size:10px; color:var(--mist);
letter-spacing:0.04em; margin-top:2px; font-family:var(--sans);
}
.cp-empty-mark {
font-size:18px !important; color:var(--gold-light) !important;
margin-right:4px;
}
.cp-x {
font-family:var(--serif); font-size:22px;
color:var(--rose-light);
margin:0; padding-bottom:14px;
align-self:flex-end; flex-shrink:0;
letter-spacing:0.1em;
}
.cp-slot-clear {
position:absolute; right:10px; bottom:10px;
width:22px; height:22px; border-radius:50%;
border:1px solid var(--border);
background:rgba(255,255,255,0.04);
color:var(--mist); font-size:14px; line-height:1;
cursor:pointer;
display:flex; align-items:center; justify-content:center;
}
.cp-slot-clear:hover { border-color:var(--rose-light); color:var(--rose-light); }
.prs-sheet {
width:100%; align-self:flex-end;
background:var(--ink-2);
border-top:1px solid var(--border-strong);
border-radius:20px 20px 0 0;
padding:8px 22px 24px;
}
.prs-handle {
width:38px; height:4px; border-radius:2px;
background:rgba(201,151,58,0.25); margin:8px auto 18px;
}
.prs-eyebrow {
font-size:11px; letter-spacing:0.22em; color:var(--gold);
text-align:center; margin-bottom:14px;
}
.prs-who {
display:flex; align-items:center; gap:13px;
padding:14px; background:rgba(201,151,58,0.05);
border:1px solid var(--border); border-radius:8px; margin-bottom:18px;
}
.prs-who img {
width:46px; height:46px; border-radius:7px;
object-fit:contain; flex-shrink:0; background:#1d1622;
}
.prs-nm { font-family:var(--serif); font-size:16px; color:var(--paper); }
.prs-nm span { font-size:11px; color:var(--gold-light); margin-left:4px; }
.prs-sb { font-size:11px; color:var(--mist); margin-top:3px; letter-spacing:0.04em; }
.prs-lead {
font-family:var(--serif); font-size:15px; color:var(--paper-soft);
text-align:center; line-height:1.7; margin-bottom:6px;
}
.prs-lead b { color:var(--gold-light); font-weight:700; }
.prs-price { text-align:center; font-size:12px; color:var(--mist); margin-bottom:20px; }
.prs-price s { color:rgba(169,154,175,0.55); margin-right:6px; }
.prs-btn-pay {
display:block; width:100%; text-align:center;
padding:15px; background:var(--gold); color:#1a1206;
font-size:14px; font-weight:700; letter-spacing:0.04em;
border:none; border-radius:4px; cursor:pointer;
font-family:var(--sans); margin-bottom:10px;
}
.prs-btn-ghost {
display:block; width:100%; text-align:center;
padding:13px; background:transparent;
border:1px solid var(--border-strong); border-radius:4px;
color:var(--mist-light); font-size:13px; letter-spacing:0.06em;
cursor:pointer; font-family:var(--sans);
}
.prs-btn-close {
display:block; width:100%; text-align:center;
padding:11px; background:transparent; border:none;
color:var(--mist); font-size:12px; letter-spacing:0.1em;
cursor:pointer; font-family:var(--sans); margin-top:4px;
}
.cp-list {
margin-top:18px; padding:14px;
background:rgba(0,0,0,0.3);
border:1px solid var(--border);
border-radius:3px;
max-height:240px; overflow-y:auto;
}
.cp-list-label {
font-size:10px; color:var(--gold);
letter-spacing:0.18em; margin-bottom:10px;
text-align:left;
}
.cp-list-item {
display:flex; align-items:center; gap:10px;
padding:9px 8px;
border-radius:2px;
cursor:pointer;
transition:all 0.15s;
text-align:left;
}
.cp-list-item:hover {
background:rgba(201,151,58,0.08);
}
.cp-list-item img {
width:32px; height:32px; flex-shrink:0;
object-fit:contain;
}
.cp-list-item strong {
font-family:var(--serif); font-size:13px;
color:var(--paper); letter-spacing:0.04em;
}
.cp-list-item small {
display:block; font-size:10px; color:var(--mist);
letter-spacing:0.04em; margin-top:2px;
}
.cp-swap-hint {
margin-top:10px; text-align:center;
}
.cp-swap-hint button {
background:none; border:none;
color:var(--mist); font-size:11px;
letter-spacing:0.14em; cursor:pointer;
padding:6px 10px;
text-decoration:underline; text-underline-offset:3px;
}
.cp-start-btn {
margin-top:18px;
background:var(--rose-light) !important;
color:var(--ink) !important;
font-weight:700;
}
.cp-start-btn:disabled {
background:rgba(255,255,255,0.05) !important;
color:var(--mist) !important;
cursor:not-allowed;
}
.rel-picker {
margin-top:18px;
padding-top:16px;
border-top:1px solid var(--border);
}
.rel-picker-title {
font-size:10px; color:var(--gold);
letter-spacing:0.3em; margin-bottom:10px;
}
.rel-chips {
display:flex; gap:6px;
}
.rel-chip {
display:inline-block;
padding:9px 14px;
background:rgba(255,255,255,0.02);
border:1px solid var(--border);
border-radius:2px; color:var(--mist);
font-size:12px; letter-spacing:0.06em;
cursor:pointer; font-family:var(--sans);
}
.rel-chips .rel-chip {
flex:1 1 0; min-width:0;
padding:9px 4px; text-align:center; white-space:nowrap;
}
.rel-chip-2line {
display:flex !important;
flex-direction:column;
align-items:center;
gap:4px;
padding:10px 4px !important;
}
.rel-chip-2line .rel-chip-emoji {
font-size:18px;
line-height:1;
}
.rel-chip-2line .rel-chip-label {
font-size:11px;
letter-spacing:0.04em;
}
.rel-chip.active {
background:rgba(201,151,58,0.08);
border-color:var(--border-strong);
color:var(--gold-light);
}
.rel-subs {
display:flex; gap:6px;
margin-top:8px;
}
.rel-sub {
flex:1 1 0; min-width:0;
padding:9px 4px; text-align:center; white-space:nowrap;
background:rgba(255,255,255,0.02);
border:1px solid var(--border);
border-radius:2px; color:var(--mist);
font-size:12px; letter-spacing:0.06em;
cursor:pointer; font-family:var(--sans);
}
.rel-sub.active {
background:rgba(196,97,110,0.1);
border-color:rgba(232,160,168,0.5);
color:var(--rose-light);
}
.compat-head-row {
display:flex; align-items:center; justify-content:space-between;
gap:10px; padding:0 0 14px;
}
.compat-add-btn {
flex-shrink:0;
padding:7px 12px;
background:rgba(201,151,58,0.1);
border:1px solid rgba(201,151,58,0.4);
color:var(--gold-light);
border-radius:3px;
font-size:11px; letter-spacing:0.06em;
cursor:pointer; font-family:var(--sans);
white-space:nowrap;
}
.compat-add-btn:hover { background:rgba(201,151,58,0.18); }
.compat-back-btn {
width:100%;
margin:32px 0 24px;
padding:14px 18px;
background:transparent;
border:1px solid var(--border);
color:var(--mist-light);
font-size:12px; letter-spacing:0.16em;
border-radius:3px;
cursor:pointer; font-family:var(--sans);
}
.compat-back-btn:hover { background:rgba(255,255,255,0.04); }
.pay-banner {
margin:14px 16px;
padding:20px 18px;
background:linear-gradient(135deg, rgba(201,151,58,0.14) 0%, rgba(14,8,16,0.6) 100%);
border:1px solid var(--gold);
border-radius:5px;
position:relative; overflow:hidden;
}
.pay-banner::before {
content:''; position:absolute;
top:0; left:15%; right:15%; height:1px;
background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.pb-eyebrow {
font-size:11px; color:var(--gold);
letter-spacing:0.36em; margin-bottom:10px;
}
.pb-title {
font-family:var(--serif);
font-size:17px; color:var(--paper);
letter-spacing:0.08em; line-height:1.5;
margin-bottom:14px; font-weight:600;
}
.pb-title strong { color:var(--gold-light); }
.pb-progress {
height:5px;
background:rgba(255,255,255,0.05);
border-radius:2px; overflow:hidden;
margin-bottom:10px;
}
.pb-progress-fill {
height:100%; width:15%;
background:linear-gradient(90deg, var(--gold-dim), var(--gold-light));
}
.pb-progress-text {
display:flex; justify-content:space-between;
font-size:11px; color:var(--mist-light);
letter-spacing:0.14em; margin-bottom:16px;
}
.pb-progress-text strong { color:var(--gold-light); }
.pb-includes {
font-size:11px; color:var(--mist-light);
line-height:2;
margin-bottom:14px;
padding:10px 12px;
background:rgba(14,8,16,0.4);
border:1px solid var(--border);
border-radius:2px;
}
.pb-includes div::before { content:'✦ '; color:var(--gold); }
.pb-includes .ai-inc::before { content:'✧ '; color:var(--rose-light); }
.pb-cta {
width:100%; padding:14px;
background:var(--gold); color:var(--ink);
border:none; border-radius:3px;
font-size:13px; font-weight:700;
letter-spacing:0.2em;
cursor:pointer;
display:flex; align-items:center; justify-content:center; gap:10px;
font-family:var(--sans);
}
.pb-cta .price {
font-family:var(--serif); font-size:15px; letter-spacing:0.02em;
}
.pb-note {
text-align:center; color:var(--mist);
font-size:12px; letter-spacing:0.04em;
margin-top:10px;
}
.pay-banner-paid {
margin:14px 16px;
padding:16px 18px;
background:linear-gradient(135deg, rgba(126,196,172,0.1) 0%, rgba(14,8,16,0.5) 100%);
border:1px solid rgba(126,196,172,0.3);
border-radius:5px;
position:relative; overflow:hidden;
}
.pay-banner-paid::before {
content:''; position:absolute;
top:0; left:15%; right:15%; height:1px;
background:linear-gradient(90deg, transparent, var(--jade-light), transparent);
}
.pbp-row {
display:flex; justify-content:space-between; align-items:center;
margin-bottom:10px;
}
.pbp-status {
font-size:11px; color:var(--jade-light);
letter-spacing:0.2em;
}
.pbp-status::before { content:'✓ '; }
.pbp-count {
font-size:11px; color:var(--mist);
letter-spacing:0.14em;
}
.pbp-ai-row {
display:flex; gap:10px; align-items:center;
padding-top:12px; border-top:1px dashed var(--border);
}
.pbp-ai-count {
flex:1; font-size:12px; color:var(--paper);
letter-spacing:0.06em;
}
.pbp-ai-count strong {
color:var(--rose-light); font-family:var(--serif);
font-size:14px; font-weight:700;
}
.pbp-charge-btn {
padding:8px 14px;
background:rgba(232,160,168,0.12);
border:1px solid rgba(232,160,168,0.4);
color:var(--rose-light);
border-radius:2px; font-size:11px;
letter-spacing:0.16em; cursor:pointer;
font-family:var(--sans);
}
.ai-pass-strip {
margin:0 16px 14px;
padding:10px 14px;
display:flex; align-items:center; justify-content:space-between;
gap:10px;
background:linear-gradient(135deg, rgba(232,160,168,0.08) 0%, rgba(14,8,16,0.4) 100%);
border:1px solid rgba(232,160,168,0.25);
border-radius:3px;
}
.ai-pass-strip .label {
font-size:11px; color:var(--paper);
letter-spacing:0.06em; flex:1;
}
.ai-pass-strip .label strong {
color:var(--rose-light); font-family:var(--serif);
font-weight:700; font-size:13px;
}
.ai-pass-strip button {
padding:6px 12px;
background:rgba(232,160,168,0.12);
border:1px solid rgba(232,160,168,0.4);
color:var(--rose-light);
border-radius:2px; font-size:11px;
letter-spacing:0.16em; cursor:pointer;
font-family:var(--sans);
}
.pay-mini-sticky {
display:none;
position:fixed; left:50%; transform:translateX(-50%);
bottom:60px; width:100%; max-width:440px;
z-index:45;
padding:10px 16px;
background:rgba(14,8,16,0.95);
backdrop-filter:blur(12px);
border-top:1px solid var(--border-strong);
align-items:center; justify-content:space-between;
gap:10px;
}
.pay-mini-sticky.visible { display:flex; }
.pms-label {
font-size:12px; color:var(--paper);
letter-spacing:0.06em; flex:1;
}
.pms-cta {
padding:8px 18px;
background:var(--gold); color:var(--ink);
border:none; border-radius:2px;
font-size:11px; font-weight:700;
letter-spacing:0.18em; cursor:pointer;
font-family:var(--sans);
}
@media (max-width:767px) {
.pay-mini-sticky { bottom:calc(60px + env(safe-area-inset-bottom)); }
}
.ai-card {
padding:20px 18px;
background:linear-gradient(135deg, rgba(232,160,168,0.06) 0%, rgba(14,8,16,0) 100%);
border:1px solid rgba(232,160,168,0.3);
border-radius:3px;
margin-bottom:14px;
position:relative;
overflow:hidden;
}
.ai-card::before {
content:''; position:absolute;
top:0; left:15%; right:15%; height:1px;
background:linear-gradient(90deg, transparent, var(--rose-light), transparent);
}
.ai-card-title {
font-family:var(--serif); font-size:15px; font-weight:600;
color:var(--rose-light); letter-spacing:0.12em; margin-bottom:6px;
}
.ai-card-desc {
font-size:12px; color:var(--mist-light);
letter-spacing:0.06em; margin-bottom:14px; line-height:1.7;
}
.ai-cta-btn {
width:100%; padding:13px;
background:rgba(232,160,168,0.12);
border:1px solid rgba(232,160,168,0.4);
color:var(--rose-light);
border-radius:2px;
font-size:12px; font-weight:500;
letter-spacing:0.2em; cursor:pointer;
font-family:var(--sans);
}
.persons-scroll {
display:flex; gap:10px;
overflow-x:auto;
padding:4px 16px 14px;
scrollbar-width:none;
}
.persons-scroll::-webkit-scrollbar { display:none; }
.p-card {
flex:0 0 126px;
padding:12px 10px;
background:linear-gradient(180deg, rgba(201,151,58,0.08) 0%, rgba(14,8,16,0.6) 100%);
border:1px solid var(--border);
border-radius:6px;
text-align:center;
cursor:pointer;
position:relative;
transition:transform 0.2s;
}
.p-card:hover {
transform:translateY(-3px);
border-color:var(--border-strong);
}
.p-card::before {
content:''; position:absolute;
top:0; left:20%; right:20%; height:1px;
background:linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}
.p-card.self::before {
background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.p-card-img {
width:64px; height:64px;
object-fit:contain;
margin:4px auto 8px;
display:block;
filter:drop-shadow(0 0 12px rgba(201,151,58,0.2));
}
.p-card-name {
font-family:var(--serif); font-size:13px;
color:var(--paper); letter-spacing:0.06em;
}
.p-card-meta {
font-size:11px; color:var(--mist);
letter-spacing:0.1em; margin-top:3px;
}
.p-card-rel {
display:inline-block; margin-top:6px;
font-size:11px; padding:1px 7px;
background:rgba(255,255,255,0.04);
border:1px solid var(--border);
border-radius:2px; color:var(--mist-light);
letter-spacing:0.12em;
}
.p-card-paid {
position:absolute; top:8px; right:8px;
font-size:11px; color:var(--jade-light);
letter-spacing:0.1em;
}
.p-card-paid.unpaid { color:var(--mist); opacity:0.6; }
.p-card-add {
flex:0 0 126px;
padding:12px;
border:1px dashed var(--border-strong);
border-radius:6px;
display:flex; flex-direction:column;
align-items:center; justify-content:center;
cursor:pointer; color:var(--gold-light);
min-height:138px;
}
.p-card-add .plus { font-size:24px; margin-bottom:6px; }
.p-card-add .lbl { font-size:11px; letter-spacing:0.16em; }
.p-card-anon-cta {
flex:0 0 126px;
padding:14px 10px;
background:rgba(255,255,255,0.02);
border:1px dashed var(--border);
border-radius:6px;
display:flex; flex-direction:column;
align-items:center; justify-content:center;
cursor:pointer; color:var(--mist-light);
min-height:138px; text-align:center;
line-height:1.6;
}
.p-card-anon-cta .ic { font-size:18px; margin-bottom:8px; color:var(--gold-light); }
.p-card-anon-cta .lbl { font-size:11px; letter-spacing:0.06em; }
.compat-row {
display:flex; align-items:center; gap:12px;
padding:12px;
background:rgba(255,255,255,0.03);
border:1px solid var(--border);
border-radius:2px; margin-bottom:7px;
cursor:pointer;
}
.compat-row.best {
background:linear-gradient(135deg, rgba(201,151,58,0.1) 0%, rgba(255,255,255,0.03) 100%);
border-color:var(--border-strong);
}
.compat-row .avatar-img {
width:40px; height:40px; object-fit:contain;
flex-shrink:0;
}
.compat-row .compat-cat {
flex-shrink:0; min-width:46px; height:46px;
display:flex; align-items:center; justify-content:center;
padding:0 8px; border-radius:7px;
cursor:pointer; font-size:20px;
background:linear-gradient(155deg,rgba(201,151,58,0.14),rgba(14,8,16,0.5));
border:1px solid var(--border-strong);
font-family:var(--serif); font-size:12px;
color:var(--gold-light); letter-spacing:0.06em;
}
.compat-row .compat-cat[data-relgroup="love"]   { background:linear-gradient(155deg,rgba(232,160,168,0.16),rgba(14,8,16,0.5)); color:var(--rose-light); }
.compat-row .compat-cat[data-relgroup="friend"] { background:linear-gradient(155deg,rgba(122,200,180,0.16),rgba(14,8,16,0.5)); color:var(--jade-light,#8fd4c2); }
.compat-row .compat-cat[data-relgroup="family"] { background:linear-gradient(155deg,rgba(201,151,58,0.18),rgba(14,8,16,0.5)); color:var(--gold-light); }
.compat-row .compat-cat[data-relgroup="work"]   { background:linear-gradient(155deg,rgba(122,160,210,0.16),rgba(14,8,16,0.5)); color:#9db8e0; }
.compat-row .info { flex:1; min-width:0; }
.compat-row .name-row {
display:flex; align-items:center; gap:6px;
}
.compat-row .name {
font-family:var(--serif); font-size:13px;
color:var(--paper); letter-spacing:0.06em;
}
.compat-row .rel-chip {
font-size:11px; padding:1px 6px;
background:rgba(255,255,255,0.04);
border:1px solid var(--border);
border-radius:2px; color:var(--mist-light);
letter-spacing:0.12em;
}
.compat-row .type {
font-size:11px; color:var(--mist-light);
margin-top:3px; letter-spacing:0.04em;
}
.compat-row .st {
font-size:11px; letter-spacing:0.14em; margin-top:4px;
}
.compat-row .st.lock { color:var(--mist); }
.compat-row .st.lock::before {
content:'🔒 '; font-size:11px; opacity:0.6;
}
.compat-row .st.unlock { color:var(--jade-light); }
.compat-row .st.unlock::before { content:'✓ '; font-size:11px; }
.compat-row .st.pair-block { color:var(--gold-light); }
.compat-row .st.pair-block::before { content:'⚠ '; font-size:11px; }
.compat-row .compat-rel-btn {
display:inline-flex; align-items:center; gap:5px;
margin-top:5px; padding:4px 10px;
background:rgba(201,151,58,0.07);
border:1px solid var(--border-strong);
border-radius:3px;
color:var(--gold-light);
font-size:11px; letter-spacing:0.06em;
font-family:var(--sans); cursor:pointer;
}
.compat-row .compat-rel-btn:hover {
border-color:var(--rose-light); color:var(--rose-light);
}
.compat-row .score {
font-family:var(--serif); font-size:22px; font-weight:700;
color:var(--gold-light); line-height:1;
}
.compat-row.best .score {
background:linear-gradient(135deg, var(--rose-light), var(--gold-light));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.compat-pair-actions {
margin:8px 0 14px;
padding:12px 14px;
background:rgba(201,151,58,0.06);
border:1px solid var(--border-strong);
border-radius:3px;
display:flex; gap:8px; flex-wrap:wrap;
align-items:center;
}
.compat-pair-actions .label {
width:100%; font-size:11px; color:var(--gold);
letter-spacing:0.16em; margin-bottom:6px;
}
.compat-pair-actions button {
flex:1; min-width:120px; padding:9px 12px;
background:rgba(201,151,58,0.1);
border:1px solid var(--border-strong);
color:var(--gold-light);
border-radius:2px;
font-size:11px; letter-spacing:0.12em;
cursor:pointer; font-family:var(--sans);
}
.form-group { margin-bottom:22px; }
.form-label {
display:block; font-size:11px;
letter-spacing:0.3em; color:var(--gold);
margin-bottom:10px; text-transform:uppercase;
}
.form-input {
width:100%; padding:13px 14px;
background:rgba(255,255,255,0.03);
border:1px solid var(--border);
border-radius:2px; color:var(--paper);
font-family:var(--sans); font-size:16px;
}
.form-input:focus {
outline:none; border-color:var(--border-strong);
background:rgba(201,151,58,0.03);
}
.form-input::placeholder { color:var(--mist); opacity:0.6; }
.form-row { display:flex; gap:8px; }
.form-row > * { flex:1; }
.form-chips { display:flex; gap:6px; flex-wrap:wrap; }
.form-chip {
padding:9px 14px;
background:rgba(255,255,255,0.02);
border:1px solid var(--border);
border-radius:2px; color:var(--mist);
font-size:12px; letter-spacing:0.12em;
cursor:pointer; font-family:var(--sans);
}
.form-chip.active {
background:rgba(201,151,58,0.08);
border-color:var(--border-strong);
color:var(--gold-light);
}
.form-hint {
font-size:11px; color:var(--mist);
letter-spacing:0.06em; margin-top:6px;
line-height:1.7;
}
.form-checkbox {
display:flex; align-items:center; gap:8px;
margin-top:8px; font-size:12px; color:var(--mist-light);
cursor:pointer; user-select:none;
}
.form-checkbox input { accent-color:var(--gold); width:14px; height:14px; }
.form-submit {
width:100%; padding:16px;
background:rgba(201,151,58,0.12);
border:1px solid var(--gold);
color:var(--gold-light); border-radius:2px;
font-size:13px; letter-spacing:0.26em;
font-weight:500; cursor:pointer;
margin-top:10px; font-family:var(--sans);
}
.form-select {
width:100%; padding:13px 36px 13px 14px;
background:rgba(255,255,255,0.03)
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23c9973a' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>")
no-repeat right 14px center;
border:1px solid var(--border);
border-radius:2px;
color:var(--paper);
font-family:var(--sans); font-size:16px;
appearance:none; -webkit-appearance:none;
cursor:pointer;
}
.form-select:disabled { color:var(--mist); opacity:0.5; cursor:not-allowed; }
.form-radio-group {
display:flex; flex-direction:column; gap:8px;
}
.form-radio {
display:flex; align-items:center; gap:10px;
padding:11px 14px;
background:rgba(255,255,255,0.02);
border:1px solid var(--border);
border-radius:2px;
cursor:pointer;
font-size:13px; color:var(--paper);
letter-spacing:0.06em;
}
.form-radio:hover { background:rgba(201,151,58,0.04); }
.form-radio input[type="radio"] {
accent-color:var(--gold); width:14px; height:14px;
flex-shrink:0;
}
.form-radio.selected {
background:rgba(201,151,58,0.06);
border-color:var(--border-strong);
}
.form-radio .sub {
color:var(--mist); font-size:11px;
margin-left:auto;
}
.form-cond {
margin-top:12px; padding:14px;
background:rgba(14,8,16,0.5);
border-left:2px solid var(--border-strong);
border-radius:0 2px 2px 0;
}
.form-cond[hidden] { display:none; }
.form-sigan-grid {
display:grid; grid-template-columns:repeat(4, 1fr);
gap:6px;
}
.form-sigan-chip {
padding:8px 4px;
background:rgba(255,255,255,0.02);
border:1px solid var(--border);
border-radius:2px;
text-align:center;
cursor:pointer;
font-size:11px; color:var(--mist-light);
letter-spacing:0.06em;
line-height:1.4;
font-family:var(--serif);
}
.form-sigan-chip .h {
display:block; font-size:14px; color:var(--gold-light);
font-weight:700; margin-bottom:2px;
}
.form-sigan-chip .t {
font-size:9px; color:var(--mist);
letter-spacing:0.04em;
font-family:var(--sans);
}
.form-sigan-chip.active {
background:rgba(201,151,58,0.1);
border-color:var(--gold);
color:var(--gold-light);
}
.form-region-row {
display:grid; grid-template-columns:1fr 1fr;
gap:8px;
}
.form-label-row {
display:flex; align-items:center; justify-content:space-between;
gap:8px; margin-bottom:6px;
}
.form-label-row .form-label { margin-bottom:0; }
.label-optional {
font-weight:400; color:rgba(255,255,255,0.45);
font-size:11px; letter-spacing:0.04em; margin-left:6px;
}
.v2-toggle {
position:relative; width:40px; height:22px;
cursor:pointer; flex-shrink:0;
}
.v2-toggle input { display:none; }
.v2-toggle-track {
position:absolute; inset:0;
background:rgba(255,255,255,0.06);
border:1px solid rgba(201,151,58,0.2);
border-radius:11px; transition:all 0.3s;
}
.v2-toggle-thumb {
position:absolute; top:2px; left:2px;
width:16px; height:16px;
background:var(--mist); border-radius:50%;
transition:all 0.3s;
}
.v2-toggle input:checked + .v2-toggle-track {
background:rgba(201,151,58,0.15); border-color:var(--gold);
}
.v2-toggle input:checked ~ .v2-toggle-thumb {
left:20px; background:var(--gold); box-shadow:0 0 8px rgba(201,151,58,0.5);
}
.form-region-row.is-disabled select {
opacity:0.35; pointer-events:none;
}
.form-rel-primary {
display:grid; grid-template-columns:repeat(3, 1fr);
gap:8px;
}
.form-rel-primary .chip {
padding:14px 10px;
background:rgba(255,255,255,0.03);
border:1px solid var(--border);
border-radius:2px;
text-align:center;
cursor:pointer;
color:var(--paper);
font-family:var(--serif);
letter-spacing:0.18em;
font-size:13px;
}
.form-rel-primary .chip .ic {
display:block; font-size:18px;
color:var(--gold-light);
margin-bottom:4px;
}
.form-rel-primary .chip.active {
background:rgba(201,151,58,0.1);
border-color:var(--gold);
color:var(--gold-light);
}
.form-rel-secondary {
margin-top:10px;
padding:12px 14px 14px;
background:rgba(14,8,16,0.5);
border-left:2px solid var(--border-strong);
border-radius:0 2px 2px 0;
}
.form-rel-secondary[hidden] { display:none; }
.form-rel-secondary .lbl {
font-size:10px; color:var(--gold);
letter-spacing:0.2em; margin-bottom:8px;
}
.form-rel-secondary .chips {
display:flex; gap:6px; flex-wrap:wrap;
}
.form-rel-secondary .chip {
padding:8px 12px;
background:rgba(255,255,255,0.02);
border:1px solid var(--border);
border-radius:999px;
color:var(--mist-light);
font-size:12px; letter-spacing:0.08em;
cursor:pointer;
font-family:var(--sans);
}
.form-rel-secondary .chip.active {
background:rgba(201,151,58,0.1);
border-color:var(--gold);
color:var(--gold-light);
}
.auto-card {
padding:18px 16px;
background:rgba(126,196,172,0.06);
border:1px solid rgba(126,196,172,0.25);
border-radius:3px;
margin-bottom:24px;
}
.auto-card .head {
font-size:11px; color:var(--jade-light);
letter-spacing:0.2em; margin-bottom:8px;
}
.auto-card .head::before { content:'✓ '; }
.auto-card .body {
font-family:var(--serif); font-size:14px;
color:var(--paper); letter-spacing:0.08em;
line-height:1.6;
}
.auto-card .foot {
font-size:11px; color:var(--mist);
letter-spacing:0.04em; margin-top:8px;
cursor:pointer; padding-top:8px;
border-top:1px dashed var(--border);
}
.form-card {
position:relative;
padding:22px 18px;
background:linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(14,8,16,0.4) 100%);
border:1px solid var(--border);
border-radius:4px;
margin-bottom:18px;
}
.form-corner {
position:absolute;
width:14px; height:14px;
border:1px solid var(--gold);
opacity:0.6;
}
.form-corner-tl { top:-1px; left:-1px; border-right:none; border-bottom:none; }
.form-corner-tr { top:-1px; right:-1px; border-left:none; border-bottom:none; }
.form-corner-bl { bottom:-1px; left:-1px; border-right:none; border-top:none; }
.form-corner-br { bottom:-1px; right:-1px; border-left:none; border-top:none; }
.form-divider {
height:1px; margin:18px -18px;
background:linear-gradient(90deg, transparent, var(--border), transparent);
}
.form-en {
font-size:10px; color:var(--mist);
letter-spacing:0.2em; font-weight:300;
margin-left:4px;
}
.danger-zone {
margin-top:30px; padding-top:20px;
border-top:1px solid rgba(196,97,110,0.2);
}
.danger-zone .label {
font-size:11px; color:var(--rose-light);
letter-spacing:0.3em; margin-bottom:10px;
text-transform:uppercase;
}
.danger-btn {
width:100%; padding:13px;
background:rgba(196,97,110,0.06);
border:1px solid rgba(196,97,110,0.3);
color:var(--rose-light);
border-radius:2px; cursor:pointer;
font-size:12px; letter-spacing:0.16em;
font-family:var(--sans);
}
.biz-footer {
margin:22px 16px 22px;
padding-top:16px;
border-top:1px solid var(--border);
font-family:var(--sans);
}
.bf-brand {
font-family:var(--serif); font-size:13px;
color:var(--gold-light); letter-spacing:0.06em;
margin-bottom:10px;
}
.bf-info { margin:0; }
.bf-line {
font-size:10.5px; line-height:1.7;
color:var(--paper-soft); word-break:keep-all;
}
.bf-k {
color:var(--mist); margin-right:5px; font-weight:400;
}
.bf-line .bf-sep,
.bf-links .bf-sep, .bf-copy .bf-sep {
color:var(--mist); opacity:0.4; margin:0 7px;
}
.bf-chip {
display:inline-block; margin-left:7px;
padding:1px 7px; font-size:9px;
color:var(--gold-light); text-decoration:none;
border:1px solid var(--border-strong); border-radius:3px;
vertical-align:middle;
}
.bf-chip:hover { background:rgba(201,151,58,0.1); }
.bf-sec-h {
font-size:11px; color:var(--mist-light);
letter-spacing:0.1em; font-weight:600;
margin:14px 0 6px;
}
.bf-note {
font-size:9.5px; color:var(--mist);
opacity:0.8; line-height:1.6;
margin:4px 0 8px;
}
.bf-btn {
display:inline-block; padding:6px 16px;
font-size:11px; color:var(--paper);
background:rgba(201,151,58,0.1);
border:1px solid var(--border-strong);
border-radius:5px; cursor:pointer;
font-family:inherit;
}
.bf-btn:hover { background:rgba(201,151,58,0.18); }
.bf-div {
height:1px; background:var(--border);
margin:14px 0;
}
.bf-links {
display:flex; flex-wrap:wrap; gap:9px;
font-size:10px;
}
.bf-links a {
color:var(--mist-light); text-decoration:none; cursor:pointer;
}
.bf-links a:hover { color:var(--gold-light); }
.bf-copy {
margin-top:9px; font-size:10px;
color:var(--mist); opacity:0.78;
letter-spacing:0.04em; line-height:1.6;
}
.pay-biz-info {
margin-top:16px; padding:10px 12px;
background:rgba(14,8,16,0.4);
border:1px solid var(--border);
border-radius:2px;
font-size:10px; color:var(--mist);
line-height:1.6;
letter-spacing:0.04em;
}
.pay-biz-info strong {
color:var(--paper-soft); font-weight:400;
}
.gnb {
position:fixed; left:50%; transform:translateX(-50%);
bottom:0; width:100%; max-width:440px;
height:60px;
background:rgba(14,8,16,0.94);
backdrop-filter:blur(12px);
border-top:1px solid var(--border);
display:flex; align-items:center;
z-index:40;
}
.gnb::before {
content:''; position:absolute;
top:0; left:15%; right:15%; height:1px;
background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.gnb-item {
flex:1; display:flex; flex-direction:column;
align-items:center; gap:3px;
padding:8px 0 6px;
background:transparent; border:none;
color:var(--mist); cursor:pointer;
font-family:var(--sans);
}
.gnb-item.active { color:var(--gold-light); }
.gnb-icon {
font-family:var(--serif);
font-size:15px; line-height:1; font-weight:500;
}
.gnb-lbl {
font-size:11px; letter-spacing:0.18em;
font-weight:300;
}
body[data-screen="landing"] .gnb,
body[data-screen="oauth"] .gnb,
body[data-screen="onboard"] .gnb { display:none; }
body[data-screen="landing"] .device,
body[data-screen="oauth"] .device,
body[data-screen="onboard"] .device { padding-bottom:0; }
body[data-screen="landing"] .v2-app-header,
body[data-screen="oauth"] .v2-app-header,
body[data-screen="onboard"] .v2-app-header { display:none; }
body[data-screen="landing"] .device,
body[data-screen="oauth"] .device,
body[data-screen="onboard"] .device { padding-top:0; }
body[data-screen="oauth"] #bizFooter,
body[data-screen="onboard"] #bizFooter { display:none; }
.modal-overlay {
position:fixed; inset:0;
background:rgba(0,0,0,0.7);
backdrop-filter:blur(4px);
display:none;
align-items:flex-end; justify-content:center;
z-index:1060;
}
.modal-overlay.open { display:flex; }
.legal-body {
overflow-y:auto;
font-size:12px;
line-height:1.75;
color:var(--paper-soft);
letter-spacing:0.01em;
padding:4px 2px 0;
flex:1;
}
.legal-body .legal-h2 {
font-size:14px;
font-weight:600;
color:var(--gold);
margin:18px 0 8px;
padding-bottom:5px;
border-bottom:1px solid rgba(201,151,58,0.18);
}
.legal-body .legal-h3 {
font-size:12.5px;
font-weight:600;
color:var(--paper);
margin:14px 0 6px;
}
.legal-body > :first-child { margin-top:0; }
.legal-body p { margin:0 0 10px; }
.legal-body strong { color:var(--paper); font-weight:600; }
.legal-body .legal-list {
margin:0 0 12px;
padding-left:18px;
}
.legal-body .legal-list li { margin:3px 0; }
.legal-body .legal-callout {
margin:0 0 14px;
padding:10px 12px;
background:rgba(201,151,58,0.07);
border-left:2px solid var(--gold);
border-radius:0 6px 6px 0;
color:var(--paper);
}
.legal-body .legal-hr {
border:0;
border-top:1px solid rgba(255,255,255,0.1);
margin:18px 0;
}
.legal-body .legal-table-wrap {
overflow-x:auto;
margin:0 0 14px;
-webkit-overflow-scrolling:touch;
}
.legal-body .legal-table {
width:100%;
border-collapse:collapse;
font-size:11.5px;
line-height:1.55;
}
.legal-body .legal-table th,
.legal-body .legal-table td {
padding:7px 9px;
text-align:left;
border:1px solid rgba(255,255,255,0.1);
vertical-align:top;
}
.legal-body .legal-table th {
background:rgba(201,151,58,0.1);
color:var(--gold);
font-weight:600;
white-space:nowrap;
}
.inquiry-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.inquiry-title { font-size:17px; font-weight:700; color:var(--paper); }
.inquiry-close { background:none; border:none; color:var(--paper-soft); font-size:18px; cursor:pointer; padding:4px 8px; line-height:1; }
.inquiry-field { display:block; margin-bottom:14px; }
.inquiry-flabel { display:block; font-size:12px; color:var(--paper-soft); margin-bottom:6px; letter-spacing:0.02em; }
.inquiry-flabel em { color:var(--paper-soft); opacity:0.7; font-style:normal; }
.inquiry-select, .inquiry-input, .inquiry-textarea {
width:100%; box-sizing:border-box;
background:var(--ink-2); border:1px solid var(--border-strong);
border-radius:10px; padding:11px 13px;
color:var(--paper); font-size:14px; font-family:inherit;
}
.inquiry-textarea { resize:vertical; min-height:108px; line-height:1.6; }
.inquiry-select:focus, .inquiry-input:focus, .inquiry-textarea:focus {
outline:none; border-color:var(--rose-light);
}
.inquiry-error { color:var(--rose-light); font-size:12px; min-height:16px; margin:2px 0 10px; }
.inquiry-submit {
width:100%; padding:14px; border:none; border-radius:12px;
background:var(--rose); color:var(--paper); font-size:15px; font-weight:700;
cursor:pointer; letter-spacing:0.02em;
}
.inquiry-submit:disabled { opacity:0.6; cursor:default; }
#confirm-dialog { z-index:1200; }
.modal {
width:100%; max-width:440px;
background:linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);
border:1px solid var(--border-strong);
border-bottom:none;
border-radius:16px 16px 0 0;
padding:24px 20px 30px;
animation:slideUp 0.3s ease-out;
position:relative;
max-height:90vh;
max-height:90dvh;
overflow-y:auto;
}
.modal::before {
content:''; position:absolute;
top:0; left:20%; right:20%; height:1px;
background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
@keyframes slideUp {
from { transform:translateY(100%); }
to   { transform:translateY(0); }
}
.modal-handle {
width:40px; height:3px; background:var(--mist);
opacity:0.3; border-radius:2px; margin:0 auto 20px;
}
.modal-close {
position:absolute; top:12px; right:12px;
width:32px; height:32px;
display:flex; align-items:center; justify-content:center;
background:transparent; border:none;
color:var(--mist); font-size:17px; line-height:1;
cursor:pointer; z-index:3;
transition:color 0.15s;
}
.modal-close:hover { color:var(--paper); }
.modal-eyebrow {
font-size:11px; letter-spacing:0.5em; color:var(--gold);
text-align:center; margin-bottom:10px;
}
.modal-title {
font-family:var(--serif); font-size:19px; font-weight:600;
color:var(--paper); text-align:center;
letter-spacing:0.08em; margin-bottom:8px; line-height:1.4;
}
.modal-sub {
font-size:12px; color:var(--mist-light);
text-align:center; letter-spacing:0.1em; margin-bottom:20px;
}
.modal-price-row {
display:flex; align-items:baseline; justify-content:center;
gap:6px; margin-bottom:22px;
}
.modal-price {
font-family:var(--serif); font-size:40px;
font-weight:700; color:var(--gold-light);
}
.modal-price-unit {
color:var(--mist); font-size:13px; letter-spacing:0.1em;
}
.modal-includes {
background:rgba(255,255,255,0.02);
border:1px solid var(--border);
border-radius:2px;
padding:14px 16px; margin-bottom:18px;
}
.modal-inc-row {
display:flex; align-items:center; gap:10px;
padding:5px 0;
font-size:12px; color:var(--paper); font-weight:300;
}
.modal-inc-row::before {
content:'✦'; color:var(--gold); font-size:11px; flex-shrink:0;
}
.modal-inc-row strong { color:var(--gold-light); font-weight:500; }
.modal-disclaimer {
font-size:11px; color:var(--mist);
letter-spacing:0.04em; line-height:1.7;
padding:10px 12px; margin-bottom:18px;
background:rgba(14,8,16,0.4);
border:1px solid var(--border);
border-radius:2px;
}
.pane-disclaimer {
font-size:11px;
color:var(--mist);
text-align:center;
padding:16px 12px 24px;
line-height:1.5;
border-top:1px solid rgba(255,255,255,0.06);
margin-top:16px;
letter-spacing:0.04em;
}
.ai-sheet-disclaimer {
position:sticky;
bottom:0;
background:var(--ink);
color:var(--mist);
font-size:11px;
text-align:center;
padding:10px 14px;
border-top:1px solid rgba(255,255,255,0.06);
z-index:2;
letter-spacing:0.04em;
}
.modal-disclaimer .more {
color:var(--gold-light); cursor:pointer;
margin-left:6px; text-decoration:underline;
}
.modal-consents {
margin-bottom:18px;
}
.modal-policy-links {
font-size:11px; color:var(--mist);
letter-spacing:0.03em; line-height:1.7;
margin-bottom:18px;
}
.modal-policy-links a {
color:var(--gold-light); cursor:pointer;
text-decoration:underline; text-underline-offset:2px;
}
.modal-consent {
display:flex; gap:10px; align-items:flex-start;
padding:10px 12px; margin-bottom:6px;
background:rgba(255,255,255,0.02);
border:1px solid var(--border);
border-radius:2px;
cursor:pointer;
}
.modal-consent input {
accent-color:var(--gold);
margin-top:2px;
width:14px; height:14px;
flex-shrink:0;
}
.modal-consent .text {
font-size:12px; color:var(--paper-soft);
letter-spacing:0.04em; line-height:1.65;
}
.modal-consent .req {
color:var(--rose-light); font-weight:500;
margin-right:4px;
}
.modal-consent .opt {
color:var(--mist); margin-right:4px;
}
.modal-consent.short-expiry .req {
color:var(--gold-light);
}
.modal-pay-btn {
width:100%; padding:15px;
background:#3182f6;
border:none; color:white;
border-radius:3px;
font-size:13px; font-weight:500;
letter-spacing:0.2em; cursor:pointer;
margin-bottom:10px;
font-family:var(--sans);
}
.modal-pay-btn:disabled {
background:rgba(49,130,246,0.3);
cursor:not-allowed;
}
.modal-pay-btn.modal-apply {
background:rgba(201,151,58,0.18);
color:var(--gold-light);
border:1px solid var(--border-strong);
margin-top:16px;
}
.modal-pay-btn.modal-apply:disabled {
background:rgba(201,151,58,0.06);
color:var(--mist);
cursor:not-allowed;
}
.modal-cancel {
width:100%; padding:10px;
background:transparent; border:none;
color:var(--mist);
font-size:12px; letter-spacing:0.14em;
cursor:pointer; font-family:var(--sans);
}
.modal-foot {
font-size:11px; color:var(--mist);
text-align:center; letter-spacing:0.08em;
margin-top:4px; opacity:0.7; line-height:1.6;
}
.modal-paid-success {
text-align:center; padding:8px 0 4px;
}
.modal-paid-icon {
width:54px; height:54px;
border-radius:50%;
background:rgba(126,196,172,0.12);
border:1px solid rgba(126,196,172,0.5);
color:var(--jade-light);
font-size:22px;
display:flex; align-items:center; justify-content:center;
margin:0 auto 16px;
}
.modal-paid-title {
font-family:var(--serif); font-size:18px;
color:var(--paper); letter-spacing:0.08em;
margin-bottom:18px;
}
.modal-paid-refund {
padding:14px 16px;
background:rgba(201,151,58,0.06);
border:1px solid var(--border-strong);
border-radius:3px;
margin-bottom:18px;
text-align:left;
}
.modal-paid-refund .head {
font-size:11px; color:var(--gold);
letter-spacing:0.18em; margin-bottom:8px;
}
.modal-paid-refund .body {
font-size:11px; color:var(--paper-soft);
line-height:1.75;
}
.modal-paid-refund .timer {
margin-top:10px;
display:flex; gap:10px; align-items:center;
}
.modal-paid-refund .refund-btn {
flex:1; padding:8px;
background:rgba(201,151,58,0.1);
border:1px solid var(--border-strong);
color:var(--gold-light);
border-radius:2px;
font-size:11px; letter-spacing:0.16em;
cursor:pointer;
}
.modal-paid-refund .timer-text {
font-size:11px; color:var(--mist);
letter-spacing:0.14em;
font-family:var(--serif);
}
.modal-paid-cta {
width:100%; padding:14px;
background:var(--gold); color:var(--ink);
border:none; border-radius:3px;
font-size:13px; font-weight:700;
letter-spacing:0.2em; cursor:pointer;
font-family:var(--sans);
}
.pay-widget-overlay {
position:fixed;
top:0; bottom:0;
left:50%; transform:translateX(-50%);
width:100%; max-width:440px;
background:var(--ink);
z-index:1100;
display:none;
flex-direction:column;
box-shadow:0 0 100px rgba(0,0,0,0.8);
}
.pay-widget-overlay.open { display:flex; }
.pay-widget-overlay.open::before {
content:''; position:fixed; inset:0; z-index:-1;
background:rgba(4,2,12,0.85);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
}
.pay-widget-header {
padding:14px 16px;
background:rgba(14,8,16,0.95);
backdrop-filter:blur(12px);
border-bottom:1px solid var(--border);
display:flex; align-items:center; gap:12px;
flex-shrink:0;
}
.pay-widget-header .back {
font-size:18px; color:var(--mist-light);
cursor:pointer; padding:4px 8px 4px 0;
}
.pay-widget-header .title {
flex:1; font-family:var(--serif);
font-size:14px; color:var(--paper);
letter-spacing:0.1em;
}
.pay-widget-header .amount {
font-family:var(--serif);
font-size:15px; color:var(--gold-light);
letter-spacing:0.04em;
}
.pay-widget-body {
flex:1; overflow-y:auto;
padding:18px 16px 100px;
}
.pay-widget-info {
padding:12px 14px; margin-bottom:18px;
background:rgba(201,151,58,0.06);
border:1px solid var(--border-strong);
border-radius:3px;
font-size:11px; color:var(--paper-soft);
letter-spacing:0.04em; line-height:1.7;
}
.pay-widget-info::before { content:'🔒 '; }
.pay-widget-section {
padding:18px 14px;
background:rgba(255,255,255,0.02);
border:1px solid var(--border);
border-radius:3px;
margin-bottom:14px;
min-height:120px;
}
.pay-widget-section .label {
font-size:11px; color:var(--gold);
letter-spacing:0.22em; margin-bottom:14px;
}
.pay-widget-section .placeholder {
text-align:center; padding:30px 16px;
font-size:12px; color:var(--mist);
letter-spacing:0.08em; line-height:1.7;
}
.pg-agree-master {
display:flex; gap:10px; align-items:flex-start;
padding:10px 12px;
background:rgba(255,255,255,0.02);
border:1px solid var(--border);
border-radius:2px;
}
.pg-agree-master input {
accent-color:var(--gold);
margin-top:2px; width:14px; height:14px;
flex-shrink:0; cursor:pointer;
}
.pg-agree-text {
flex:1; font-size:12px; color:var(--paper-soft);
letter-spacing:0.04em; line-height:1.65; cursor:pointer;
}
.pg-agree-text .pg-req {
color:var(--rose-light); font-weight:500; margin-right:4px;
}
.pg-agree-toggle {
flex-shrink:0; background:none; border:none; padding:0;
color:var(--gold-light); font-family:var(--sans);
font-size:11px; text-decoration:underline; text-underline-offset:2px;
cursor:pointer;
}
.pg-agree-list {
list-style:none; margin:8px 0 0; padding:0 0 0 24px;
display:flex; flex-direction:column; gap:8px;
}
.pg-agree-list[hidden] { display:none; }
.pg-agree-list a {
display:flex; align-items:center; justify-content:space-between;
gap:8px; font-size:12px; color:var(--paper-soft);
text-decoration:none; letter-spacing:0.03em;
}
.pg-agree-list a:hover { text-decoration:underline; }
.pg-agree-list .pg-arrow { color:var(--mist); font-size:14px; line-height:1; }
.pay-widget-pay-btn:disabled { opacity:0.45; cursor:not-allowed; }
.pay-widget-footer {
position:absolute; bottom:0; left:0; right:0;
padding:14px 16px calc(24px + env(safe-area-inset-bottom));
background:rgba(14,8,16,0.95);
backdrop-filter:blur(12px);
border-top:1px solid var(--border);
}
.pay-widget-pay-btn {
width:100%; padding:15px;
background:#3182f6;
border:none; color:white;
border-radius:3px;
font-size:13px; font-weight:500;
letter-spacing:0.2em; cursor:pointer;
font-family:var(--sans);
}
.ai-bottom-sheet {
position:fixed; left:50%; transform:translateX(-50%) translateY(100%);
bottom:0; width:100%; max-width:440px;
height:88vh;
height:88dvh;
background:linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);
border-top-left-radius:16px;
border-top-right-radius:16px;
border:1px solid var(--border-strong);
border-bottom:none;
z-index:1050;
transition:transform 0.3s ease;
display:flex; flex-direction:column;
}
.ai-bottom-sheet.open {
transform:translateX(-50%) translateY(0);
}
.ai-bottom-sheet::before {
content:''; position:absolute;
top:0; left:20%; right:20%; height:1px;
background:linear-gradient(90deg, transparent, var(--rose-light), transparent);
}
.abs-handle {
width:40px; height:3px; background:var(--mist);
opacity:0.3; border-radius:2px;
margin:10px auto 8px;
flex-shrink:0;
}
.abs-header {
padding:8px 16px 14px;
border-bottom:1px solid var(--border);
display:flex; align-items:center; gap:12px;
flex-shrink:0;
}
.abs-title {
flex:1;
font-family:var(--serif); font-size:14px;
color:var(--paper); letter-spacing:0.1em;
}
.abs-turns {
font-size:11px; color:var(--rose-light);
letter-spacing:0.14em; font-family:var(--serif);
padding:4px 10px;
background:rgba(232,160,168,0.1);
border:1px solid rgba(232,160,168,0.3);
border-radius:999px;
}
.abs-close {
font-size:20px; color:var(--mist-light);
cursor:pointer; padding:4px 8px;
}
.abs-mode-toggle {
display:flex; padding:10px 16px;
gap:6px; flex-shrink:0;
border-bottom:1px solid var(--border);
}
.abs-mode-btn {
flex:1; padding:8px;
background:rgba(255,255,255,0.02);
border:1px solid var(--border);
color:var(--mist);
border-radius:2px;
font-size:12px; letter-spacing:0.14em;
cursor:pointer; font-family:var(--sans);
}
.abs-mode-btn.active {
background:rgba(232,160,168,0.1);
border-color:rgba(232,160,168,0.4);
color:var(--rose-light);
}
.abs-body {
flex:1; overflow-y:auto;
padding:16px;
}
.abs-analyze .stream-text {
font-size:13px; color:var(--paper);
line-height:1.95;
letter-spacing:0.02em;
white-space:pre-wrap;
}
.abs-analyze .stream-text strong { color:var(--gold-light); }
.abs-analyze .stream-cursor {
display:inline-block; width:2px; height:14px;
background:var(--rose-light); vertical-align:middle;
animation:blink 0.8s steps(2) infinite;
margin-left:2px;
}
@keyframes blink { 50% { opacity:0; } }
.abs-analyze .stream-actions {
display:flex; gap:8px; margin-top:18px;
padding-top:14px;
border-top:1px dashed var(--border);
}
.abs-analyze .stream-actions button {
flex:1; padding:10px;
background:rgba(255,255,255,0.02);
border:1px solid var(--border);
color:var(--paper-soft);
border-radius:2px;
font-size:11px; letter-spacing:0.14em;
cursor:pointer; font-family:var(--sans);
}
.abs-chat .msgs {
display:flex; flex-direction:column; gap:10px;
}
.chat-msg {
max-width:80%; padding:10px 12px;
border-radius:8px;
font-size:12.5px; line-height:1.7;
letter-spacing:0.02em;
}
.chat-msg.ai {
align-self:flex-start;
background:rgba(232,160,168,0.08);
border:1px solid rgba(232,160,168,0.25);
color:var(--paper);
}
.chat-msg.user {
align-self:flex-end;
background:rgba(201,151,58,0.1);
border:1px solid var(--border-strong);
color:var(--paper);
}
.abs-input-wrap {
padding:10px 14px env(safe-area-inset-bottom);
border-top:1px solid var(--border);
background:rgba(14,8,16,0.95);
flex-shrink:0;
display:flex; gap:8px; align-items:center;
}
.abs-input {
flex:1; padding:10px 12px;
background:rgba(255,255,255,0.04);
border:1px solid var(--border);
color:var(--paper);
border-radius:6px;
font-size:16px;
font-family:var(--sans);
}
.abs-input:focus {
outline:none; border-color:var(--border-strong);
}
.abs-send {
padding:10px 16px;
background:var(--rose);
border:none; color:white;
border-radius:6px;
font-size:12px; letter-spacing:0.14em;
cursor:pointer; font-family:var(--sans);
}
.pay-banner-paid { display:none; }
body:not(.paid-calc):not(.has-ai-turns) .ai-pass-strip { display:none; }
body.paid-calc .pay-banner { display:none; }
body.paid-calc .pay-mini-sticky { display:none; }
body:not(.has-ai-turns) .ai-card .ai-cta-btn { opacity:0.65; }
body:not(.has-ai-turns) .ai-whisper-card .aw-cta { opacity:0.65; }
.aps-self-only, .aps-pass-only, .aps-both { display:none; }
body.paid-calc:not(.has-ai-turns) .aps-self-only { display:inline; }
body.has-ai-turns:not(.paid-calc) .aps-pass-only { display:inline; }
body.paid-calc.has-ai-turns .aps-both { display:inline; }
body.anon .auth-only { display:none; }
body:not(.anon) .anon-only { display:none; }
body:not(.modal-paid-mode) .modal-paid-success { display:none; }
body.modal-paid-mode .modal-step-info,
body.modal-paid-mode .modal-consents,
body.modal-paid-mode .modal-pay-btn,
body.modal-paid-mode .modal-cancel,
body.modal-paid-mode .modal-disclaimer,
body.modal-paid-mode .modal-includes,
body.modal-paid-mode .modal-price-row,
body.modal-paid-mode .modal-sub,
body.modal-paid-mode .modal-title,
body.modal-paid-mode .modal-eyebrow { display:none; }
body:not(.pay-mode-ai_pass) .modal-consent.short-expiry { display:none; }
body.pay-mode-ai_pass .modal-consent.calc-only { display:none; }
body:not(.pay-mode-ai_pass) .modal-ai-sku { display:none; }
body.pay-mode-ai_pass .modal-includes { display:none; }
body.pay-mode-ai_pass .modal-eyebrow { display:none; }
.modal-ai-sku {
margin:14px 0 18px;
padding:14px 14px 8px;
border:1px solid rgba(201,151,58,0.2);
border-radius:6px;
background:rgba(14,8,16,0.5);
}
.modal-ai-sku-label {
font-family:var(--serif); font-size:11px; letter-spacing:0.18em;
color:var(--gold-light); margin-bottom:10px;
}
.ai-sku-opt {
display:flex; gap:10px; align-items:flex-start;
padding:11px 12px; margin-bottom:6px;
border:1px solid rgba(201,151,58,0.18);
border-radius:4px;
cursor:pointer;
transition:border-color 0.15s, background 0.15s;
}
.ai-sku-opt:has(input:checked) {
border-color:var(--gold);
background:linear-gradient(90deg, rgba(201,151,58,0.12) 0%, rgba(14,8,16,0.4) 100%);
}
.ai-sku-opt input[type="radio"] {
margin-top:3px; flex-shrink:0;
accent-color:var(--gold);
}
.ai-sku-body {
flex:1; display:flex; align-items:baseline; gap:8px;
}
.ai-sku-body strong { font-family:var(--serif); font-size:16px; color:var(--gold-light); }
.ai-sku-unit { font-size:12px; color:var(--mist); letter-spacing:0.02em; }
.ai-sku-end {
margin-left:auto; flex-shrink:0;
display:flex; align-items:baseline; gap:6px;
}
.ai-sku-price { font-family:var(--serif); font-size:14px; color:var(--ivory); }
.ai-sku-tag {
font-size:10px; letter-spacing:0.08em;
padding:1px 6px; border-radius:2px;
background:var(--gold); color:var(--ink);
font-weight:700;
}
.ai-sku-tag.is-best {
background:var(--rose-light); color:var(--ink);
}
.welcome-gift-overlay {
position:fixed; inset:0;
background:rgba(14,8,16,0.85);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
display:flex; align-items:center; justify-content:center;
opacity:0; pointer-events:none;
transition:opacity 0.3s;
z-index:200;
}
.welcome-gift-overlay.open {
opacity:1; pointer-events:auto;
}
.welcome-gift-modal {
width:88%; max-width:340px;
padding:28px 24px 22px;
background:linear-gradient(180deg, rgba(36,24,42,0.98) 0%, rgba(20,12,24,0.98) 100%);
border:1px solid rgba(201,151,58,0.35);
border-radius:8px;
text-align:center;
box-shadow:0 24px 80px rgba(0,0,0,0.7), 0 0 40px rgba(201,151,58,0.08);
transform:scale(0.92) translateY(10px);
transition:transform 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.welcome-gift-overlay.open .welcome-gift-modal {
transform:scale(1) translateY(0);
}
.wg-sparkle {
font-size:22px; color:var(--gold-light);
letter-spacing:0.5em; margin-bottom:6px;
animation:wg-sparkle-pulse 2s ease-in-out infinite;
}
@keyframes wg-sparkle-pulse {
0%, 100% { opacity:0.5; transform:scale(1); }
50% { opacity:1; transform:scale(1.1); }
}
.wg-headline {
font-family:var(--serif); font-size:30px;
color:var(--gold-light); letter-spacing:0.18em;
margin-bottom:6px;
}
.wg-sub {
font-size:12.5px; color:var(--mist);
letter-spacing:0.06em; margin-bottom:22px;
}
.wg-gift-box {
margin:0 auto 18px;
padding:18px 14px;
background:linear-gradient(135deg, rgba(201,151,58,0.18) 0%, rgba(232,160,168,0.1) 100%);
border:1px solid rgba(201,151,58,0.4);
border-radius:6px;
}
.wg-gift-icon {
font-size:36px; line-height:1; margin-bottom:8px;
}
.wg-gift-title {
font-family:var(--serif); font-size:18px;
color:var(--ivory); margin-bottom:4px;
}
.wg-gift-title strong { color:var(--gold-light); }
.wg-gift-meta {
font-size:11.5px; color:var(--mist);
letter-spacing:0.06em;
}
.wg-body {
font-size:13.5px; color:var(--ivory);
line-height:1.7; margin-bottom:20px;
}
.wg-cta-primary {
width:100%; padding:13px;
background:var(--gold); color:var(--ink);
border:none; border-radius:4px;
font-family:var(--serif); font-size:14px; font-weight:700;
letter-spacing:0.12em; cursor:pointer;
transition:opacity 0.15s;
margin-bottom:6px;
}
.wg-cta-primary:hover { opacity:0.88; }
.wg-cta-text {
width:100%; padding:8px;
background:none; border:none;
color:var(--mist); font-size:12px;
letter-spacing:0.04em; cursor:pointer;
text-decoration:underline; text-decoration-color:rgba(180,167,180,0.3);
}
.wg-cta-text:hover { color:var(--ivory); }
.gift-countdown-strip {
position:fixed; top:0; left:50%;
transform:translateX(-50%) translateY(-100%);
width:100%; max-width:430px;
padding:9px 14px;
background:linear-gradient(90deg, rgba(201,151,58,0.95) 0%, rgba(232,160,168,0.92) 100%);
color:var(--ink);
display:flex; align-items:center; gap:10px;
font-size:12px; letter-spacing:0.04em;
font-weight:600;
transition:transform 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
z-index:90;
box-shadow:0 4px 16px rgba(0,0,0,0.3);
}
body.has-welcome-gift .gift-countdown-strip {
transform:translateX(-50%) translateY(0);
z-index:95;
}
body.has-welcome-gift .v2-app-header {
top: 44px;
}
body.has-welcome-gift .device {
padding-top: 92px;
}
.gift-countdown-strip span { flex:1; }
.gcs-cta {
background:var(--ink); color:var(--gold-light);
border:none; padding:5px 11px; border-radius:3px;
font-size:11px; letter-spacing:0.08em; font-weight:600;
cursor:pointer;
}
.gcs-cta:hover { background:#000; }
body.pay-self-required .modal-step-info,
body.pay-self-required .modal-consents,
body.pay-self-required .modal-pay-btn,
body.pay-self-required .modal-disclaimer,
body.pay-self-required .modal-includes,
body.pay-self-required .modal-price-row { display:none; }
body:not(.pay-self-required) .pay-self-required-block { display:none; }
body:not(.has-pairs) .rn-btn.compat-tab { display:none; }
.landing {
min-height:100vh;
padding:60px 24px 40px;
display:flex; flex-direction:column;
justify-content:space-between;
text-align:center;
}
.landing-star {
font-family:var(--serif);
font-size:36px; color:var(--gold-light);
margin-bottom:20px;
}
.landing-eyebrow {
font-size:11px; color:var(--gold);
letter-spacing:0.5em; margin-bottom:18px;
font-family:var(--serif);
}
.landing-title {
font-family:var(--serif);
font-size:34px; color:var(--paper);
font-weight:700; line-height:1.45;
letter-spacing:0.08em; margin-bottom:14px;
}
.landing-sub {
font-size:13px; color:var(--mist-light);
letter-spacing:0.12em; line-height:1.85;
margin-bottom:36px;
}
.landing-features {
display:flex; flex-direction:column;
gap:10px; margin-bottom:36px;
}
.landing-feature {
padding:13px 16px;
background:rgba(255,255,255,0.03);
border:1px solid var(--border);
border-radius:2px;
font-size:12px; color:var(--paper);
letter-spacing:0.06em;
text-align:left;
display:flex; align-items:center; gap:12px;
}
.landing-feature .lf-icon {
flex-shrink:0;
width:28px; height:28px;
display:flex; align-items:center; justify-content:center;
font-family:var(--serif);
font-size:16px; font-weight:700;
color:var(--gold-light);
border:1px solid var(--border-strong);
border-radius:50%;
background:rgba(201,151,58,0.06);
}
.landing-feature strong {
color:var(--gold-light); font-weight:500;
font-family:var(--serif); font-size:13px;
flex-shrink:0; min-width:54px;
}
.landing-feature .lf-desc {
font-size:11px; color:var(--mist-light);
line-height:1.55;
flex:1; min-width:0;
word-break:keep-all;
}
.landing-feature .desc {
font-size:11px; color:var(--mist-light);
line-height:1.55;
flex:1; min-width:0;
word-break:keep-all;
}
.kakao-btn {
width:100%; padding:16px;
background:#fee500; border:none;
color:#191919; border-radius:3px;
font-size:14px; font-weight:700;
letter-spacing:0.1em; cursor:pointer;
margin-bottom:14px;
font-family:var(--sans);
}
.landing-free-btn {
width:100%; padding:16px;
background:var(--gold); border:none;
color:var(--ink); border-radius:3px;
font-size:14px; font-weight:700;
letter-spacing:0.14em; cursor:pointer;
font-family:var(--sans);
}
.landing-free-hint {
text-align:center; color:var(--mist);
font-size:12px; letter-spacing:0.06em;
margin:10px 0 18px;
}
.kakao-btn.kakao-btn-sub {
padding:12px; font-size:13px;
letter-spacing:0.06em;
margin-bottom:10px;
}
.anon-link-btn {
background:transparent; border:none;
color:var(--gold-light);
font-size:13px; letter-spacing:0.14em;
cursor:pointer;
padding:12px;
font-family:var(--sans);
display:inline-flex; align-items:center; gap:6px;
margin:0 auto 18px;
}
.anon-link-btn:hover { color:var(--gold); }
.anon-link-btn .arr { font-family:var(--serif); }
.landing-foot-list {
margin-bottom:14px;
display:flex; flex-direction:column; gap:5px;
}
.landing-foot-list .item {
font-size:11px; color:var(--mist);
letter-spacing:0.06em;
line-height:1.6;
}
.landing-foot-list .item::before { content:'· '; color:var(--gold-dim); }
.landing-foot {
font-size:11px; color:var(--mist);
letter-spacing:0.12em; opacity:0.7;
}
.oauth-loading {
min-height:100vh;
display:flex; flex-direction:column;
align-items:center; justify-content:center;
text-align:center; padding:40px 24px;
}
.oauth-spinner {
width:48px; height:48px;
border:2px solid var(--border);
border-top-color:var(--gold);
border-radius:50%;
animation:spin 0.9s linear infinite;
margin-bottom:24px;
}
@keyframes spin { to { transform:rotate(360deg); } }
.oauth-text {
font-family:var(--serif); font-size:15px;
color:var(--paper); letter-spacing:0.18em;
margin-bottom:8px;
}
.oauth-sub {
font-size:11px; color:var(--mist);
letter-spacing:0.14em;
}
.home-hero {
padding:32px 20px 28px;
text-align:center;
background:radial-gradient(ellipse at top, rgba(201,151,58,0.12) 0%, transparent 65%);
border-bottom:1px solid var(--border);
}
.home-date {
font-size:11px; color:var(--gold);
letter-spacing:0.5em; margin-bottom:14px;
font-family:var(--serif);
}
.home-greet {
font-family:var(--serif); font-size:15px;
color:var(--mist-light); letter-spacing:0.08em;
margin-bottom:18px;
}
.home-greet strong { color:var(--paper); font-weight:700; }
.hero-card {
width:200px; height:300px;
margin:0 auto 18px;
background:linear-gradient(180deg, rgba(201,151,58,0.14) 0%, rgba(14,8,16,0.8) 100%);
border:1px solid var(--border-strong);
border-radius:10px;
padding:12px 10px 8px;
display:flex; flex-direction:column;
align-items:center; justify-content:flex-start; gap:4px;
cursor:pointer;
box-shadow:0 10px 40px rgba(0,0,0,0.5), 0 0 30px rgba(201,151,58,0.15);
position:relative;
transition:transform 0.3s, background 0.3s;
overflow:hidden;
}
.hero-card[data-oh="wood"]  { background:linear-gradient(160deg,#1a3d1a 0%,#0d2010 60%,#060f06 100%); }
.hero-card[data-oh="fire"]  { background:linear-gradient(160deg,#3d1a1a 0%,#200d0d 60%,#0f0606 100%); }
.hero-card[data-oh="earth"] { background:linear-gradient(160deg,#3d2e1a 0%,#20180d 60%,#0f0c06 100%); }
.hero-card[data-oh="metal"] { background:linear-gradient(160deg,#1a2a3d 0%,#0d1520 60%,#06090f 100%); }
.hero-card[data-oh="water"] { background:linear-gradient(160deg,#1a2a3d 0%,#0d1a2a 60%,#060f1e 100%); }
.hero-card:hover { transform:translateY(-4px); }
.hero-card::before {
content:''; position:absolute;
top:0; left:20%; right:20%; height:1px;
background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.hc-meta-top {
font-family:var(--serif);
font-size:11px; color:var(--gold-light);
letter-spacing:0.4em; margin-top:2px;
}
.hc-img {
width:160px; height:160px;
object-fit:contain;
filter:drop-shadow(0 0 20px rgba(201,151,58,0.3));
}
.hc-ilju {
font-family:var(--serif); font-size:18px;
color:var(--paper); font-weight:700;
letter-spacing:0.18em; margin-top:2px;
text-align:center;
}
.hc-ilju small {
display:block; font-size:10px;
color:var(--mist); letter-spacing:0.16em;
margin-top:3px; font-family:var(--sans); font-weight:300;
}
.hc-meta-bot {
font-family:var(--serif);
font-size:10px; color:var(--mist);
letter-spacing:0.28em; margin-top:1px;
}
.hc-click-hint {
position:absolute; bottom:6px; right:10px;
font-size:9px; color:var(--gold);
letter-spacing:0.18em; text-transform:uppercase;
padding:2px 6px;
background:rgba(201,151,58,0.12);
border:1px solid rgba(201,151,58,0.3);
border-radius:2px;
animation:pulseHint 2s ease-in-out infinite;
}
@keyframes pulseHint {
0%, 100% { opacity:0.7; transform:scale(1); }
50% { opacity:1; transform:scale(1.05); }
}
.home-headline {
font-family:var(--serif);
font-size:20px; color:var(--paper);
font-weight:600; margin:6px 0;
letter-spacing:0.1em; line-height:1.5;
}
.home-sub {
font-size:11px; color:var(--mist);
letter-spacing:0.14em;
}
.score-hero {
margin:14px 16px;
padding:18px 18px 14px;
background:linear-gradient(180deg, rgba(201,151,58,0.08) 0%, rgba(14,8,16,0.5) 100%);
border:1px solid var(--border-strong);
border-radius:6px;
}
.score-time-tabs {
display:flex; gap:4px;
margin-bottom:14px;
}
.score-time-tabs button {
flex:1; padding:8px 4px;
background:rgba(255,255,255,0.02);
border:1px solid var(--border);
border-radius:2px;
color:var(--mist);
font-size:11px; letter-spacing:0.1em;
cursor:pointer; font-family:var(--sans);
transition:all 0.15s;
}
.score-time-tabs button.active {
background:rgba(201,151,58,0.12);
border-color:rgba(201,151,58,0.4);
color:var(--gold-light);
}
.score-main {
text-align:center; padding:6px 0 12px;
}
.score-num {
font-family:var(--serif);
font-size:62px; font-weight:700;
line-height:1; letter-spacing:0.02em;
color:var(--gold-light);
}
.score-num[data-tier="S+"], .score-num[data-tier="S"] { color:var(--gold-light); }
.score-num[data-tier="A"] { color:var(--paper); }
.score-num[data-tier="B"] { color:var(--mist-light); }
.score-num[data-tier="C"], .score-num[data-tier="D"] { color:var(--mist); }
.score-num[data-tier="F"] { color:var(--rose-light); }
.score-tier-label {
font-family:var(--serif); font-size:13px;
color:var(--gold); margin-top:6px;
letter-spacing:0.18em;
}
.score-narrative {
font-size:12px; color:var(--mist-light);
margin-top:12px; line-height:1.7;
letter-spacing:0.04em;
}
.score-narrative .sn-reason {
color:var(--ivory); margin-bottom:4px;
}
.score-narrative .sn-do {
color:#7DD3A0;
}
.score-narrative .sn-dont {
color:#E89090;
}
.score-breakdown {
margin-top:10px; padding-top:10px;
border-top:1px dashed rgba(255,255,255,0.08);
font-size:11px;
}
.score-breakdown summary {
cursor:pointer; color:var(--mist);
letter-spacing:0.14em;
list-style:none; padding:4px 0;
text-align:center;
}
.score-breakdown summary::-webkit-details-marker { display:none; }
.score-breakdown summary::before { content:'▾ '; margin-right:4px; }
.score-breakdown[open] summary::before { content:'▴ '; }
.score-breakdown ul {
list-style:none; padding:8px 4px 0; margin:0;
}
.score-breakdown li {
display:flex; justify-content:space-between;
padding:4px 0;
color:var(--mist-light);
}
.score-breakdown li b {
font-family:var(--serif); color:var(--jade-light);
font-weight:600;
}
.score-rationale .rationale-meta {
margin:8px 4px 12px; padding:10px 12px;
background:rgba(14,8,16,0.5);
border-left:2px solid rgba(201,151,58,0.3);
border-radius:0 3px 3px 0;
}
.score-rationale .rationale-row {
display:flex; gap:8px;
padding:3px 0;
font-size:11px;
}
.score-rationale .rationale-key {
flex-shrink:0; width:64px;
color:var(--mist); letter-spacing:0.06em;
}
.score-rationale .rationale-val {
color:var(--ivory); font-family:var(--serif);
letter-spacing:0.04em;
}
.score-rationale .rationale-table-label {
font-size:10.5px; color:var(--mist);
letter-spacing:0.12em;
padding:0 4px 4px;
border-bottom:1px dashed rgba(255,255,255,0.06);
margin-bottom:4px;
}
.score-rationale li.rationale-base {
border-top:1px dashed rgba(255,255,255,0.08);
padding-top:6px; margin-top:4px;
color:var(--mist);
}
.score-rationale li.rationale-total {
margin-top:4px; padding-top:6px;
border-top:1px solid rgba(201,151,58,0.3);
font-family:var(--serif);
}
.score-rationale li.rationale-total span,
.score-rationale li.rationale-total b {
color:var(--gold-light); font-size:13px;
}
.score-area-row {
display:grid; grid-template-columns:repeat(4,1fr);
gap:8px;
margin:8px 16px 14px;
}
.area-cell {
padding:12px 6px 10px;
background:rgba(255,255,255,0.03);
border:1px solid var(--border);
border-radius:3px;
text-align:center;
cursor:pointer;
transition:all 0.15s;
}
.area-cell:hover {
background:rgba(201,151,58,0.06);
border-color:rgba(201,151,58,0.3);
}
.area-cell .area-icon {
display:block; font-size:18px; margin-bottom:4px;
}
.area-cell .area-label {
display:block; font-size:10px; color:var(--mist);
letter-spacing:0.18em; margin-bottom:4px;
}
.area-cell .area-score {
display:block; font-family:var(--serif);
font-size:22px; font-weight:700;
color:var(--paper);
line-height:1.1;
}
.aspect-section-head {
display:none;
}
.jobs-list {
display:flex; flex-direction:column; gap:8px;
}
.job-row {
padding:11px 13px;
background:rgba(255,255,255,0.025);
border:1px solid var(--border);
border-left:3px solid var(--gold-dim);
border-radius:2px;
transition:all 0.15s;
}
.job-row:nth-child(1) { border-left-color:var(--gold-light); background:rgba(201,151,58,0.08); }
.job-row:nth-child(2), .job-row:nth-child(3) { border-left-color:var(--gold); }
.job-row-head {
display:flex; justify-content:space-between; align-items:center;
margin-bottom:5px;
}
.job-rank {
display:inline-block; min-width:22px;
font-family:var(--serif); font-size:11px;
color:var(--gold); margin-right:6px;
text-align:center; font-weight:600;
}
.job-name {
font-family:var(--serif); font-size:13px;
color:var(--paper); font-weight:600;
letter-spacing:0.04em;
}
.job-score {
display:flex; gap:8px; align-items:center;
}
.job-score-num {
font-family:var(--serif); font-size:14px;
color:var(--gold-light); font-weight:700;
}
.job-stars {
color:var(--gold); font-size:11px; letter-spacing:0.04em;
}
.job-reasons {
font-size:10.5px; color:var(--mist);
letter-spacing:0.04em; line-height:1.6;
padding-left:28px;
}
.share-bar {
margin:18px 0 8px;
padding:18px 16px 14px;
background:rgba(14,8,16,0.4);
border:1px solid var(--border);
border-radius:3px;
text-align:center;
}
.sb-eyebrow {
font-size:10px; color:var(--gold);
letter-spacing:0.4em; margin-bottom:14px;
}
.sb-actions {
display:flex; flex-direction:column; gap:8px;
}
.sb-btn {
padding:11px 16px;
background:#fee500;
border:none; border-radius:3px;
color:#191919; font-weight:700;
font-size:12px; letter-spacing:0.06em;
cursor:pointer; font-family:var(--sans);
}
.sb-btn.secondary {
background:transparent;
border:1px solid var(--border-strong);
color:var(--gold-light);
font-weight:500;
}
.sb-foot {
font-size:10px; color:var(--mist);
letter-spacing:0.06em; margin-top:10px;
}
.share-full-btn {
display:block; width:100%; margin-top:8px;
}
.share-card-cta + .share-full-btn { margin-top:10px; }
.ziwei-warning {
margin:14px 16px;
padding:12px 14px;
background:rgba(232,160,168,0.08);
border:1px solid rgba(232,160,168,0.3);
border-radius:3px;
font-size:11px; color:var(--rose-light);
line-height:1.7; letter-spacing:0.04em;
}
.ziwei-intro-card {
background:linear-gradient(180deg, rgba(74,124,106,0.05) 0%, rgba(14,8,16,0.5) 100%);
border:1px solid rgba(74,124,106,0.2);
}
.ziwei-intro-12gung {
margin-top:14px;
}
.zig-title, .zic-title {
font-size:11px; color:var(--gold);
letter-spacing:0.18em; margin-bottom:10px;
text-align:center;
}
.zig-grid {
display:grid; grid-template-columns:repeat(4,1fr);
gap:6px;
}
.zig-cell {
padding:8px 4px;
background:rgba(255,255,255,0.03);
border:1px solid var(--border);
border-radius:2px;
text-align:center;
font-size:10px; color:var(--mist-light);
letter-spacing:0.06em;
}
.zig-cell span {
display:block; font-size:14px; margin-bottom:3px;
}
.ziwei-intro-compare {
margin-top:18px; padding-top:14px;
border-top:1px dashed rgba(255,255,255,0.06);
}
.zic-table {
background:rgba(0,0,0,0.2);
border:1px solid var(--border);
border-radius:2px;
}
.zic-row {
display:grid; grid-template-columns:1fr 1.4fr 1.4fr;
font-size:11px; padding:8px 10px;
}
.zic-row + .zic-row { border-top:1px dashed rgba(255,255,255,0.06); }
.zic-row.zic-head {
background:rgba(201,151,58,0.06);
color:var(--gold);
letter-spacing:0.12em;
font-weight:600;
}
.zic-row > div:first-child {
color:var(--mist); letter-spacing:0.1em;
}
.zic-row > div:not(:first-child) {
color:var(--paper);
}
.ai-whisper-card {
margin:14px 16px;
padding:18px 18px 14px;
background:linear-gradient(135deg, rgba(232,160,168,0.05) 0%, rgba(14,8,16,0.6) 100%);
border:1px solid rgba(232,160,168,0.2);
border-radius:4px;
text-align:center;
position:relative;
}
.ai-whisper-card::before {
content:'';
position:absolute; top:0; left:20%; right:20%; height:1px;
background:linear-gradient(90deg, transparent, var(--rose-light), transparent);
}
.aw-eyebrow {
font-size:10px; color:var(--rose-light);
letter-spacing:0.4em; margin-bottom:10px;
}
.aw-message {
font-family:var(--serif); font-size:14px;
color:var(--paper); line-height:1.7;
letter-spacing:0.04em;
padding:0 8px;
}
.aw-reason {
font-size:12px; color:var(--mist);
letter-spacing:0.04em; line-height:1.6;
padding:4px 8px 0;
}
.aw-source {
font-size:10px; color:var(--mist);
letter-spacing:0.18em; margin-top:8px;
}
.aw-cta {
display:inline-block; margin-top:14px;
padding:9px 18px;
background:transparent;
border:1px solid rgba(232,160,168,0.4);
color:var(--rose-light);
border-radius:2px;
font-size:11px; letter-spacing:0.16em;
cursor:pointer; font-family:var(--sans);
transition:all 0.15s;
}
.aw-cta:hover {
background:rgba(232,160,168,0.08);
border-color:rgba(232,160,168,0.6);
}
.hanja-grid {
display:grid; grid-template-columns:1fr 1fr;
gap:8px; padding:14px 16px;
}
.hanja-card {
padding:14px 12px;
background:rgba(255,255,255,0.03);
border:1px solid var(--border);
border-radius:3px;
display:flex; gap:12px;
align-items:center;
cursor:pointer;
}
.hanja-card .ic {
width:42px; height:42px;
flex-shrink:0;
background:rgba(201,151,58,0.08);
border:1px solid var(--border-strong);
border-radius:50%;
display:flex; align-items:center; justify-content:center;
color:var(--gold-light);
font-family:var(--serif); font-size:18px; font-weight:700;
}
.hanja-card .body { flex:1; min-width:0; }
.hanja-card .name {
font-family:var(--serif); font-size:13px;
color:var(--paper); letter-spacing:0.06em;
}
.hanja-card .desc {
font-size:11px; color:var(--mist);
letter-spacing:0.04em; margin-top:3px;
line-height:1.5;
}
.section-title {
font-family:var(--serif);
font-size:13px; letter-spacing:0.2em;
color:var(--gold);
padding:18px 18px 12px;
display:flex; align-items:center; justify-content:space-between;
}
.section-title .more {
font-size:11px; color:var(--mist);
letter-spacing:0.18em; cursor:pointer;
font-weight:300; font-family:var(--sans);
}
.home-cta {
margin:18px 16px 0;
padding:16px;
background:rgba(201,151,58,0.08);
border:1px solid var(--gold);
color:var(--gold-light);
border-radius:3px; text-align:center;
cursor:pointer;
font-size:12.5px; letter-spacing:0.22em; font-weight:500;
font-family:var(--sans);
}
.screen-result { position:relative; }
.result-loading {
position:absolute; inset:0; z-index:60;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
background:#0e0810;
opacity:0; visibility:hidden;
transition:opacity .22s ease, visibility .22s ease;
}
.screen-result.is-loading .result-loading { opacity:1; visibility:visible; }
.result-loading-spinner {
width:34px; height:34px; border-radius:50%;
border:2px solid rgba(201,151,58,0.22);
border-top-color:var(--gold);
animation:resultSpin .7s linear infinite;
}
@keyframes resultSpin { to { transform:rotate(360deg); } }
.result-loading-text { font-size:13px; color:var(--mist); letter-spacing:.02em; }
#loadingOverlay {
position:fixed; inset:0; z-index:120;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
background:rgba(14,8,16,0.93);
opacity:0; visibility:hidden; transition:opacity .25s ease;
}
#loadingOverlay.show { opacity:1; visibility:visible; }
.result-header {
padding:18px 16px 16px;
background:radial-gradient(ellipse at top, rgba(201,151,58,0.06) 0%, transparent 70%);
border-bottom:1px solid #241a12;
}
.result-profile {
display:flex; align-items:center; gap:14px;
position:relative;
}
.result-person-switcher {
background:rgba(201,151,58,0.08);
border:1px solid var(--border-strong);
color:var(--gold-light);
font-size:12px; padding:6px 10px;
border-radius:4px; cursor:pointer;
letter-spacing:0.06em;
transition:background 0.15s;
flex-shrink:0;
}
.result-person-switcher:hover { background:rgba(201,151,58,0.18); }
.result-person-menu {
position:absolute; right:0; top:calc(100% + 6px);
background:var(--ink-2);
border:1px solid var(--border-strong);
border-radius:6px;
box-shadow:0 8px 24px rgba(0,0,0,0.6);
min-width:160px; max-width:90vw;
padding:6px 0; z-index:300;
max-height:60vh; overflow-y:auto;
}
.result-person-menu .rpm-item {
padding:10px 14px;
color:var(--paper); font-size:13px;
cursor:pointer;
display:flex; align-items:center; gap:10px;
letter-spacing:0.04em;
}
.result-person-menu .rpm-item:hover { background:rgba(201,151,58,0.1); }
.result-person-menu .rpm-item.current { color:var(--gold-light); font-weight:500; }
.result-person-menu .rpm-item img {
width:24px; height:24px; object-fit:contain;
border-radius:3px; flex-shrink:0;
}
.result-card-mini {
width:54px; height:70px;
background:linear-gradient(180deg, rgba(201,151,58,0.15) 0%, rgba(14,8,16,0.8) 100%);
border:1px solid var(--border-strong);
border-radius:4px;
display:flex; align-items:center; justify-content:center;
flex-shrink:0;
box-shadow:0 4px 20px rgba(0,0,0,0.4);
cursor:pointer;
transition:background 0.3s;
}
.result-card-mini[data-oh="wood"]  { background:linear-gradient(160deg,#1a3d1a 0%,#0d2010 60%,#060f06 100%); }
.result-card-mini[data-oh="fire"]  { background:linear-gradient(160deg,#3d1a1a 0%,#200d0d 60%,#0f0606 100%); }
.result-card-mini[data-oh="earth"] { background:linear-gradient(160deg,#3d2e1a 0%,#20180d 60%,#0f0c06 100%); }
.result-card-mini[data-oh="metal"] { background:linear-gradient(160deg,#1a2a3d 0%,#0d1520 60%,#06090f 100%); }
.result-card-mini[data-oh="water"] { background:linear-gradient(160deg,#1a2a3d 0%,#0d1a2a 60%,#060f1e 100%); }
.oh-avatar {
padding:5px; border-radius:7px;
border:1px solid var(--border-strong);
background:linear-gradient(160deg, rgba(201,151,58,0.15), rgba(14,8,16,0.8));
}
.oh-avatar[data-oh="wood"]  { background:linear-gradient(160deg,#1a3d1a 0%,#0d2010 60%,#060f06 100%); }
.oh-avatar[data-oh="fire"]  { background:linear-gradient(160deg,#3d1a1a 0%,#200d0d 60%,#0f0606 100%); }
.oh-avatar[data-oh="earth"] { background:linear-gradient(160deg,#3d2e1a 0%,#20180d 60%,#0f0c06 100%); }
.oh-avatar[data-oh="metal"] { background:linear-gradient(160deg,#1a2a3d 0%,#0d1520 60%,#06090f 100%); }
.oh-avatar[data-oh="water"] { background:linear-gradient(160deg,#1a2a3d 0%,#0d1a2a 60%,#060f1e 100%); }
.result-card-mini img {
width:40px; height:40px; object-fit:contain;
filter:drop-shadow(0 0 10px rgba(201,151,58,0.2));
}
.result-name {
font-family:var(--serif); font-size:17px;
color:var(--paper); letter-spacing:0.08em;
font-weight:600;
}
.result-meta {
font-size:11px; color:var(--mist);
letter-spacing:0.14em; margin-top:4px;
}
.result-ilju {
display:inline-block; margin-top:6px;
padding:2px 8px;
background:rgba(201,151,58,0.06);
border:1px solid var(--border-strong);
border-radius:2px;
font-size:11px; color:var(--gold-light);
letter-spacing:0.14em;
}
.result-zodiac-note {
margin-top:6px;
font-size:11px; color:var(--paper-dim);
line-height:1.5;
}
.result-nav {
display:flex; overflow-x:auto;
background:rgba(14,8,16,0.85);
backdrop-filter:blur(12px);
border-bottom:1px solid var(--border);
scrollbar-width:none;
position:sticky; top:0; z-index:50;
padding:0 6px;
}
.result-nav::-webkit-scrollbar { display:none; }
.rn-btn {
flex:0 0 auto;
padding:14px 14px;
border:none; background:transparent;
font-size:12px; color:var(--mist);
cursor:pointer; letter-spacing:0.1em;
position:relative; white-space:nowrap;
font-family:var(--sans);
}
.rn-btn .ic {
color:var(--gold); margin-right:4px;
font-family:var(--serif);
}
.rn-btn.active { color:var(--gold-light); }
.rn-btn.active::after {
content:''; position:absolute;
bottom:0; left:10px; right:10px;
height:1px; background:var(--gold);
}
body.share-view .gnb,
body.share-view .result-nav { display:none !important; }
body.share-view .screen-result { padding-bottom:88px; }
body.share-view.share-paid .paid-block:not(.share-card):not(.ai-card):not(.compat-cta-card),
body.share-view.share-paid .paid-only > .paid-block:not(.share-card):not(.ai-card):not(.compat-cta-card) { display:block !important; }
body.share-view .ai-card,
body.share-view .ai-pass-strip,
body.share-view .ai-cta-btn,
body.share-view .aw-cta,
body.share-view .share-card,
body.share-view .cp-share-options,
body.share-view .pay-banner,
body.share-view .pay-mini-sticky,
body.share-view .ul-cta,
body.share-view .unified-lock,
body.share-view .compat-cta-card,
body.share-view .result-edit,
body.share-view .result-person-switcher,
body.share-view .theme-bar,
body.share-view .theme-selector,
body.share-view .screen-compat-detail .sub-back,
body.share-view .compat-back-btn,
body.share-view [onclick*="openPersonEdit"] { display:none !important; }
body.share-view .screen-compat-detail.pair-unlocked .paid-block:not(.ai-card):not(.compat-cta-card) { display:block !important; }
.share-nudge-bar {
position:relative; width:100%; box-sizing:border-box;
padding:12px 14px;
background:rgba(20,16,26,0.97);
border-bottom:1px solid var(--border-strong);
display:flex; align-items:center; gap:10px;
}
.share-nudge-bar .snb-txt {
flex:1; font-size:11.5px; line-height:1.45;
color:var(--paper-soft, #d8cfc2);
}
.share-nudge-bar .snb-txt strong { color:var(--gold-light); }
.share-nudge-bar .snb-btn {
flex-shrink:0; padding:7px 11px;
background:#fee500; color:#191919; border:none;
border-radius:3px; font-size:11px; font-weight:700;
letter-spacing:0.04em; cursor:pointer; font-family:var(--sans);
white-space:nowrap;
}
.share-cta-bar {
position:fixed; bottom:0; left:50%; transform:translateX(-50%);
width:100%; max-width:440px; box-sizing:border-box; z-index:900;
padding:14px 16px calc(14px + env(safe-area-inset-bottom));
background:linear-gradient(180deg,rgba(14,8,16,0) 0%,rgba(14,8,16,0.94) 24%);
display:flex; justify-content:center;
}
.share-cta-bar a {
display:block; width:100%; max-width:420px;
padding:14px; text-align:center;
background:#fee500; color:#191919;
border-radius:3px; font-weight:700;
font-size:13px; letter-spacing:0.06em;
text-decoration:none; font-family:var(--sans);
}
.result-pane {
display:none;
padding:14px 16px 24px;
}
.result-pane.active {
display:block;
animation:fadeUp 0.3s ease both;
}
.theme-selector {
display:grid; grid-template-columns:repeat(2,1fr);
gap:8px; margin-bottom:16px;
}
.theme-card {
padding:18px 14px;
background:rgba(255,255,255,0.03);
border:1px solid var(--border);
border-radius:3px;
cursor:pointer;
display:flex; flex-direction:column; gap:6px;
align-items:flex-start;
}
.theme-card.active {
background:rgba(201,151,58,0.08);
border-color:var(--border-strong);
}
.theme-card .ic {
font-family:var(--serif);
font-size:22px; color:var(--gold-light);
line-height:1;
}
.theme-card .name {
font-family:var(--serif); font-size:14px;
color:var(--paper); letter-spacing:0.08em;
}
.theme-card .tag {
font-size:11px; color:var(--mist-light);
letter-spacing:0.06em;
}
.theme-bar {
display:flex; gap:6px;
margin-bottom:14px;
overflow-x:auto;
scrollbar-width:none;
padding:4px 0;
}
.theme-bar::-webkit-scrollbar { display:none; }
.theme-pill {
flex:0 0 auto; padding:8px 14px;
background:rgba(255,255,255,0.03);
border:1px solid var(--border);
border-radius:999px;
color:var(--mist); font-size:12px;
letter-spacing:0.14em; cursor:pointer;
white-space:nowrap; font-family:var(--sans);
}
.theme-pill .ic { color:var(--gold); margin-right:4px; }
.theme-pill.active {
background:rgba(201,151,58,0.1);
border-color:var(--border-strong);
color:var(--gold-light);
}
.theme-content { display:none; }
.theme-content.active { display:block; animation:fadeUp 0.3s ease both; }
body.paid-calc .theme-selector { display:none; }
body:not(.paid-calc) .theme-bar { display:none; }
.hero {
text-align:center;
padding:28px 16px;
background:radial-gradient(ellipse at top, rgba(201,151,58,0.1) 0%, transparent 60%);
border:1px solid var(--border);
border-radius:3px;
margin-bottom:14px;
position:relative;
}
.hero::before {
content:''; position:absolute;
top:0; left:15%; right:15%; height:1px;
background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.hero-eyebrow {
font-size:11px; letter-spacing:0.5em;
color:var(--gold); margin-bottom:12px;
font-family:var(--serif);
}
.hero-title {
font-family:var(--serif); font-size:24px;
font-weight:700; color:var(--paper);
line-height:1.5; letter-spacing:0.08em;
margin-bottom:14px;
}
.hero-body {
font-size:12px; color:var(--mist-light);
letter-spacing:0.04em; line-height:1.85;
}
.hero-tags {
margin-top:16px; display:flex; gap:6px;
justify-content:center; flex-wrap:wrap;
}
.hero-tag {
font-family:var(--serif); font-size:11px;
padding:3px 11px;
background:rgba(201,151,58,0.06);
border:1px solid var(--border-strong);
color:var(--gold-light);
letter-spacing:0.14em;
border-radius:2px;
}
.yongsin-bar {
display:flex; align-items:center; gap:12px;
padding:14px 16px; margin-top:14px; margin-bottom:14px;
background:rgba(201,151,58,0.05);
border:1px solid var(--border-strong);
border-radius:2px;
}
.ys-label {
font-size:11px; letter-spacing:0.3em;
color:var(--gold);
}
.ys-val {
font-family:var(--serif); font-size:18px;
font-weight:700; color:var(--gold-light);
margin-top:3px;
}
.ys-div {
flex:1; height:1px;
background:linear-gradient(90deg, var(--border-strong), transparent);
}
.ys-sub {
font-size:11px; color:var(--mist-light);
letter-spacing:0.06em;
}
.ss-grid {
display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.ss-item {
padding:12px;
background:rgba(255,255,255,0.03);
border:1px solid var(--border);
border-radius:2px;
}
.ss-name {
font-family:var(--serif); font-size:14px;
font-weight:600; color:var(--paper);
letter-spacing:0.08em;
}
.ss-meta {
font-size:11px; color:var(--mist);
letter-spacing:0.1em; margin-top:3px;
}
.sinsal-chips {
display:flex; gap:6px; flex-wrap:wrap;
}
.sinsal-chip {
padding:6px 11px;
background:rgba(232,200,122,0.05);
border:1px solid var(--border-strong);
color:var(--gold-light);
border-radius:2px;
font-size:11px; letter-spacing:0.12em;
font-family:var(--serif);
}
.dae-scroll {
display:flex; gap:6px; overflow-x:auto;
padding:6px 0; scrollbar-width:none;
}
.dae-scroll::-webkit-scrollbar { display:none; }
.dae-item {
flex:0 0 66px; padding:10px 6px;
background:rgba(255,255,255,0.03);
border:1px solid var(--border);
border-radius:2px; text-align:center;
}
.dae-item.current {
background:rgba(201,151,58,0.1);
border-color:var(--border-strong);
box-shadow:0 0 14px rgba(201,151,58,0.12);
}
.dae-age {
font-size:11px; color:var(--mist);
letter-spacing:0.1em;
}
.dae-gan {
font-family:var(--serif); font-size:16px;
font-weight:700; color:var(--paper);
margin:4px 0 1px;
}
.dae-item.current .dae-gan { color:var(--gold-light); }
.dae-ji {
font-family:var(--serif); font-size:14px;
color:var(--mist-light);
}
.dae-now {
font-size:11px; color:var(--gold);
letter-spacing:0.18em; margin-top:4px;
}
.zw-grid {
display:grid;
grid-template-columns:repeat(4, 1fr);
grid-template-rows:repeat(4, 1fr);
gap:4px; aspect-ratio:1; margin-top:8px;
}
.zw-cell {
padding:6px 4px;
background:rgba(255,255,255,0.03);
border:1px solid var(--border);
border-radius:2px;
display:flex; flex-direction:column;
justify-content:center; text-align:center;
}
.zw-cell.center {
grid-column:2/4; grid-row:2/4;
background:rgba(201,151,58,0.06);
border-color:var(--border-strong);
padding:12px;
}
.zw-cell.selected {
background:rgba(201,151,58,0.13);
border-color:var(--gold);
box-shadow:0 0 0 1px var(--gold) inset;
}
.zw-cell.selected .zw-star { color:var(--gold); }
.zw-gung {
font-size:11px; color:var(--mist);
letter-spacing:0.14em; margin-bottom:4px;
}
.zw-gung .zw-ico { display:block; font-size:14px; margin-bottom:2px; }
.zw-star {
font-family:var(--serif); font-size:11px;
color:var(--paper); font-weight:500;
}
.zw-star-empty { color:var(--mist); font-weight:400; opacity:.8; }
.zw-center-title {
font-family:var(--serif); font-size:15px;
color:var(--gold-light); font-weight:700;
letter-spacing:0.1em; margin-bottom:5px;
}
.zw-center-sub {
font-size:11px; color:var(--mist-light);
letter-spacing:0.14em;
}
.month-list {
display:flex; flex-direction:column; gap:6px;
}
.month-row {
display:grid;
grid-template-columns:60px 64px 1fr;
gap:10px; padding:9px 12px;
background:rgba(255,255,255,0.02);
border:1px solid var(--border);
border-radius:2px; font-size:12px;
}
.month-row .m-label {
color:var(--gold-light); font-family:var(--serif);
letter-spacing:0.08em;
}
.month-row .m-tag {
font-size:11px; color:var(--jade-light);
letter-spacing:0.14em;
}
.month-row .m-tag.warn { color:var(--rose-light); }
.month-row .m-body {
color:var(--mist-light); font-weight:300;
}
.ch-divider {
display:flex; align-items:center; gap:10px;
margin:18px 0 12px;
}
.ch-line {
flex:1; height:1px;
background:linear-gradient(90deg, transparent, var(--border-strong), transparent);
}
.ch-label {
font-family:var(--serif); font-size:11px;
color:var(--gold); letter-spacing:0.3em;
}
.score-circle {
text-align:center; padding:24px 10px;
}
.score-big {
font-family:var(--serif); font-size:64px; font-weight:700;
background:linear-gradient(135deg, var(--rose-light) 0%, var(--gold-light) 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
line-height:1;
}
.score-big small {
font-size:20px; color:var(--mist);
font-weight:300; font-family:var(--sans);
margin-left:6px;
}
.score-grade {
font-size:13px; color:var(--paper);
margin-top:10px; letter-spacing:0.14em;
font-family:var(--serif);
}
.score-grade span {
color:var(--gold); letter-spacing:0.2em;
}
.c-tabs {
display:flex; gap:6px; overflow-x:auto;
scrollbar-width:none; margin-bottom:14px;
}
.c-tabs::-webkit-scrollbar { display:none; }
.c-tab {
flex:0 0 auto; padding:8px 14px;
background:rgba(255,255,255,0.02);
border:1px solid var(--border);
border-radius:2px; font-size:11px;
color:var(--mist); letter-spacing:0.16em;
cursor:pointer; white-space:nowrap;
display:flex; align-items:center; gap:6px;
font-family:var(--sans);
}
.c-tab.active {
background:rgba(201,151,58,0.08);
border-color:var(--border-strong);
color:var(--gold-light);
}
.c-tab .count {
font-size:11px; padding:1px 6px;
background:rgba(255,255,255,0.06);
border-radius:2px; color:var(--mist-light);
}
.c-tab.active .count {
background:rgba(201,151,58,0.15);
color:var(--gold-light);
}
.free-only,
.paid-only,
.pair-locked { display:block; }
body:not(.paid-calc) .paid-only > .paid-block,
body:not(.paid-calc) .paid-block { display:none; }
body.paid-calc .unified-lock.paid-only,
body.paid-calc .free-block { display:none; }
.screen-compat-detail .paid-block { display:none; }
.screen-compat-detail.pair-unlocked .paid-block { display:revert; }
.screen-compat-detail .compat-lock-card { display:none; }
.screen-compat-detail:not(.pair-unlocked) .compat-lock-card { display:block; }
body:not(.paid-calc) .score-time-tabs button[data-st="monthly"]::after,
body:not(.paid-calc) .score-time-tabs button[data-st="yearly"]::after {
content:'🔒';
margin-left:4px; font-size:9.5px;
opacity:0.7;
}
body:not(.paid-calc) .score-time-tabs button[data-st="monthly"],
body:not(.paid-calc) .score-time-tabs button[data-st="yearly"] {
color:rgba(232,224,210,0.45);
}
body:not(.paid-calc) .score-hero[data-period-locked="true"] .score-main {
position:relative;
}
body:not(.paid-calc) .score-hero[data-period-locked="true"] .score-main::before {
content:'🔒 본인 풀이 결제 시 공개';
position:absolute; inset:0;
display:flex; align-items:center; justify-content:center;
background:rgba(14,8,16,0.85);
color:var(--gold-light);
font-family:var(--serif); font-size:13px; letter-spacing:0.14em;
z-index:2;
}
body:not(.paid-calc) .score-hero[data-period-locked="true"] .score-main > * {
filter:blur(8px);
opacity:0.5;
}
body:not(.paid-calc) .score-hero[data-period-locked="true"] .score-breakdown { display:none; }
body:not(.paid-calc) .score-area-row {
position:relative;
}
body:not(.paid-calc) .score-area-row::after {
content:'🔒 영역별 점수는 본인 풀이 결제 시 공개';
position:absolute;
bottom:-4px; left:50%;
transform:translateX(-50%) translateY(100%);
font-size:10.5px; color:var(--mist);
letter-spacing:0.06em;
white-space:nowrap;
}
body:not(.paid-calc) .area-cell {
position:relative; opacity:0.85;
}
body:not(.paid-calc) .area-score {
filter:blur(5px);
color:var(--mist) !important;
user-select:none;
}
body:not(.paid-calc) .area-cell::before {
content:'🔒'; position:absolute;
top:6px; right:6px;
font-size:9px; opacity:0.6;
}
body:not(.paid-calc) .score-area-row { margin-bottom:30px; }
.abstract-card {
background:linear-gradient(135deg, rgba(201,151,58,0.06) 0%, rgba(14,8,16,0.4) 100%);
border:1px solid rgba(201,151,58,0.25);
}
.abstract-card .card-title {
color:var(--gold-light);
letter-spacing:0.02em;
}
.abstract-list {
list-style:none; padding:0; margin:14px 0 0;
display:flex; flex-direction:column; gap:8px;
}
.abstract-list li {
font-size:13px; color:var(--paper);
line-height:1.55;
display:flex; gap:10px; align-items:flex-start;
}
.abstract-list .ab-k {
flex-shrink:0;
min-width:62px;
padding:2px 8px;
background:rgba(201,151,58,0.12);
border-radius:2px;
font-size:11px; color:var(--gold-light);
letter-spacing:0.06em; font-weight:600;
text-align:center;
line-height:1.55;
}
.overview-kv {
display:flex; align-items:flex-start; justify-content:space-between;
padding:11px 0;
border-bottom:1px solid rgba(255,255,255,0.04);
gap:12px;
}
.overview-kv:last-child { border-bottom:none; }
.overview-k {
font-size:12px; color:var(--mist);
letter-spacing:0.12em;
flex:0 0 38%; line-height:1.55;
}
.overview-v {
font-size:13px; color:var(--paper-soft);
letter-spacing:0.06em;
text-align:right; line-height:1.6;
flex:1; min-width:0;
}
.overview-v.c-jade { color:var(--jade-light); }
.overview-v.c-rose { color:var(--rose-light); }
.overview-v.c-mist { color:var(--mist); }
.overview-kv-desc {
font-size:12px; color:var(--mist-light);
line-height:1.7; padding:6px 0 10px;
border-bottom:1px solid rgba(255,255,255,0.04);
}
.overview-k .t-sub {
display:block; font-size:10px; color:rgba(169,154,175,0.7);
letter-spacing:0.08em; margin-top:2px;
}
.action-card-meta {
display:flex; flex-direction:column; gap:8px;
padding:10px 12px; margin-top:10px;
background:rgba(201,151,58,0.04);
border-left:2px solid var(--gold-dim);
border-radius:2px;
}
.action-card-meta .overview-kv {
padding:6px 0; border-bottom:none;
}
.do-section { margin-top:14px; }
.do-header {
font-family:var(--serif); font-size:12px; font-weight:600;
letter-spacing:0.18em; margin-bottom:8px;
padding-bottom:5px;
border-bottom:1px solid var(--border);
}
.do-header.do { color:var(--jade-light); }
.do-header.dont { color:var(--rose-light); }
.action-item {
display:flex; align-items:flex-start; gap:9px;
padding:7px 0;
font-size:12px; line-height:1.65;
color:var(--paper-soft);
}
.action-item.caution { color:var(--mist-light); }
.action-icon { font-size:14px; flex:0 0 auto; line-height:1.4; }
.action-text { flex:1; min-width:0; letter-spacing:0.02em; }
.action-text strong { color:var(--gold-light); font-weight:500; }
.insight-box {
padding:11px 13px; margin:10px 0;
background:rgba(201,151,58,0.04);
border-left:2px solid var(--gold-dim);
border-radius:2px;
font-size:12px; line-height:1.7;
color:var(--mist-light);
}
.ab {
padding:11px 13px; margin:10px 0;
background:rgba(255,255,255,0.025);
border:1px solid var(--border);
border-radius:3px;
}
.ab.jade { border-color:rgba(74,124,106,0.3); background:rgba(74,124,106,0.05); }
.ab.rose { border-color:rgba(196,97,110,0.3); background:rgba(196,97,110,0.05); }
.ab-title {
font-family:var(--serif); font-size:12px; font-weight:600;
letter-spacing:0.12em; color:var(--gold-light);
margin-bottom:5px;
}
.ab.jade .ab-title { color:var(--jade-light); }
.ab.rose .ab-title { color:var(--rose-light); }
.ab-desc {
font-size:12px; line-height:1.7; color:var(--paper-soft);
}
.ab-desc strong { color:var(--gold-light); font-weight:500; }
.card-narrative.lh-loose { line-height:1.85; }
.card-divider-thin {
height:1px; margin:14px 0;
background:linear-gradient(90deg, transparent, var(--border), transparent);
}
.ss-grid-full {
display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.ss-card {
padding:11px 12px;
background:rgba(255,255,255,0.025);
border:1px solid var(--border);
border-radius:3px;
}
.ss-card .ss-name {
font-family:var(--serif); font-size:13px; color:var(--gold-light);
letter-spacing:0.1em; margin-bottom:4px;
}
.ss-card .ss-role {
font-size:10px; color:var(--mist);
letter-spacing:0.1em; margin-bottom:6px;
}
.ss-card .ss-desc {
font-size:11px; color:var(--mist-light);
line-height:1.65; letter-spacing:0.02em;
}
.sinsal-full {
display:flex; flex-direction:column; gap:10px;
}
.sinsal-group {
padding:10px 12px;
background:rgba(255,255,255,0.025);
border:1px solid var(--border);
border-radius:3px;
}
.sg-source {
font-size:10px; color:var(--mist); letter-spacing:0.14em;
margin-bottom:7px;
}
.sg-tags { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
.sg-tag {
font-family:var(--serif); font-size:11px; padding:3px 8px;
border:1px solid var(--border-strong); border-radius:2px;
color:var(--paper); letter-spacing:0.08em;
display:inline-flex; align-items:center; gap:4px;
}
.sg-tag.good { color:var(--jade-light); border-color:rgba(74,124,106,0.4); }
.sg-tag.caution { color:var(--rose-light); border-color:rgba(196,97,110,0.4); }
.sg-hanja {
font-size:9px; color:var(--mist); letter-spacing:0;
}
.sg-single-desc, .sg-row {
font-size:12px; color:var(--mist-light); line-height:1.7;
}
.sg-row { margin-top:4px; }
.sg-row-name {
font-family:var(--serif); color:var(--paper);
margin-right:5px; font-weight:500;
}
.sg-row.good .sg-row-name { color:var(--jade-light); }
.sg-row.caution .sg-row-name { color:var(--rose-light); }
.sinsal-syn-row {
padding:8px 11px; border-radius:2px;
font-size:12px; line-height:1.7;
margin-bottom:6px;
}
.sinsal-syn-good {
background:rgba(74,124,106,0.06);
border-left:2px solid var(--jade);
color:var(--paper-soft);
}
.sinsal-syn-bad {
background:rgba(196,97,110,0.06);
border-left:2px solid var(--rose);
color:var(--paper-soft);
}
.rel-grid {
display:flex; flex-direction:column; gap:6px;
}
.rel-row {
display:flex; gap:10px; align-items:center;
padding:9px 12px;
background:rgba(255,255,255,0.025);
border:1px solid var(--border);
border-radius:3px;
}
.rel-row .rel-type {
font-family:var(--serif); font-size:12px;
color:var(--gold-light); letter-spacing:0.1em;
flex:0 0 70px;
}
.rel-row.chung .rel-type { color:var(--rose-light); }
.rel-row.hap .rel-type { color:var(--jade-light); }
.rel-row .rel-pair {
font-family:var(--serif); font-size:13px;
color:var(--paper); letter-spacing:0.08em;
flex:0 0 90px;
}
.rel-row .rel-desc {
font-size:11px; color:var(--mist-light);
line-height:1.6; flex:1;
}
.tl-list {
display:flex; flex-direction:column;
border-left:2px solid var(--border);
padding-left:14px; margin-left:6px;
}
.tl-item {
position:relative; padding:11px 0;
border-bottom:1px solid rgba(255,255,255,0.04);
}
.tl-item:last-child { border-bottom:none; }
.tl-item::before {
content:''; position:absolute;
left:-19px; top:18px; width:7px; height:7px;
border-radius:50%; background:var(--border);
}
.tl-item.active::before { background:var(--gold-light); box-shadow:0 0 0 3px rgba(232,200,122,0.18); }
.tl-item.past { opacity:0.55; }
.tl-age {
font-family:var(--serif); font-size:12px;
color:var(--gold); letter-spacing:0.12em; margin-bottom:4px;
display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.tl-text {
font-size:12px; color:var(--paper-soft);
line-height:1.7; letter-spacing:0.02em;
}
.tl-text strong { color:var(--gold-light); font-weight:500; }
.tl-tag {
font-size:9px; padding:1px 5px;
border:1px solid var(--border-strong);
color:var(--mist-light);
letter-spacing:0.08em; border-radius:2px;
}
.tl-tag.now-tag { color:var(--gold-light); border-color:var(--gold-dim); background:rgba(201,151,58,0.1); }
.tl-tag.chung { color:var(--rose-light); border-color:rgba(196,97,110,0.4); }
.tl-tag.yongsin { color:var(--jade-light); border-color:rgba(74,124,106,0.4); }
.tl-tag.career { color:#bcaad9; border-color:rgba(150,130,190,0.42); background:rgba(150,130,190,0.08); }
.score-hero {
text-align:center; padding:18px 14px;
background:linear-gradient(180deg, rgba(201,151,58,0.04) 0%, transparent 100%);
border:1px solid var(--border);
border-radius:3px;
margin-bottom:14px;
}
.score-hero-num {
font-family:var(--serif); font-size:42px;
color:var(--gold-light); letter-spacing:0.04em;
line-height:1;
}
.score-hero-num small {
font-size:14px; color:var(--mist); margin-left:3px;
}
.score-hero-grade {
font-size:11px; color:var(--gold);
letter-spacing:0.2em; margin-top:7px;
}
.score-hero-judge {
font-family:var(--serif); font-size:13px; color:var(--paper-soft);
letter-spacing:0.06em; margin-top:8px; line-height:1.6;
}
.theme-score-time {
margin-bottom:14px;
padding:20px 18px;
background:rgba(255,255,255,0.03);
border:1px solid var(--border);
border-radius:3px;
position:relative;
overflow:hidden;
}
.theme-score-time::before {
content:''; position:absolute;
top:0; left:15%; right:15%; height:1px;
background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.theme-score-time .tst-head { margin-bottom:14px; }
.theme-score-time .tst-eyebrow {
font-family:var(--sans); font-size:10px; color:var(--gold);
letter-spacing:0.22em; margin-bottom:6px;
}
.theme-score-time .tst-title {
font-family:var(--sans); font-size:12px; font-weight:500;
color:var(--gold); letter-spacing:0.2em;
}
.theme-score-time .tst-time-tabs {
display:flex; gap:0;
margin-bottom:14px;
border:1px solid rgba(201,151,58,0.2);
border-radius:3px;
overflow:hidden;
}
.theme-score-time .tst-time-tabs button {
flex:1;
padding:8px 0;
background:transparent;
border:none;
border-right:1px solid rgba(201,151,58,0.15);
color:var(--mist); font-size:11.5px;
letter-spacing:0.08em; cursor:pointer;
transition:background 0.15s, color 0.15s;
}
.theme-score-time .tst-time-tabs button:last-child { border-right:none; }
.theme-score-time .tst-time-tabs button:hover { color:var(--ivory); }
.theme-score-time .tst-time-tabs button.active {
background:rgba(201,151,58,0.18);
color:var(--gold-light);
font-weight:600;
}
.theme-score-time .tst-score-row {
display:flex; align-items:baseline; gap:3px;
margin-bottom:8px;
}
.theme-score-time .tst-num {
font-family:var(--serif); font-size:26px;
color:var(--gold-light); letter-spacing:0.02em;
line-height:1;
}
.theme-score-time .tst-num-unit {
font-size:12px; color:var(--mist);
}
.theme-score-time .tst-narr {
font-size:13px; color:var(--paper);
line-height:1.85; font-weight:300; letter-spacing:0.02em;
padding:10px 0 12px;
border-bottom:1px solid var(--border);
margin-bottom:12px;
}
.theme-score-time .tst-do-dont {
display:flex; flex-direction:column; gap:7px;
}
.theme-score-time .tst-do,
.theme-score-time .tst-dont {
display:flex; gap:9px; align-items:flex-start;
font-size:12px; line-height:1.65;
color:var(--paper-soft); letter-spacing:0.02em;
}
.theme-score-time .tst-tag {
flex-shrink:0; min-width:46px;
background:none; padding:0;
font-family:var(--serif); font-size:12px; font-weight:600;
letter-spacing:0.1em; color:var(--jade-light);
}
.theme-score-time .tst-tag.is-dont {
background:none; color:var(--rose-light);
}
.bar-row { margin-bottom:11px; }
.bar-row-head {
display:flex; justify-content:space-between;
font-size:12px; color:var(--mist-light);
letter-spacing:0.1em; margin-bottom:5px;
}
.bar-row-score { color:var(--gold-light); }
.bar-track {
height:5px; background:rgba(255,255,255,0.05);
border-radius:3px; overflow:hidden;
}
.bar-fill { height:100%; }
.mt-row {
padding:11px 12px;
background:rgba(255,255,255,0.025);
border:1px solid var(--border);
border-radius:3px; margin-bottom:8px;
}
.mt-row-head {
display:flex; justify-content:space-between;
align-items:center; margin-bottom:5px;
}
.mt-title {
font-family:var(--serif); font-size:13px;
color:var(--paper); letter-spacing:0.1em;
}
.mt-stars {
font-family:var(--serif); font-size:12px;
color:var(--gold-light); letter-spacing:0.18em;
}
.mt-desc {
font-size:11px; color:var(--mist-light);
line-height:1.65;
}
.ds-tag {
display:inline-block; padding:3px 9px;
background:rgba(201,151,58,0.08);
border:1px solid var(--border-strong); border-radius:2px;
font-size:11px; color:var(--gold-light);
letter-spacing:0.1em;
margin:2px 4px 2px 0;
}
.ds-tag.square { border-radius:1px; }
.zw-stat-grid {
display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.zw-stat-card {
padding:11px 12px;
background:rgba(255,255,255,0.025);
border:1px solid var(--border);
border-radius:3px;
}
.zw-stat-label {
font-size:11px; color:var(--mist);
letter-spacing:0.12em; margin-bottom:5px;
}
.zw-stat-value {
font-family:var(--serif); font-size:13px;
color:var(--paper); letter-spacing:0.06em; margin-bottom:4px;
line-height:1.5;
}
.zw-stat-sub {
font-size:10px; color:var(--gold);
letter-spacing:0.1em;
}
.combo196-variant {
margin-top:18px; padding:14px;
background:rgba(14,8,16,0.4);
border:1px solid var(--border);
border-radius:3px;
}
.combo196-bar-cap {
margin-top:8px;
font-size:11px; color:var(--mist);
letter-spacing:0.04em; line-height:1.6;
}
.combo196-svg {
width:100%; height:auto; display:block;
margin:0 auto 4px;
}
.similar-grid {
display:grid; grid-template-columns:1fr; gap:10px;
margin-top:6px;
}
.similar-card {
padding:14px;
background:rgba(255,255,255,0.025);
border:1px solid var(--border);
border-left:2px solid var(--gold-dim);
border-radius:2px;
}
.similar-num {
font-family:var(--serif);
font-size:10px; color:var(--gold);
letter-spacing:0.18em; margin-bottom:4px;
font-weight:600;
}
.similar-name {
font-family:var(--serif);
font-size:15px; color:var(--paper);
font-weight:600; letter-spacing:0.08em;
margin-bottom:6px;
}
.similar-desc {
font-size:12px; color:var(--mist-light);
line-height:1.6;
}
.zw-pd-star {
padding:11px 13px; margin-bottom:10px;
background:rgba(255,255,255,0.025);
border-left:2px solid var(--gold-dim);
border-radius:2px;
}
.zw-pd-star-head {
display:flex; align-items:center; gap:8px;
margin-bottom:6px; flex-wrap:wrap;
}
.zw-pd-star-name {
font-family:var(--serif); font-size:14px;
color:var(--gold-light); letter-spacing:0.1em;
}
.zw-pd-star-alias {
font-size:10px; color:var(--mist); letter-spacing:0.08em;
}
.zw-pd-star-bright {
font-size:9px; padding:1px 5px; border-radius:2px;
background:rgba(201,151,58,0.1); color:var(--gold);
letter-spacing:0.06em;
}
.zw-pd-star-mutagen {
font-size:9px; padding:1px 5px; border-radius:2px;
background:rgba(196,97,110,0.1); color:var(--rose-light);
letter-spacing:0.06em;
}
.zw-pd-interp {
font-size:12px; line-height:1.7;
color:var(--paper-soft); letter-spacing:0.02em;
}
.pl-palace-cards {
display:grid; grid-template-columns:1fr 1fr; gap:10px;
margin-bottom:14px;
}
.pl-palace-card {
padding:13px 12px;
background:rgba(255,255,255,0.025);
border:1px solid var(--border);
border-radius:3px;
text-align:center;
}
.pl-palace-label {
font-size:10px; color:var(--mist);
letter-spacing:0.14em; margin-bottom:7px;
}
.pl-palace-title {
font-family:var(--serif); font-size:14px;
color:var(--gold-light); letter-spacing:0.1em; margin-bottom:5px;
}
.pl-palace-star {
font-size:11px; color:var(--paper-soft);
letter-spacing:0.08em; line-height:1.6;
}
.pl-chapter-body {
font-size:13px; line-height:1.85;
color:var(--paper-soft); letter-spacing:0.02em;
}
.pl-bridge-header {
display:flex; justify-content:space-between; align-items:center;
font-size:10px; color:var(--mist);
letter-spacing:0.12em; margin-bottom:10px;
padding-bottom:6px;
border-bottom:1px solid var(--border);
}
.pl-bridges {
display:flex; flex-direction:column; gap:7px;
}
.pl-bridge-row {
display:flex; align-items:center; gap:9px;
padding:9px 11px;
background:rgba(201,151,58,0.04);
border:1px solid var(--border);
border-radius:2px;
font-size:12px;
}
.pl-bridge-from {
flex:1; color:var(--mist-light);
letter-spacing:0.06em;
}
.pl-bridge-arrow { color:var(--gold); font-size:12px; }
.pl-bridge-to {
flex:1; color:var(--gold-light);
letter-spacing:0.06em; text-align:right;
}
.pl-mission-text {
font-size:13px; color:var(--paper);
line-height:1.85; font-weight:300; letter-spacing:0.02em;
}
.pl-mission-text strong { color:var(--gold-light); font-weight:500; }
#v2-boot-splash {
position:fixed; inset:0; z-index:3000;
background:var(--ink);
display:flex; align-items:center; justify-content:center;
transition:opacity 0.4s ease;
}
body:not(.booting) #v2-boot-splash {
opacity:0; pointer-events:none;
}
#v2-boot-splash .vbs-mark {
font-family:var(--serif); font-size:34px;
color:var(--gold);
animation:vbs-pulse 1.4s ease-in-out infinite;
}
@keyframes vbs-pulse {
0%,100% { opacity:0.35; }
50% { opacity:1; }
}
.ch-divider {
display:flex; align-items:center; gap:12px;
margin:24px 0 14px;
}
.ch-line {
flex:1; height:1px; background:var(--border);
}
.ch-label {
font-family:var(--serif); font-size:12px;
color:var(--gold); letter-spacing:0.24em;
}
.compat-compare {
display:grid; grid-template-columns:1fr 60px 1fr;
gap:10px; align-items:center;
padding:14px 0;
}
.compat-person-col { text-align:center; }
.compat-person-name {
font-family:var(--serif); font-size:13px;
color:var(--paper); letter-spacing:0.1em; margin-bottom:6px;
}
.compat-person-char {
font-family:var(--serif); font-size:36px;
line-height:1; margin-bottom:4px;
}
.compat-person-info {
font-size:11px; color:var(--mist);
letter-spacing:0.1em;
}
.compat-person-badge {
display:inline-block; margin-top:7px;
font-size:10px; padding:2px 7px;
border-radius:2px; letter-spacing:0.12em;
}
.compat-vs {
display:flex; flex-direction:column; gap:5px; align-items:center;
}
.compat-line {
font-size:9px; padding:2px 6px; border-radius:2px;
background:rgba(201,151,58,0.08); color:var(--gold-light);
letter-spacing:0.06em; text-align:center;
border:1px solid var(--border-strong);
}
.compat-line.chung { color:var(--rose-light); border-color:rgba(196,97,110,0.4); background:rgba(196,97,110,0.06); }
.compat-line.hap { color:var(--jade-light); border-color:rgba(74,124,106,0.4); background:rgba(74,124,106,0.06); }
.compat-bar { margin-bottom:11px; }
.compat-bar-head {
display:flex; justify-content:space-between;
font-size:12px; color:var(--mist-light);
letter-spacing:0.1em; margin-bottom:5px;
}
.compat-bar-track {
height:5px; background:rgba(255,255,255,0.05);
border-radius:3px; overflow:hidden;
}
.compat-bar-fill { height:100%; }
.sipsin-cross-grid {
display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.sipsin-cross-card {
padding:11px 12px;
background:rgba(255,255,255,0.025);
border:1px solid var(--border);
border-radius:3px; text-align:center;
}
.sipsin-cross-arrow {
font-size:10px; color:var(--mist); letter-spacing:0.14em;
margin-bottom:5px;
}
.sipsin-cross-name {
font-family:var(--serif); font-size:14px;
color:var(--gold-light); letter-spacing:0.1em; margin-bottom:4px;
}
.sipsin-cross-desc {
font-size:11px; color:var(--mist-light);
line-height:1.6; letter-spacing:0.02em;
}
.huaqi-card {
padding:13px;
background:rgba(196,97,110,0.05);
border-left:2px solid var(--rose);
border-radius:2px;
margin-bottom:10px;
}
.huaqi-label {
font-size:11px; color:var(--rose-light);
letter-spacing:0.14em; margin-bottom:5px;
}
.huaqi-stars {
font-family:var(--serif); font-size:13px;
color:var(--paper); letter-spacing:0.08em; margin-bottom:5px;
}
.huaqi-desc {
font-size:11px; color:var(--mist-light); line-height:1.65;
}
.star-table {
width:100%; border-collapse:collapse;
font-size:11px; color:var(--paper-soft);
}
.star-table th {
font-size:10px; color:var(--mist);
letter-spacing:0.12em; padding:7px 6px;
text-align:left; border-bottom:1px solid var(--border);
}
.star-table td {
padding:8px 6px;
border-bottom:1px solid rgba(255,255,255,0.04);
}
.star-table .col-name {
font-family:var(--serif); color:var(--gold-light);
}
.fold-toggle {
display:flex; align-items:center; justify-content:center;
gap:5px; padding:9px;
margin:6px 0;
border:1px dashed var(--border);
border-radius:2px;
font-size:11px; color:var(--mist);
letter-spacing:0.14em;
background:transparent; cursor:pointer; width:100%;
font-family:var(--sans);
}
.twelve-grid {
display:grid; grid-template-columns:repeat(4,1fr); gap:7px;
}
.twelve-col {
padding:10px 8px; text-align:center;
background:rgba(255,255,255,0.02);
border:1px solid var(--border);
border-radius:3px;
}
.twelve-col .label {
font-size:10px; color:var(--mist);
letter-spacing:0.1em; margin-bottom:5px;
}
.twelve-col .name {
font-family:var(--serif); font-size:13px;
color:var(--gold-light); letter-spacing:0.06em; margin-bottom:4px;
}
.twelve-col .gauge {
height:3px; background:rgba(255,255,255,0.05);
border-radius:2px; overflow:hidden;
margin-bottom:5px;
}
.twelve-col .gauge-fill { height:100%; }
.twelve-col .pct { font-size:10px; color:var(--mist-light); }
.twelve-col .desc {
font-size:9px; color:var(--mist);
line-height:1.5; margin-top:5px;
}
.jjg-story {
font-size:13px; color:var(--paper);
line-height:1.85; font-weight:300; letter-spacing:0.02em;
margin:12px 0 6px;
}
.jjg-story-lead {
font-family:var(--serif); font-size:14px;
color:var(--ivory); margin-bottom:6px; letter-spacing:0.02em;
}
.jjg-story strong { color:var(--gold-light); font-weight:500; }
.jjg-grid {
display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px;
}
.jjg-col {
padding:8px 4px; text-align:center;
background:rgba(255,255,255,0.02);
border:1px solid var(--border);
border-radius:3px;
min-width:0; overflow:hidden;
}
@media (max-width:380px) {
.jjg-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
}
.jjg-col .label {
font-size:10px; color:var(--mist);
letter-spacing:0.1em; margin-bottom:7px;
}
.jjg-item {
margin-bottom:6px; padding-bottom:6px;
border-bottom:1px solid rgba(255,255,255,0.04);
}
.jjg-item:last-child { border-bottom:none; padding-bottom:0; margin-bottom:0; }
.jjg-badge {
font-family:var(--serif); font-size:14px;
color:var(--paper); display:block; margin-bottom:3px;
}
.jjg-info {
font-size:9px; color:var(--mist-light);
line-height:1.6;
}
.jjg-info .ss {
color:var(--gold); display:block; margin-top:2px;
}
.c-jade { color:var(--jade-light); }
.c-rose { color:var(--rose-light); }
.c-gold { color:var(--gold-light); }
.c-mist { color:var(--mist); }
.hl-gold { color:var(--gold-light); }
.tl-bar {
height:5px; background:rgba(255,255,255,0.05);
border-radius:3px; margin-top:6px; overflow:hidden;
}
.tl-bar-fill { height:100%; }
.month-chart {
display:grid; grid-template-columns:repeat(12,1fr); gap:3px;
align-items:end;
padding:14px 4px 8px;
}
.month-bar {
text-align:center;
}
.month-bar-fill {
width:100%; min-height:3px; max-height:60px;
background:linear-gradient(180deg, var(--gold-light), var(--gold-dim));
border-radius:2px 2px 0 0;
margin-bottom:4px;
}
.month-bar.warn .month-bar-fill {
background:linear-gradient(180deg, var(--rose-light), var(--rose));
}
.month-bar.good .month-bar-fill {
background:linear-gradient(180deg, var(--jade-light), var(--jade));
}
.month-bar-num {
font-size:9px; color:var(--mist);
letter-spacing:0.06em;
}
.person-row {
display:flex; flex-direction:column;
padding:14px;
background:rgba(255,255,255,0.03);
border:1px solid var(--border);
border-radius:3px; margin-bottom:8px;
}
.person-row .person-row-main {
display:flex; align-items:center; gap:14px;
cursor:pointer;
}
.person-row:hover {
border-color:var(--border-strong);
background:rgba(255,255,255,0.05);
}
.person-row-actions {
display:flex; gap:4px; align-items:center;
padding:10px 0 0 62px;
font-size:11px;
}
.person-row-actions .prow-act {
background:transparent; border:none;
color:var(--mist);
cursor:pointer; padding:4px 8px;
font-size:11px; letter-spacing:0.06em;
font-family:var(--sans);
}
.person-row-actions .prow-act:hover { color:var(--gold-light); }
.person-row-actions .prow-act.danger:hover { color:#ff6b6b; }
.person-row-actions .sep {
color:var(--mist); opacity:0.35;
font-size:10px;
}
.person-row .avatar-img {
width:48px; height:48px; object-fit:contain;
flex-shrink:0;
filter:drop-shadow(0 0 10px rgba(201,151,58,0.15));
}
.person-row .info { flex:1; min-width:0; }
.person-row .name {
font-family:var(--serif); font-size:14px;
color:var(--paper); letter-spacing:0.08em;
display:flex; align-items:center; gap:6px;
}
.self-chip {
font-size:11px; padding:1px 6px;
background:rgba(201,151,58,0.12);
border:1px solid var(--border-strong);
border-radius:2px;
color:var(--gold-light);
letter-spacing:0.14em;
}
.rel-chip {
font-size:11px; padding:1px 6px;
background:rgba(255,255,255,0.04);
border:1px solid var(--border);
border-radius:2px; color:var(--mist-light);
letter-spacing:0.12em;
}
.person-row .meta {
font-size:11px; color:var(--mist);
letter-spacing:0.12em; margin-top:5px;
display:flex; gap:8px; align-items:center;
flex-wrap:wrap;
}
.paid-mark {
font-size:11px; color:var(--jade-light);
letter-spacing:0.14em;
}
.paid-mark::before { content:'✓ '; }
.lock-mark {
font-size:11px; color:var(--mist);
letter-spacing:0.14em;
}
.lock-mark::before { content:'🔒 '; opacity:0.6; }
.person-row .arrow {
color:var(--mist); font-size:14px;
padding-left:4px;
}
.person-pay-badge {
margin-top:6px;
display:inline-flex; align-items:center; gap:5px;
padding:5px 11px;
background:rgba(201,151,58,0.1);
border:1px solid var(--border-strong);
color:var(--gold-light);
border-radius:2px;
font-size:11px; letter-spacing:0.14em;
cursor:pointer;
font-family:var(--sans);
}
.person-pay-badge.disabled {
background:rgba(255,255,255,0.02);
border-color:var(--border);
color:var(--mist); cursor:not-allowed;
opacity:0.6;
}
.person-pay-badge.disabled::before { content:'🔒 '; opacity:0.6; }
.person-pay-badge:not(.disabled)::before { content:'✦ '; }
.add-btn {
display:block; width:100%;
margin-top:10px; padding:16px;
background:rgba(201,151,58,0.08);
border:1px dashed var(--border-strong);
color:var(--gold-light);
border-radius:2px;
font-size:12px; letter-spacing:0.22em;
cursor:pointer; text-align:center;
font-family:var(--sans);
}
.profile-head {
padding:24px 20px; text-align:center;
border-bottom:1px solid var(--border);
}
.profile-head .avatar-img {
width:80px; height:80px; object-fit:contain;
margin:0 auto 12px; display:block;
filter:drop-shadow(0 0 20px rgba(201,151,58,0.2));
}
.profile-head .name {
font-family:var(--serif); font-size:17px;
color:var(--paper); letter-spacing:0.1em;
}
.profile-head .auth-from {
font-size:11px; color:var(--mist);
letter-spacing:0.12em; margin-top:6px;
}
.menu-row {
padding:14px 16px;
background:rgba(255,255,255,0.02);
border:1px solid var(--border);
border-radius:2px;
margin-bottom:6px;
display:flex; align-items:center; gap:12px;
cursor:pointer;
font-size:13px; color:var(--paper);
letter-spacing:0.06em;
font-family:var(--sans);
}
.menu-row .m-icon {
font-size:16px; width:24px; text-align:center;
}
.menu-row .m-label { flex:1; }
.menu-row .m-arrow { color:var(--mist); font-size:13px; }
.menu-row .m-badge {
font-size:11px; padding:2px 8px;
background:rgba(201,151,58,0.1);
border:1px solid var(--border-strong);
border-radius:2px; color:var(--gold-light);
letter-spacing:0.12em;
}
.menu-row.danger { color:var(--rose-light); }
.menu-row.danger .m-icon { color:var(--rose-light); }
.menu-row.section-divider {
margin-top:18px; pointer-events:none;
background:transparent; border:none;
color:var(--gold); font-size:11px;
letter-spacing:0.3em; padding:6px 4px;
font-family:var(--serif);
}
.menu-row.section-divider .m-arrow { display:none; }
.menu-toggle {
width:36px; height:20px;
background:rgba(255,255,255,0.06);
border:1px solid var(--border);
border-radius:999px; position:relative;
cursor:pointer;
}
.menu-toggle::after {
content:''; position:absolute;
width:14px; height:14px;
background:var(--mist);
border-radius:50%; top:2px; left:2px;
transition:transform 0.2s, background 0.2s;
}
.menu-toggle.on::after {
transform:translateX(16px);
background:var(--gold-light);
}
.menu-toggle.on {
background:rgba(201,151,58,0.2);
border-color:var(--border-strong);
}
.contact-card {
margin-top:6px; margin-bottom:6px;
padding:14px 16px;
background:rgba(126,196,172,0.05);
border:1px solid rgba(126,196,172,0.2);
border-radius:2px;
}
.contact-card .label {
font-size:11px; color:var(--jade-light);
letter-spacing:0.18em; margin-bottom:6px;
}
.contact-card .row {
font-size:12px; color:var(--paper);
letter-spacing:0.04em; padding:3px 0;
display:flex; gap:8px;
}
.contact-card .row .key {
color:var(--mist); min-width:50px;
}
.contact-card .foot {
font-size:11px; color:var(--mist);
letter-spacing:0.04em; margin-top:8px;
padding-top:8px;
border-top:1px dashed var(--border);
}
.pay-hist-row {
padding:14px;
background:rgba(255,255,255,0.03);
border:1px solid var(--border);
border-radius:2px;
margin-bottom:8px;
}
.pay-hist-top {
display:flex; justify-content:space-between;
align-items:baseline; margin-bottom:6px;
}
.pay-hist-date {
font-size:11px; color:var(--mist);
letter-spacing:0.14em;
}
.pay-hist-name {
font-family:var(--serif); font-size:13px;
color:var(--paper); letter-spacing:0.06em;
}
.pay-hist-amount {
font-family:var(--serif); font-size:14px;
color:var(--gold-light); letter-spacing:0.04em;
margin-top:4px;
}
.pay-hist-status {
display:inline-block;
font-size:11px; padding:2px 8px;
background:rgba(126,196,172,0.08);
border:1px solid rgba(126,196,172,0.3);
color:var(--jade-light); border-radius:2px;
letter-spacing:0.14em; margin-left:6px;
}
.pay-hist-actions {
display:flex; gap:8px; margin-top:10px;
}
.pay-hist-actions button {
padding:6px 10px;
background:transparent;
border:1px solid var(--border);
color:var(--mist-light);
border-radius:2px;
font-size:11px; letter-spacing:0.14em;
cursor:pointer; font-family:var(--sans);
}
.pay-hist-actions button:hover {
border-color:var(--border-strong);
color:var(--gold-light);
}
.inq-body {
margin-top:10px;
font-size:13px; line-height:1.6;
color:var(--mist-light);
white-space:pre-wrap; word-break:break-word;
}
.inq-reply {
margin-top:10px;
padding:10px 12px;
background:rgba(201,151,58,0.06);
border-left:2px solid var(--gold-dim);
border-radius:2px;
}
.inq-reply-label {
display:block;
font-size:11px; letter-spacing:0.1em;
color:var(--gold-light);
margin-bottom:5px;
}
.inq-reply-body {
font-size:13px; line-height:1.6;
color:var(--mist-light);
white-space:pre-wrap; word-break:break-word;
}
.pay-policy-summary {
margin-top:18px;
padding:14px;
background:rgba(255,255,255,0.02);
border:1px solid var(--border);
border-radius:2px;
font-size:11px; color:var(--mist-light);
line-height:1.85; letter-spacing:0.04em;
}
.pay-policy-summary .label {
font-size:11px; color:var(--gold);
letter-spacing:0.22em; margin-bottom:8px;
}
.empty-state {
text-align:center; padding:60px 24px;
display:flex; flex-direction:column;
align-items:center; gap:14px;
}
.empty-state .icon {
font-size:42px; color:var(--gold-dim);
margin-bottom:6px;
}
.empty-state .title {
font-family:var(--serif); font-size:15px;
color:var(--paper); letter-spacing:0.1em;
}
.empty-state .desc {
font-size:12px; color:var(--mist-light);
letter-spacing:0.06em; line-height:1.85;
}
.empty-state .cta {
margin-top:8px;
padding:13px 26px;
background:rgba(201,151,58,0.1);
border:1px solid var(--gold);
color:var(--gold-light);
border-radius:3px;
font-size:12px; letter-spacing:0.22em;
cursor:pointer; font-family:var(--sans);
}
.toast-stack {
position:fixed; left:50%; transform:translateX(-50%);
bottom:80px; z-index:1500;
display:flex; flex-direction:column; gap:8px;
pointer-events:none;
}
.toast {
padding:11px 18px;
background:rgba(14,8,16,0.95);
backdrop-filter:blur(12px);
border:1px solid var(--border-strong);
border-radius:6px;
color:var(--paper);
font-size:12px; letter-spacing:0.06em;
pointer-events:auto;
animation:fadeUp 0.3s ease both;
max-width:380px;
}
.toast.success { border-color:rgba(126,196,172,0.4); color:var(--jade-light); }
.toast.error { border-color:rgba(196,97,110,0.4); color:var(--rose-light); }
.offline-strip {
position:fixed; top:0; left:0; right:0;
background:rgba(196,97,110,0.15);
border-bottom:1px solid rgba(196,97,110,0.4);
padding:8px 16px;
font-size:11px; color:var(--rose-light);
letter-spacing:0.14em; text-align:center;
z-index:2100;
display:none;
}
.offline-strip.visible { display:block; }
.offline-strip::before { content:'⚠ '; }
.hist-row {
padding:14px;
background:rgba(255,255,255,0.03);
border:1px solid var(--border);
border-radius:2px;
margin-bottom:8px;
cursor:pointer;
}
.hist-row:hover { border-color:var(--border-strong); }
.hist-top {
display:flex; justify-content:space-between;
align-items:baseline; margin-bottom:6px;
}
.hist-menu {
font-family:var(--serif); font-size:13px;
color:var(--gold-light); letter-spacing:0.08em;
}
.hist-date {
font-size:11px; color:var(--mist);
letter-spacing:0.14em;
}
.hist-person {
font-size:11px; color:var(--paper);
letter-spacing:0.04em;
}
.hist-preview {
font-size:12px; color:var(--mist-light);
line-height:1.75; margin-top:6px;
display:-webkit-box;
-webkit-line-clamp:2; -webkit-box-orient:vertical;
overflow:hidden;
}
.card-popup {
width:100%; max-width:360px;
margin:0 auto;
background:linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);
border:1px solid var(--border-strong);
border-radius:8px;
padding:30px 24px;
text-align:center;
position:relative;
animation:slideUp 0.3s ease-out;
transition:background 0.3s ease;
max-height:92vh;
max-height:92dvh;
overflow-y:auto;
}
.card-popup[data-oh="wood"]  { background:linear-gradient(160deg,#1a3d1a 0%,#0d2010 60%,#060f06 100%); }
.card-popup[data-oh="fire"]  { background:linear-gradient(160deg,#3d1a1a 0%,#200d0d 60%,#0f0606 100%); }
.card-popup[data-oh="earth"] { background:linear-gradient(160deg,#3d2e1a 0%,#20180d 60%,#0f0c06 100%); }
.card-popup[data-oh="metal"] { background:linear-gradient(160deg,#1a2a3d 0%,#0d1520 60%,#06090f 100%); }
.card-popup[data-oh="water"] { background:linear-gradient(160deg,#1a2a3d 0%,#0d1a2a 60%,#060f1e 100%); }
.card-popup::before {
content:''; position:absolute;
top:0; left:20%; right:20%; height:1px;
background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.card-popup-close {
position:absolute; top:10px; right:14px;
background:none; border:none;
color:var(--mist); font-size:20px;
cursor:pointer;
}
.cp-meta-top {
font-family:var(--serif); font-size:13px;
color:var(--gold-light); letter-spacing:0.5em;
margin-bottom:10px; line-height:1.4;
}
.cp-meta-top small {
display:block; font-size:10px;
color:var(--mist); letter-spacing:0.32em;
margin-top:2px; font-weight:400;
}
.cp-img {
width:220px; height:220px;
object-fit:contain;
margin:0 auto 14px;
display:block;
filter:drop-shadow(0 0 24px rgba(201,151,58,0.25));
}
.cp-ilju {
font-family:var(--serif); font-size:32px;
color:var(--paper); font-weight:700;
letter-spacing:0.18em; margin-bottom:6px;
}
.cp-ilju-meta {
font-family:var(--serif); font-size:11px;
color:var(--mist); letter-spacing:0.32em;
margin-bottom:8px;
}
.cp-ilju-sub {
font-size:11px; color:var(--mist);
letter-spacing:0.18em; margin-bottom:18px;
font-family:var(--sans); font-weight:300;
}
.cp-narrative {
font-size:13px; color:var(--mist-light);
line-height:1.9; letter-spacing:0.04em;
padding:14px; margin-bottom:16px;
background:rgba(14,8,16,0.5);
border:1px solid var(--border);
border-radius:2px;
text-align:left;
}
.cp-narrative strong { color:var(--gold-light); font-weight:500; }
.cp-tags {
display:flex; gap:6px; justify-content:center;
flex-wrap:wrap; margin-bottom:18px;
}
.cp-tag {
font-size:11px; padding:3px 10px;
background:rgba(201,151,58,0.08);
border:1px solid var(--border-strong);
color:var(--gold-light);
border-radius:2px; letter-spacing:0.14em;
font-family:var(--serif);
}
.cp-share-options {
display:flex; flex-direction:column; gap:8px;
margin-bottom:6px;
}
.cp-share-btn {
width:100%; padding:13px;
background:#fee500; border:none; color:#191919;
border-radius:3px;
font-size:13px; font-weight:700;
letter-spacing:0.12em; cursor:pointer;
font-family:var(--sans);
}
.cp-share-btn.secondary {
background:rgba(201,151,58,0.1);
color:var(--gold-light);
border:1px solid var(--border-strong);
font-weight:500;
}
.cp-share-foot {
font-size:11px; color:var(--mist);
letter-spacing:0.06em;
margin-top:8px;
}
.login-gate {
text-align:center;
}
.login-gate-icon {
width:60px; height:60px;
margin:0 auto 16px;
background:radial-gradient(circle, rgba(201,151,58,0.15) 0%, rgba(14,8,16,0.6) 80%);
border:1px solid var(--border-strong);
border-radius:50%;
display:flex; align-items:center; justify-content:center;
color:var(--gold-light);
font-family:var(--serif); font-size:22px;
}
.login-gate-title {
font-family:var(--serif); font-size:18px;
color:var(--paper); letter-spacing:0.1em;
margin-bottom:14px;
}
.login-gate-body {
font-size:13px; color:var(--paper-soft);
letter-spacing:0.04em; line-height:1.85;
margin-bottom:6px;
}
.login-gate-sub {
font-size:12px; color:var(--mist);
letter-spacing:0.04em; line-height:1.8;
margin-bottom:22px;
}
.login-gate .kakao-btn { margin-bottom:8px; }
.login-gate-foot {
font-size:11px; color:var(--mist);
letter-spacing:0.04em; line-height:1.7;
margin-top:14px; opacity:0.7;
}
.compat-share-card {
width:100%; max-width:340px;
margin:0 auto;
background:linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);
border:1px solid var(--border-strong);
border-radius:8px;
padding:28px 22px;
text-align:center;
position:relative;
}
.compat-share-card::before {
content:''; position:absolute;
top:0; left:20%; right:20%; height:1px;
background:linear-gradient(90deg, transparent, var(--rose-light), transparent);
}
.csc-eyebrow {
font-size:11px; color:var(--gold);
letter-spacing:0.4em; margin-bottom:12px;
font-family:var(--serif);
}
.csc-pair {
font-family:var(--serif);
font-size:18px; color:var(--paper);
letter-spacing:0.12em; margin-bottom:16px;
}
.csc-pair span { color:var(--mist-light); margin:0 8px; }
.csc-score {
font-family:var(--serif); font-size:54px; font-weight:700;
background:linear-gradient(135deg, var(--rose-light), var(--gold-light));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
line-height:1;
}
.csc-stars { color:var(--gold-light); font-size:16px; margin-top:8px; letter-spacing:0.2em; }
.csc-type {
font-family:var(--serif); font-size:14px;
color:var(--paper); letter-spacing:0.12em;
margin-top:14px; margin-bottom:20px;
}
.csc-actions {
display:flex; gap:8px; flex-direction:column;
}
.csc-actions button {
padding:13px;
border:none; border-radius:3px;
font-size:13px; font-weight:700;
letter-spacing:0.12em; cursor:pointer;
font-family:var(--sans);
}
.csc-actions .kakao { background:#fee500; color:#191919; }
.csc-actions .share {
background:rgba(201,151,58,0.1);
color:var(--gold-light);
border:1px solid var(--border-strong);
}
.csc-foot {
font-size:11px; color:var(--mist);
letter-spacing:0.04em; margin-top:14px;
line-height:1.6;
}
.confirm-dialog {
width:100%; max-width:340px;
margin:0 auto;
background:var(--ink-2);
border:1px solid var(--border-strong);
border-radius:8px;
padding:24px 22px;
text-align:center;
}
.confirm-dialog .title {
font-family:var(--serif); font-size:15px;
color:var(--paper); letter-spacing:0.06em;
margin-bottom:10px;
}
.confirm-dialog .body {
font-size:12px; color:var(--mist-light);
line-height:1.7; margin-bottom:18px;
}
.confirm-dialog .actions {
display:flex; gap:8px;
}
.confirm-dialog .actions button {
flex:1; padding:11px;
border:1px solid var(--border);
background:transparent;
color:var(--mist-light);
border-radius:2px;
font-size:12px; letter-spacing:0.14em;
cursor:pointer; font-family:var(--sans);
}
.confirm-dialog .actions .danger {
background:rgba(196,97,110,0.1);
border-color:rgba(196,97,110,0.4);
color:var(--rose-light);
}
.ai-result-box {
margin-top: 14px; padding: 20px 22px;
border: 1px solid rgba(201,151,58,0.18);
background: rgba(255,255,255,0.02);
border-radius: 1px;
font-family: var(--sans); font-size: 14px;
color: var(--mist-light); line-height: 2;
}
.ai-result-box .ai-title, .qa-answer .ai-title {
font-size: 17px; font-weight: 700;
color: var(--gold-light);
margin-bottom: 24px; line-height: 1.6;
}
.ai-result-box .ai-section, .qa-answer .ai-section { margin-bottom: 22px; }
.ai-result-box .ai-section:last-child, .qa-answer .ai-section:last-child { margin-bottom: 0; }
.ai-result-box .ai-subtitle, .qa-answer .ai-subtitle {
font-size: 15px; font-weight: 600;
color: var(--gold); margin-bottom: 6px;
}
.ai-result-box .ai-section p, .qa-answer .ai-section p { margin: 0; }
.ai-result-box.loading {
display: flex !important; align-items: center; justify-content: center;
gap: 10px; min-height: 80px; color: var(--gold);
font-size: 13px; letter-spacing: 0.1em;
}
@keyframes ai-pulse { 0%,100%{opacity:0.4} 50%{opacity:1} }
.ai-result-box.loading::before { content:'✦'; animation: ai-pulse 1.2s ease infinite; }
.share-buttons{ display:flex; gap:9px; justify-content:center; flex-wrap:wrap; }
.share-btn { padding:12px 24px; border-radius:1px; font-family:var(--sans); font-size:14px; font-weight:500; letter-spacing:.08em; cursor:pointer; transition:all .3s; border:1px solid; }
.share-btn.kakao  { background:#fee500; color:#3c1e1e; border-color:#fee500; }
.share-btn.kakao:hover  { background:#ffd700; box-shadow:0 4px 16px rgba(254,229,0,.3); transform:translateY(-1px); }
.share-btn.link   { background:transparent; color:var(--gold-light); border-color:var(--gold); }
.share-btn.link:hover   { background:rgba(201,151,58,.1); transform:translateY(-1px); }
.qa-card {
padding: 12px 14px;
background: rgba(232,160,168,0.06);
border: 1px solid rgba(232,160,168,0.2);
border-radius: 8px;
margin-bottom: 10px;
}
.qa-card .qa-question {
font-size: 12px; color: var(--rose-light);
letter-spacing: 0.08em; margin-bottom: 8px;
font-family: var(--sans);
}
.qa-card .qa-answer {
font-size: 13px; color: var(--paper);
line-height: 1.8; letter-spacing: 0.02em;
}
.qa-card.loading .qa-answer { opacity: 0.6; font-style: italic; }
.example-chips {
display: flex; flex-wrap: wrap; gap: 6px;
padding: 8px 0 12px;
}
.example-chip {
padding: 6px 10px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border);
color: var(--mist-light);
border-radius: 999px;
font-size: 11px; font-family: var(--sans);
cursor: pointer; transition: all 0.2s;
}
.example-chip:hover {
background: rgba(232,160,168,0.08);
border-color: rgba(232,160,168,0.3);
color: var(--rose-light);
}
.ai-incomplete-notice, .ai-resume-hint {
font-size: 12px; color: var(--mist);
margin-top: 12px; padding: 8px 10px;
border-left: 2px solid var(--border-strong);
font-family: var(--sans);
}
.ai-retry-btn {
padding: 4px 10px;
background: rgba(232,160,168,0.1);
border: 1px solid rgba(232,160,168,0.3);
color: var(--rose-light);
border-radius: 4px; font-size: 11px;
cursor: pointer; font-family: var(--sans);
margin-left: 6px;
}
.ai-toast {
position: fixed; bottom: 80px; left: 50%;
transform: translateX(-50%) translateY(20px);
padding: 10px 16px;
background: rgba(14,8,16,0.95);
border: 1px solid var(--border-strong);
color: var(--paper);
border-radius: 6px; font-size: 12px;
font-family: var(--sans);
opacity: 0; transition: all 0.3s;
z-index: 1200;
}
.ai-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.v2-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 64px 16px; color: var(--mist); font-size: 13px; letter-spacing: 0.08em; }
.v2-loading-spinner { width: 28px; height: 28px; border: 3px solid rgba(255,255,255,0.10); border-top-color: var(--gold-light); border-radius: 50%; animation: spin 0.7s linear infinite; box-shadow: 0 0 12px rgba(232,200,122,0.18); }
.ipchun-notice {
position: relative;
margin: 0 0 12px;
padding: 12px 36px 12px 14px;
background: rgba(201,151,58,0.07);
border: 1px solid var(--border);
border-radius: 12px;
}
.ipchun-notice-title { font-size: 13px; font-weight: 700; color: var(--gold-light); margin-bottom: 5px; }
.ipchun-notice-body { font-size: 12.5px; line-height: 1.6; color: var(--mist-light); }
.ipchun-notice-close {
position: absolute; top: 6px; right: 8px;
background: transparent; border: none; appearance: none;
color: var(--mist); font-size: 16px; line-height: 1; cursor: pointer; padding: 4px 6px;
}