/* DearAlter — 절제된 에디토리얼 톤 (기획 10): 크림 · 웜그레이 · 차콜 · 톤다운 로즈, 넉넉한 여백, 세리프 제목 + 산세리프 본문.
   모바일 우선. 넓은 화면에서는 가운데 480px 기둥. */
:root {
  --bg: #f6f1ea; --panel: #fffdf9; --panel2: #efe8de; --ink: #23201e; --ink2: #5b544e; --muted: #968d85;
  --line: #e7ded3; --line2: #d9cec1; --rose: #c58f89; --rose-deep: #a56e69; --rose-soft: #f1dcd7; --rose-wash: #f8ece8;
  --ok: #6c9578; --danger: #b25c50; --dark: #23201e;
  --serif: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --tabs: 62px; --r: 18px;
}
/* 세리프(Cormorant)의 기본 숫자는 옛 숫자체라 1 이 I 처럼 보인다 — font 축약형이 이 값을 되돌리므로 !important */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; font-variant-numeric: lining-nums !important; }
html { background: #ebe4d9; }
body { margin: 0; font: 15px/1.5 var(--sans); color: var(--ink); background: #ebe4d9; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
img { display: block; max-width: 100%; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--rose-deep); outline-offset: 2px; border-radius: 6px; }

.shell { position: relative; max-width: 480px; min-height: 100dvh; margin: 0 auto; background: var(--bg); box-shadow: 0 0 80px rgba(60, 40, 20, .08); }
.main { padding: 0 20px calc(var(--tabs) + 28px + env(safe-area-inset-bottom)); min-height: 100dvh; display: flex; flex-direction: column; gap: 18px; }
.main.bare { padding: 0; gap: 0; }

/* ── 아래 탭 ── */
.tabs { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 50; width: min(480px, 100%); height: calc(var(--tabs) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(5, 1fr); background: rgba(255, 253, 249, .94); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.tabs a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: 10.5px; letter-spacing: .01em; }
.tabs a.on { color: var(--ink); }
.tabs a.on svg { fill: var(--ink); stroke: var(--ink); }
.tabs a[data-nav="insights"].on svg, .tabs a[data-nav="chat"].on svg { fill: none; stroke-width: 2.1; }
.tabs .dot { position: absolute; top: 9px; left: calc(50% + 8px); width: 7px; height: 7px; border-radius: 50%; background: var(--rose-deep); }

/* ── 머리 ── */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: calc(18px + env(safe-area-inset-top)); min-height: 60px; }
.top h1 { font: 500 27px/1.1 var(--serif); letter-spacing: -.01em; }
.top .sub { display: block; font: 400 12.5px var(--sans); color: var(--muted); margin-top: 3px; letter-spacing: 0; }
.top.center { justify-content: center; position: relative; }
.top.center h1 { font-size: 22px; text-align: center; }
.top.center .back, .top.center .act { position: absolute; top: calc(18px + env(safe-area-inset-top)); }
.top.center .back { left: -6px; } .top.center .act { right: -4px; }
.back, .act { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; color: var(--ink); font-size: 14px; }
.logo { font: 500 21px var(--serif); letter-spacing: .01em; }
.logo sup { font: 500 9px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--rose-deep); margin-left: 5px; vertical-align: 9px; }

/* ── 공통 조각 ── */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.muted { color: var(--ink2); } .tiny { font-size: 12px; color: var(--muted); line-height: 1.55; }
.kicker { font: 600 10.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--rose-deep); }
.serif { font-family: var(--serif); }
.link { text-decoration: underline; text-underline-offset: 3px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; border-radius: 999px; font-weight: 500; font-size: 15px; width: 100%; transition: opacity .15s, transform .1s; }
.btn:active { transform: scale(.985); } .btn:disabled { opacity: .45; cursor: default; }
.btn svg { width: 18px; height: 18px; }
.btn-dark { background: var(--dark); color: #fbf7f1; }
.btn-light { background: var(--panel); border: 1px solid var(--line2); }
.btn-rose { background: var(--rose-soft); color: #7c4d49; }
.btn-ghost { color: var(--ink2); min-height: 44px; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 13.5px; width: auto; }
.row { display: flex; gap: 10px; } .row > * { flex: 1; }
.spinner { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line2); border-top-color: var(--ink); animation: spin .8s linear infinite; display: inline-block; }
.loading, .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 70px 20px; text-align: center; color: var(--ink2); }
.empty h3 { font: 500 22px var(--serif); color: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.main > * { animation: fadeUp .35s ease both; }

/* 얼굴: 사진 또는 머리글자 */
/* 사진은 style="--ph:url(…)" 로 받는다 — 사진이 없거나 못 받아도 아래 바탕이 보인다 */
.av { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; background: var(--ph, none) center/cover no-repeat, linear-gradient(140deg, #dcc7bd, #c9a9a2); color: #fff; font: 500 1em var(--serif); overflow: hidden; }
.av.alter { background: var(--ph, none) center/cover no-repeat, linear-gradient(140deg, #3a3531, #23201e); color: #e9cfc9; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--rose); }
.av.pic { color: transparent; }

.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; background: var(--panel2); border-radius: 999px; }
.seg button { min-height: 36px; border-radius: 999px; font-size: 13px; color: var(--ink2); white-space: nowrap; padding: 0 6px; }
.seg button.on { background: var(--dark); color: #fbf7f1; }

.field { display: flex; flex-direction: column; gap: 7px; }
.field > span { font-size: 12.5px; color: var(--ink2); font-weight: 500; }
.field input, .field select, .field textarea, .input { width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line2); background: var(--panel); outline: none; -webkit-appearance: none; appearance: none; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23968d85' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 40px; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { border-color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line2); background: var(--panel); font-size: 14px; color: var(--ink2); }
.chip.on { background: var(--dark); border-color: var(--dark); color: #fbf7f1; }
.chip.sm { min-height: 34px; padding: 0 13px; font-size: 13px; }
.err { color: var(--danger); font-size: 13.5px; }
.warn { color: var(--danger); font-size: 13.5px; }

/* ── 입장 암호 · 연령 확인 ── */
.dw-gate { position: fixed; inset: 0; z-index: 400; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 24px; overflow: auto; }
.gate-card { width: min(380px, 100%); display: flex; flex-direction: column; gap: 14px; text-align: center; }
.gate-card .logo { font-size: 34px; margin-bottom: 4px; }
.gate-card p { color: var(--ink2); }
.gate-card input { min-height: 50px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line2); background: var(--panel); text-align: center; outline: none; }

/* ── 시트 · 모달 ── */
.overlay, .modal { position: fixed; inset: 0; z-index: 200; background: rgba(35, 32, 30, .42); display: flex; align-items: flex-end; justify-content: center; animation: fade .2s ease both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.sheet { position: relative; width: min(480px, 100%); max-height: 92dvh; overflow: auto; background: var(--bg); border-radius: 26px 26px 0 0; padding: 26px 22px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; animation: fadeUp .28s ease both; }
.sheet h2 { font: 500 26px/1.15 var(--serif); padding-right: 30px; }
.sheet-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; font-size: 22px; color: var(--muted); }
.sheet textarea { width: 100%; padding: 13px 15px; border-radius: 14px; border: 1px solid var(--line2); background: var(--panel); resize: vertical; outline: none; }
.gbtn { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 44px; justify-content: center; }
.keep { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13.5px; color: var(--ink2); }
.keep input { width: 17px; height: 17px; accent-color: var(--dark); }
.fb-stars { display: flex; gap: 6px; justify-content: center; }
.fb-stars button { font-size: 30px; color: var(--line2); } .fb-stars button.on { color: var(--rose); }
.toast { position: fixed; left: 50%; bottom: calc(var(--tabs) + 22px + env(safe-area-inset-bottom)); transform: translate(-50%, 16px); z-index: 500; max-width: min(92vw, 420px); padding: 12px 18px; border-radius: 14px; background: var(--dark); color: #fbf7f1; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; text-align: center; box-shadow: 0 10px 40px rgba(35, 32, 30, .25); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── 첫 화면 (로그인 전) ── */
.landing { position: relative; min-height: 100dvh; display: flex; flex-direction: column; justify-content: space-between; padding: calc(26px + env(safe-area-inset-top)) 28px calc(34px + env(safe-area-inset-bottom)); color: #fbf7f1; background: var(--ph, none) center/cover no-repeat, radial-gradient(120% 80% at 80% 20%, #4a3d36 0%, #2a2420 60%); overflow: hidden; }
.landing::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(25, 20, 17, .50) 0%, rgba(25, 20, 17, .12) 38%, rgba(25, 20, 17, .30) 62%, rgba(20, 16, 14, .86) 100%); }
.landing > * { position: relative; }
.landing .logo { color: #fbf7f1; font-size: 19px; } .landing .logo sup { color: #e9cfc9; }
.landing h1 { font: 400 clamp(64px, 21vw, 92px)/.92 var(--serif); letter-spacing: -.02em; margin-top: 8vh; }
.landing .lede { font: 400 23px/1.25 var(--serif); margin-top: 16px; max-width: 13em; }
.landing .pitch { margin-top: 22px; font-size: 14px; line-height: 1.65; color: rgba(251, 247, 241, .82); max-width: 15em; }
.landing .acts { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.landing .btn-white { background: #fbf7f1; color: var(--ink); }
.landing .acts a, .landing .acts button.link { font-size: 14px; color: rgba(251, 247, 241, .9); }

/* ── 가입 (세 단계) · 질문 ── */
.composer { padding: 0 24px calc(28px + env(safe-area-inset-bottom)); min-height: 100dvh; display: flex; flex-direction: column; gap: 22px; }
.composer .steps { display: flex; gap: 6px; padding-top: calc(22px + env(safe-area-inset-top)); }
.composer .steps i { flex: 1; height: 3px; border-radius: 3px; background: var(--line2); } .composer .steps i.on { background: var(--ink); }
.composer h1 { font: 500 34px/1.08 var(--serif); letter-spacing: -.01em; }
.composer .lead { color: var(--ink2); margin-top: -12px; }
.composer .grow { flex: 1; }
.vibes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vibe { text-align: left; padding: 14px; border-radius: 16px; border: 1px solid var(--line2); background: var(--panel); display: flex; flex-direction: column; gap: 3px; }
.vibe b { font: 500 19px var(--serif); } .vibe span { font-size: 12.5px; color: var(--ink2); line-height: 1.4; }
.vibe.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

.qbub { background: var(--rose-wash); border: 1px solid var(--rose-soft); border-radius: 20px 20px 20px 6px; padding: 18px; font: 500 21px/1.3 var(--serif); }
.qbub small { display: block; font: 500 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--rose-deep); margin-bottom: 8px; }
.opts { display: flex; flex-direction: column; gap: 8px; }
.opt { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); text-align: left; }
.opt i { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line2); flex: none; display: inline-flex; align-items: center; justify-content: center; }
.opt.on { border-color: var(--rose); } .opt.on i { border-color: var(--rose-deep); background: var(--rose-deep); box-shadow: inset 0 0 0 4px var(--panel); }

/* ── Home ── */
.hello { display: flex; justify-content: space-between; align-items: flex-start; padding-top: calc(26px + env(safe-area-inset-top)); }
.hello h1 { font: 400 25px/1.15 var(--serif); } .hello h1 b { display: block; font-weight: 500; font-size: 38px; letter-spacing: -.01em; }
.hello p { color: var(--ink2); margin-top: 8px; }
.altercard { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 190px; padding: 22px; border-radius: 22px; color: #fbf7f1; background: var(--ph, none) center 25%/cover no-repeat, #2a2521; overflow: hidden; }
.altercard::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(28, 23, 20, .88) 0%, rgba(28, 23, 20, .55) 55%, rgba(28, 23, 20, .25) 100%); }
.altercard > * { position: relative; }
.altercard small { font: 400 21px var(--serif); opacity: .9; } .altercard b { font: 500 44px/1 var(--serif); letter-spacing: -.01em; } .altercard em { font-style: normal; font-size: 13px; opacity: .8; margin-top: 8px; }
.altercard .go { position: absolute; right: 20px; bottom: 22px; width: 40px; height: 40px; border-radius: 50%; background: rgba(251, 247, 241, .18); display: flex; align-items: center; justify-content: center; }
.altercard .mono { position: absolute; right: -18px; top: -30px; font: 400 210px/1 var(--serif); color: rgba(233, 207, 201, .13); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px 8px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.stat svg { color: var(--rose); width: 22px; height: 22px; margin-bottom: 4px; } .stat b { font: 500 22px var(--serif); } .stat span { font-size: 11px; color: var(--muted); }
.status { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--rose-wash); border: 1px solid var(--rose-soft); font-size: 14px; }
.status i { width: 9px; height: 9px; border-radius: 50%; background: var(--rose-deep); animation: pulse 1.4s ease infinite; flex: none; }
.bar { height: 6px; border-radius: 6px; background: var(--panel2); overflow: hidden; } .bar i { display: block; height: 100%; border-radius: 6px; background: var(--rose); transition: width .5s ease; }
.sect { display: flex; align-items: baseline; justify-content: space-between; margin-top: 4px; }
.sect h2 { font: 500 23px var(--serif); } .sect a { font-size: 13px; color: var(--ink2); }
.hl { display: flex; gap: 12px; overflow-x: auto; margin: 0 -20px; padding: 0 20px 4px; scrollbar-width: none; scroll-snap-type: x mandatory; }
.hl::-webkit-scrollbar { display: none; }
.hlcard { position: relative; flex: none; width: 62%; aspect-ratio: 4 / 4.6; border-radius: 18px; overflow: hidden; color: #fbf7f1; background: var(--ph, none) center/cover no-repeat, linear-gradient(160deg, #6b5a52, #3a332e); display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; scroll-snap-align: start; }
.hlcard::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(25, 20, 17, 0) 35%, rgba(25, 20, 17, .82) 100%); }
.hlcard > * { position: relative; } .hlcard b { font: 500 24px/1.05 var(--serif); } .hlcard span { font-size: 12.5px; opacity: .88; line-height: 1.4; margin-top: 4px; }
.hlcard .tag { position: absolute; top: 12px; left: 12px; }
.tag { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: 999px; font: 600 10px var(--sans); letter-spacing: .08em; text-transform: uppercase; background: rgba(251, 247, 241, .92); color: var(--ink); }
.tag.rose { background: var(--rose-soft); color: #7c4d49; }

/* ── Matches ── */
.mcard { display: grid; grid-template-columns: 104px 1fr; gap: 14px; padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; }
.mcard .ph { position: relative; border-radius: 14px; aspect-ratio: 3 / 3.9; background: var(--ph, none) center/cover no-repeat, linear-gradient(150deg, #dccabf, #c3a59d); display: flex; align-items: center; justify-content: center; font: 400 44px var(--serif); color: rgba(255, 255, 255, .85); overflow: hidden; }
.mcard .ph .tag { position: absolute; left: 6px; bottom: 6px; }
.mcard .info { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 2px 0; }
.mcard .nm { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.mcard h3 { font: 500 22px/1.1 var(--serif); } .mcard .where { font-size: 12px; color: var(--muted); }
.mcard blockquote { margin: 4px 0 8px; font-size: 13px; line-height: 1.45; color: var(--ink2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mcard .btn { margin-top: auto; }
.ring { --p: 0; width: 46px; height: 46px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font: 600 12px var(--sans); background: radial-gradient(closest-side, var(--panel) 80%, transparent 82%), conic-gradient(var(--rose) calc(var(--p) * 1%), var(--panel2) 0); }
.ring.big { width: 78px; height: 78px; font: 500 22px var(--serif); background: radial-gradient(closest-side, var(--panel) 84%, transparent 86%), conic-gradient(var(--rose) calc(var(--p) * 1%), var(--panel2) 0); }
.mrow { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; }
.mrow .txt { flex: 1; min-width: 0; } .mrow .txt > b { font: 500 19px/1.2 var(--serif); display: block; } .mrow .txt > span { font-size: 13px; color: var(--ink2); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.mrow .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rose-deep); flex: none; }
.mrow.dim { opacity: .62; }
.shimmer { background: linear-gradient(100deg, var(--panel) 30%, var(--rose-wash) 50%, var(--panel) 70%); background-size: 220% 100%; animation: shimmer 2.2s linear infinite; }
@keyframes shimmer { from { background-position: 180% 0; } to { background-position: -40% 0; } }

/* ── 소개 하나: 사진 · 기록 · 분석 ── */
.phero { position: relative; aspect-ratio: 4 / 3.3; border-radius: 22px; overflow: hidden; color: #fbf7f1; background: var(--ph, none) center 30%/cover no-repeat, linear-gradient(150deg, #cdb5aa, #a98b84); display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; }
.phero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(25, 20, 17, 0) 45%, rgba(25, 20, 17, .78) 100%); }
.phero > * { position: relative; } .phero h2 { font: 500 34px/1 var(--serif); } .phero p { font-size: 13px; opacity: .9; margin-top: 5px; }
.phero .ring { position: absolute; top: 14px; right: 14px; background: radial-gradient(closest-side, rgba(255, 253, 249, .96) 80%, transparent 82%), conic-gradient(var(--rose) calc(var(--p) * 1%), rgba(255, 255, 255, .5) 0); color: var(--ink); }
.phero .tag { position: absolute; top: 16px; left: 16px; }
.phero .mono { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 400 120px var(--serif); color: rgba(255, 255, 255, .5); }
.note { font: 400 italic 20px/1.35 var(--serif); padding: 2px 4px; } .note cite { display: block; font: 500 11px var(--sans); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--rose-deep); margin-bottom: 6px; }
.sim { display: flex; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--panel2); font-size: 12.5px; line-height: 1.5; color: var(--ink2); }
.sim svg { width: 18px; height: 18px; margin-top: 1px; color: var(--rose-deep); }
.turns { display: flex; flex-direction: column; gap: 16px; }
.turn { display: grid; grid-template-columns: 36px 1fr; gap: 10px; }
.turn .who { font-size: 12px; font-weight: 600; margin-bottom: 4px; display: flex; justify-content: space-between; gap: 8px; align-items: center; } .turn .who span { color: var(--muted); font-weight: 400; }
.turn .t { background: var(--panel); border: 1px solid var(--line); border-radius: 4px 16px 16px 16px; padding: 11px 14px; font-size: 14.5px; line-height: 1.5; }
.turn.mine .t { background: var(--rose-wash); border-color: var(--rose-soft); }
.turn.flag .t { text-decoration: line-through; text-decoration-color: rgba(165, 110, 105, .6); color: var(--muted); }
.notme { font-size: 11.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; font-weight: 400; }
.fbbox { display: flex; flex-direction: column; gap: 12px; text-align: center; padding: 20px 16px; }
.fbbox h3 { font: 500 23px var(--serif); }
.duo { display: flex; align-items: center; justify-content: center; gap: 14px; text-align: center; font-size: 13px; color: var(--ink2); }
.duo svg { color: var(--rose); fill: var(--rose); width: 20px; height: 20px; margin-bottom: 18px; }
.duo div { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.scorebox { display: flex; align-items: center; gap: 16px; }
.scorebox b { font: 500 34px/1 var(--serif); } .scorebox .ring svg { width: 26px; height: 26px; color: var(--rose); fill: var(--rose); } .scorebox span { font-size: 13px; color: var(--ink2); }
.checks { display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; margin: 0; }
.checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.checks li::before { content: ''; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat; }
.checks.q li::before { background: var(--rose-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctext x='12' y='17' text-anchor='middle' font-family='Georgia' font-size='15' fill='%23a56e69'%3E?%3C/text%3E%3C/svg%3E") center/16px no-repeat; }
.h3 { font: 600 13px var(--sans); letter-spacing: .02em; margin-bottom: 10px; }
.decide { position: sticky; bottom: calc(var(--tabs) + 10px + env(safe-area-inset-bottom)); z-index: 20; display: flex; flex-direction: column; gap: 8px; padding: 12px; margin: 6px -8px 0; border-radius: 22px; background: rgba(255, 253, 249, .96); backdrop-filter: blur(12px); border: 1px solid var(--line); box-shadow: 0 12px 34px rgba(60, 40, 20, .12); }
.decide p { font-size: 13px; color: var(--ink2); text-align: center; padding: 2px 6px; }

/* ── 대화 (Alter · 사람) ── */
.chat { display: flex; flex-direction: column; height: 100dvh; padding-bottom: calc(var(--tabs) + env(safe-area-inset-bottom)); }
.chat.full { padding-bottom: 0; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: calc(14px + env(safe-area-inset-top)) 16px 12px; border-bottom: 1px solid var(--line); background: var(--bg); }
.chat-head b { font: 500 21px/1.1 var(--serif); display: block; } .chat-head span { font-size: 12px; color: var(--muted); }
.chat-head .grow { flex: 1; min-width: 0; }
.msgs { flex: 1; overflow-y: auto; padding: 18px 16px 10px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.bub { max-width: 82%; padding: 11px 15px; border-radius: 18px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; animation: fadeUp .25s ease both; }
.bub.them { align-self: flex-start; background: var(--panel); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.bub.me { align-self: flex-end; background: var(--rose-soft); color: #4b3431; border-bottom-right-radius: 6px; }
.bub.typing { display: inline-flex; gap: 5px; padding: 15px 16px; } .bub.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: pulse 1.1s ease infinite; } .bub.typing i:nth-child(2) { animation-delay: .18s; } .bub.typing i:nth-child(3) { animation-delay: .36s; }
.stamp { align-self: center; font-size: 11px; color: var(--muted); margin: 6px 0 2px; }
.learned { align-self: flex-start; display: flex; flex-direction: column; gap: 5px; max-width: 88%; }
.lchip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 11px; border-radius: 12px; background: var(--panel2); font-size: 12px; color: var(--ink2); line-height: 1.35; }
.lchip b { font-weight: 600; color: var(--rose-deep); flex: none; } .lchip.gone { opacity: .5; text-decoration: line-through; }
.lchip button { width: 22px; height: 22px; border-radius: 50%; color: var(--muted); font-size: 15px; flex: none; }
.mcardlink { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--dark); color: #fbf7f1; font-size: 13.5px; }
.mcardlink svg { width: 16px; height: 16px; }
.send { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg); }
.chat:not(.full) .send { padding-bottom: 10px; }
.send textarea { scrollbar-width: none; flex: 1; min-height: 46px; max-height: 120px; padding: 12px 16px; border-radius: 23px; border: 1px solid var(--line2); background: var(--panel); resize: none; outline: none; line-height: 1.4; }
.send button { width: 46px; height: 46px; border-radius: 50%; background: var(--rose); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; } .send button:disabled { opacity: .4; }
.hint { align-self: center; text-align: center; font-size: 12.5px; color: var(--ink2); background: var(--panel2); border-radius: 14px; padding: 10px 14px; max-width: 92%; line-height: 1.5; }
.sugg { display: flex; gap: 8px; overflow-x: auto; padding: 0 12px 8px; scrollbar-width: none; } .sugg::-webkit-scrollbar { display: none; }
.sugg button { flex: none; max-width: 78%; padding: 8px 13px; border-radius: 14px; border: 1px solid var(--line2); background: var(--panel); font-size: 12.5px; color: var(--ink2); text-align: left; }

/* ── Insights ── */
.overview { display: flex; align-items: center; gap: 18px; }
.overview p { font-size: 13.5px; color: var(--ink2); line-height: 1.5; } .overview b { display: block; font: 500 13px var(--sans); color: var(--ink); margin-bottom: 3px; }
.lgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lgrid div { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 13px; font-size: 13.5px; line-height: 1.45; display: flex; gap: 9px; }
.lgrid svg { width: 18px; height: 18px; color: var(--rose); margin-top: 1px; }
.fgroup { display: flex; flex-direction: column; gap: 8px; }
.fgroup h3 { font: 600 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.fact { display: flex; align-items: center; gap: 8px; padding: 12px 8px 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; font-size: 14px; line-height: 1.45; }
.fact p { flex: 1; min-width: 0; } .fact.priv p { color: var(--ink2); }
.fact button { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); flex: none; }
.fact button svg { width: 18px; height: 18px; } .fact button.on { color: var(--rose-deep); }
.addrow { display: flex; flex-wrap: wrap; gap: 8px; } .addrow input { flex: 1; min-width: 0; }
.addrow select { flex: 1 0 100%; min-height: 50px; -webkit-appearance: none; appearance: none; border-radius: 14px; border: 1px solid var(--line2); background: var(--panel); padding: 0 10px; }

/* ── Profile ── */
.pcard { display: flex; align-items: center; gap: 16px; padding: 6px 0; }
.pcard b { font: 500 26px/1.1 var(--serif); display: block; } .pcard span { font-size: 13px; color: var(--muted); }
.menu { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.menu > * { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 10px 16px; text-align: left; width: 100%; border-bottom: 1px solid var(--line); }
.menu > *:last-child { border-bottom: 0; }
.menu .t { flex: 1; min-width: 0; } .menu .t b { display: block; font-weight: 500; font-size: 15px; } .menu .t span { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.menu > * > svg:first-child { color: var(--ink2); } .menu > * > svg:last-child { width: 16px; height: 16px; color: var(--muted); }
.menu .danger b { color: var(--danger); }
.switch { position: relative; width: 46px; height: 28px; border-radius: 28px; background: var(--line2); flex: none; transition: background .2s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.switch.on { background: var(--dark); } .switch.on::after { transform: translateX(18px); }
.sisters { display: flex; flex-direction: column; gap: 4px; }
.sisters-title { font: 500 21px var(--serif); margin-bottom: 6px; }
.sister { display: flex; gap: 14px; align-items: center; padding: 9px 0; }
.sister img { width: 46px; height: 46px; border-radius: 22%; flex: none; background: var(--panel2); }
.sister b { display: block; font-weight: 500; } .sister span span { display: block; font-size: 12.5px; color: var(--ink2); line-height: 1.4; }

/* ── 안내 ── */
.guide { display: flex; flex-direction: column; gap: 22px; padding-bottom: 20px; }
.guide h1 { font: 500 36px/1.05 var(--serif); } .guide h2 { font: 500 24px var(--serif); margin-bottom: 10px; }
.guide p, .guide li { color: var(--ink2); line-height: 1.6; } .guide b { color: var(--ink); font-weight: 600; }
.guide ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 6px; align-items: center; text-align: center; font-size: 12px; color: var(--ink2); line-height: 1.4; }
.flow b { display: block; font: 500 17px var(--serif); color: var(--ink); } .flow .ar { width: 16px; height: 16px; color: var(--muted); }
.flow .ico { display: inline-flex; width: 42px; height: 42px; border-radius: 50%; background: var(--rose-wash); align-items: center; justify-content: center; color: var(--rose-deep); margin-bottom: 6px; }
.steps3 { display: flex; flex-direction: column; gap: 14px; }
.steps3 > div { display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; }
.steps3 i { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; background: var(--dark); color: #fbf7f1; font: 500 18px var(--serif); font-style: normal; display: flex; align-items: center; justify-content: center; }
.steps3 b { font-weight: 600; color: var(--ink); } .steps3 p { font-size: 14px; }
.shots { display: flex; gap: 12px; overflow-x: auto; margin: 0 -20px; padding: 0 20px 6px; scrollbar-width: none; } .shots::-webkit-scrollbar { display: none; }
.shots figure { flex: none; width: 56%; margin: 0; } .shots img { border-radius: 18px; border: 1px solid var(--line); } .shots figcaption { font-size: 12px; color: var(--muted); text-align: center; margin-top: 6px; }

/* ── 설치 팝업 (install.js, 시리즈 공통) ── */
.dwi { position: fixed; left: 0; right: 0; bottom: 0; z-index: 140; display: flex; justify-content: center; padding: 0 12px calc(var(--tabs) + 12px + env(safe-area-inset-bottom)); pointer-events: none; animation: fadeUp .4s ease both; }
.dwi-card { pointer-events: auto; width: min(440px, 100%); background: var(--panel); color: var(--ink); border: 1px solid var(--line2); border-radius: 20px; padding: 16px 16px 14px; box-shadow: 0 18px 50px rgba(60, 40, 20, .18); display: flex; flex-direction: column; gap: 12px; }
.dwi-head { display: flex; gap: 12px; align-items: flex-start; }
.dwi-head img { width: 48px; height: 48px; border-radius: 12px; flex: none; }
.dwi-head b { display: block; font-weight: 600; font-size: 16px; }
.dwi-head p { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink2); }
.dwi-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.dwi-btn { padding: 9px 14px; border-radius: 999px; font-size: 13px; }
.dwi-main { background: var(--dark); color: #fbf7f1; font-weight: 500; }
.dwi-ghost { border: 1px solid var(--line2); color: var(--ink2); }
.dwi-more { font-size: 13.5px; color: var(--ink); }
.dwi-steps { margin: 0; padding-left: 20px; line-height: 1.9; list-style: decimal; }
.dwi-ico { display: inline-flex; vertical-align: -4px; padding: 2px 4px; border-radius: 6px; background: var(--panel2); color: var(--rose-deep); }
.dwi-guide { margin: 0 0 8px; line-height: 1.6; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }