/* ═══════════════ 토큰 ═══════════════ */
:root{
  /* 랜딩 전용 */
  --ink:#121218;
  --ink-2:#1c1c25;
  --ink-3:#2a2a36;
  --coral:#ff6b4a;
  --coral-dim:#ff8f75;
  --kakao:#fee500;
  --kakao-bg:#a8bccd;
  --text:#1a1a20;
  --muted:#7c7c8a;
  --danger:#e03e3e;
  --warn:#d97706;
  --ok:#2f9e6e;
  --r:16px;

  /* 앱 테마 토큰 — 기본: 차분한 미니멀 */
  --abg:#f6f5f2; --acard:#ffffff; --atx:#1b1c20; --amut:#75767d;
  --aline:#e7e5e0; --dash:#cfccc5;
  --aacc:#b9465c; --abtn:#1b1c20; --abtntx:#ffffff;
  --fake:#f4f2ee;
  --kbg:#b3c2ce; --kthem:#ffffff; --kthemtx:#1b1c20;
  --sitbg:rgba(255,255,255,.5); --sittx:#33475a;
  --avbg:#dbe3ea; --avtx:#44576a;
  --rr:20px;
}
/* 밤의 다이어리 */
body[data-theme="night"]{
  --abg:#141519; --acard:#1f2026; --atx:#ececf0; --amut:#8f9098;
  --aline:#2e2f36; --dash:#45464e;
  --aacc:#ff7a5c; --abtn:#ff7a5c; --abtntx:#ffffff;
  --fake:#2a2b31;
  --kbg:#1d2831; --kthem:#2e3b45; --kthemtx:#e8edf1;
  --sitbg:rgba(255,255,255,.08); --sittx:#aebecb;
  --avbg:#33404a; --avtx:#c3d0da;
  --rr:16px;
}
/* 포근한 파스텔 */
body[data-theme="pastel"]{
  --abg:#f5f2f9; --acard:#ffffff; --atx:#2b2733; --amut:#847e91;
  --aline:#e9e3f0; --dash:#d4cbe0;
  --aacc:#7d6bcf; --abtn:#7d6bcf; --abtntx:#ffffff;
  --fake:#f1edf6;
  --kbg:#bcc8dd; --kthem:#ffffff; --kthemtx:#2b2733;
  --sitbg:rgba(255,255,255,.55); --sittx:#4a5570;
  --avbg:#d9deeb; --avtx:#5a6284;
  --rr:22px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* 폰에서 긴 문자열(ㅋㅋㅋ 연타·URL 등)이 화면 폭을 밀어내 횡스크롤이 생기는 것 방지.
   clip은 hidden과 달리 sticky 헤더를 깨지 않는다. */
html,body{overflow-x:clip}
body{
  font-family:'Pretendard Variable',Pretendard,-apple-system,'Malgun Gothic',sans-serif;
  color:var(--text); background:var(--ink);
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
  overflow-wrap:anywhere;
}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
[hidden],.hidden{display:none !important}

/* ═══════════════ 랜딩 ═══════════════ */
#landing{background:var(--ink);color:#f2f0ec;overflow-x:hidden}

.nav{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 22px;
  background:rgba(18,18,24,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.logo{font-weight:800;font-size:17px;letter-spacing:-.02em}
.nav-cta{
  background:var(--coral);color:#fff;font-weight:700;font-size:13.5px;
  padding:9px 16px;border-radius:99px;
}
.nav-cta:hover{background:var(--coral-dim)}
.nav-r{display:flex;align-items:center;gap:8px}
.lang-btn{
  color:#a9a9b6;font-weight:700;font-size:12.5px;
  padding:8px 12px;border-radius:99px;border:1px solid rgba(255,255,255,.18);
}
.lang-btn:hover{color:#fff;border-color:rgba(255,255,255,.4)}

.hero{
  max-width:1080px;margin:0 auto;
  padding:72px 22px 40px;
  text-align:center;
}
.eyebrow{
  display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.06em;
  color:var(--coral);border:1px solid rgba(255,107,74,.35);
  padding:6px 14px;border-radius:99px;margin-bottom:26px;
}
.hero h1{
  font-size:clamp(32px,6.4vw,54px);line-height:1.28;
  font-weight:800;letter-spacing:-.035em;
}
.hero h1 em{
  font-style:normal;color:var(--coral);
  position:relative;
}
.hero h1 em::after{
  content:"";position:absolute;left:0;right:0;bottom:.08em;height:.32em;
  background:rgba(255,107,74,.18);z-index:-1;border-radius:2px;
}
.lede{
  margin:24px auto 32px;max-width:520px;
  font-size:clamp(15px,2.4vw,17px);line-height:1.75;
  color:#a9a9b6;
}
.cta{
  background:var(--coral);color:#fff;font-weight:800;font-size:16px;
  padding:17px 34px;border-radius:99px;
  box-shadow:0 10px 30px -8px rgba(255,107,74,.55);
  transition:transform .15s,box-shadow .15s;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 16px 38px -8px rgba(255,107,74,.65)}
.cta-note{margin-top:14px;font-size:12.5px;color:#6e6e7c}
.demo-link{
  display:block;margin:20px auto 0;font-size:13px;font-weight:600;color:#8a8a98;
  text-decoration:underline;text-underline-offset:3px;
}
.demo-link:hover{color:#fff}

/* 데모 미니폰 */
.hero-demo{margin-top:56px;display:flex;justify-content:center}
.demo-phone{
  width:100%;max-width:360px;text-align:left;
  background:var(--kakao-bg);border-radius:22px;overflow:hidden;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.7);
  border:1px solid rgba(255,255,255,.1);
}
.demo-head{
  background:rgba(255,255,255,.28);padding:12px 16px;
  font-size:14px;font-weight:700;color:#22303d;
  display:flex;align-items:center;gap:8px;
}
.demo-head .dot{width:8px;height:8px;border-radius:50%;background:#2f9e6e}
.demo-log{padding:14px}
.d-msg{margin-bottom:8px;display:flex}
.d-msg i{
  font-style:normal;font-size:13.5px;line-height:1.5;
  padding:8px 12px;border-radius:13px;max-width:80%;
}
.d-msg.them i{background:#fff;color:#1a1a20;border-top-left-radius:3px}
.d-msg.me{justify-content:flex-end}
.d-msg.me i{background:var(--kakao);color:#3c2f00;border-top-right-radius:3px}
.d-warn{
  background:#fff1ef;border:1px solid #f6cfc7;color:#a83a2a;
  font-size:11.5px;line-height:1.5;padding:8px 10px;border-radius:9px;margin:6px 0 10px;
}
.d-coach{background:#fffdf3;border-radius:12px;padding:11px;border:1px solid #efe6bf}
.d-coach-h{font-size:10.5px;font-weight:800;color:#8a6f00;margin-bottom:6px;letter-spacing:.03em}
.d-rw{
  background:#fff;border:1px solid #eee7cf;border-radius:9px;padding:9px 11px;
  font-size:13px;line-height:1.55;color:#1a1a20;
}

/* 인용 스트립 */
.strip{
  margin-top:80px;padding:52px 22px;text-align:center;
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
  background:var(--ink-2);
}
.strip p{font-size:clamp(22px,4.4vw,32px);font-weight:800;letter-spacing:-.03em;color:#fff}
.strip span{display:block;margin-top:12px;font-size:14px;color:#8a8a98}

/* 스텝 */
.steps{max-width:900px;margin:0 auto;padding:80px 22px}
.steps h2,.final h2{
  text-align:center;font-size:clamp(24px,4.4vw,34px);font-weight:800;
  letter-spacing:-.035em;color:#fff;margin-bottom:44px;line-height:1.35;
}
.steps ol{list-style:none;display:grid;gap:16px}
.steps li{
  background:var(--ink-2);border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r);padding:26px 24px;
  transition:border-color .2s,transform .2s;
}
.steps li:hover{border-color:rgba(255,107,74,.4);transform:translateY(-2px)}
.num{
  display:block;font-size:12px;font-weight:800;color:var(--coral);
  letter-spacing:.1em;margin-bottom:10px;
}
.steps h3{font-size:19px;font-weight:800;color:#fff;margin-bottom:9px;letter-spacing:-.02em}
.steps p{font-size:14.5px;line-height:1.75;color:#9a9aa8}
.steps b,.feat b{color:#e4e4ec;font-weight:700}

/* 기능 */
.feats{
  max-width:1000px;margin:0 auto;padding:0 22px 90px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;
}
.feat{
  background:linear-gradient(160deg,var(--ink-2),var(--ink));
  border:1px solid rgba(255,255,255,.07);border-radius:var(--r);padding:26px 22px;
}
.ico{font-size:26px;display:block;margin-bottom:14px}
.feat h3{font-size:17px;font-weight:800;color:#fff;margin-bottom:8px}
.feat p{font-size:14px;line-height:1.7;color:#9a9aa8}

/* 마지막 CTA */
.final{padding:90px 22px 100px;text-align:center;background:var(--ink-2);
  border-top:1px solid rgba(255,255,255,.07)}
.final h2{margin-bottom:32px}

.foot{
  padding:28px 22px;display:flex;flex-wrap:wrap;gap:10px;
  justify-content:space-between;align-items:center;
  font-size:12.5px;color:#6e6e7c;border-top:1px solid rgba(255,255,255,.07);
}
.dim{color:#55555f}

/* ═══════════════ 앱 ═══════════════ */
#app{
  background:var(--abg);color:var(--atx);
  /* 화면 높이에 고정 — 대화·목록은 페이지가 아니라 각 영역 안에서 스크롤된다 (카톡처럼) */
  height:100vh;height:100dvh;
  overflow:hidden;
  display:flex;flex-direction:column;
  max-width:520px;margin:0 auto;
  box-shadow:0 0 80px rgba(0,0,0,.35);
}
.topbar{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  /* 아이폰 노치·상태바(시계) 아래로 내려오게 — 설치형(PWA)에서 겹침 방지 */
  padding:calc(14px + env(safe-area-inset-top, 0px)) 16px 14px;background:var(--abg);
  border-bottom:1px solid var(--aline);
  position:sticky;top:0;z-index:5;
}
.tb-back{font-size:24px;width:26px;line-height:1;color:var(--atx)}
/* 상단 고정 로고 — 탭 화면에선 로고, 안쪽 화면에선 뒤로가기와 교대 */
.tb-logo{font-weight:900;font-size:17px;letter-spacing:-.5px;line-height:1}
.tb-logo i{font-style:normal;color:var(--aacc)}
.tb-title{flex:1;font-weight:800;font-size:16px;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-quota{
  font-size:11.5px;font-weight:700;color:var(--amut);
  background:var(--acard);border:1px solid var(--aline);
  padding:6px 11px;border-radius:99px;white-space:nowrap;
}
.tb-quota.low{
  color:var(--aacc);
  border-color:color-mix(in srgb,var(--aacc) 35%,transparent);
  background:color-mix(in srgb,var(--aacc) 8%,var(--acard));
}

.view{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.wrap{flex:1 1 auto;overflow-y:auto;padding:22px 18px 24px}
.vh{font-size:22px;font-weight:800;letter-spacing:-.03em;margin-bottom:16px}

/* 온보딩 */
.progress{height:3px;background:var(--aline);border-radius:2px;margin-bottom:26px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--aacc);width:33%;transition:width .35s}
.step h2{font-size:24px;font-weight:800;letter-spacing:-.035em;line-height:1.35}
.step .sub{font-size:14px;color:var(--amut);margin-top:8px;line-height:1.6}
.lbl{display:block;font-size:12.5px;font-weight:800;
  color:color-mix(in srgb,var(--atx) 80%,var(--amut));margin:22px 0 8px}
.opt{font-weight:500;color:var(--amut)}
input[type=text],input[type=date],select,textarea{
  width:100%;padding:14px 14px;font:inherit;font-size:15px;
  border:1px solid var(--aline);border-radius:12px;background:var(--acard);
  outline:none;color:var(--atx);transition:border-color .15s;
}
input:focus,select:focus,textarea:focus{border-color:var(--aacc)}
textarea{resize:vertical;line-height:1.6}
::placeholder{color:color-mix(in srgb,var(--amut) 70%,transparent)}

.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  border:1px solid var(--aline);background:var(--acard);color:var(--amut);
  padding:10px 16px;border-radius:99px;font-size:13.5px;font-weight:600;
  transition:all .15s;
}
.chip:hover{border-color:var(--amut)}
.chip.on{background:var(--abtn);color:var(--abtntx);border-color:var(--abtn)}

.btn{
  width:100%;padding:16px;border-radius:14px;font-size:15px;font-weight:800;
  transition:all .15s;
}
.btn.primary{background:var(--abtn);color:var(--abtntx);margin-top:26px}
.btn.primary:hover{opacity:.88}
.btn.primary:disabled{opacity:.35}
.btn.ghost{background:var(--acard);border:1px solid var(--aline);color:var(--atx);margin-top:26px}
.btn.ghost:hover{border-color:var(--amut)}
.btn.text{background:none;color:var(--amut);font-weight:600;padding:12px}
.btnrow{display:flex;gap:9px}
.btnrow .btn{flex:1}
.btnrow .ghost{flex:0 0 34%}
.err{color:var(--danger);font-size:13.5px;margin-top:14px;line-height:1.6;white-space:pre-wrap}
.note{font-size:12px;color:var(--amut);margin-top:9px;line-height:1.6}
.note.center{text-align:center;margin-top:12px}

/* 파일 드롭 */
.drop{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:30px 18px;border:1.5px dashed var(--dash);border-radius:14px;
  background:var(--acard);cursor:pointer;text-align:center;margin-top:8px;
  transition:all .15s;
}
.drop:hover{border-color:var(--amut)}
.drop.filled{
  border-style:solid;border-color:var(--ok);
  background:color-mix(in srgb,var(--ok) 7%,var(--acard));
}
.drop-ico{font-size:26px}
.drop b{font-size:14.5px;font-weight:700;max-width:100%;overflow-wrap:anywhere;word-break:break-all}
.drop-how{font-size:11.5px;color:var(--amut);line-height:1.5}

/* 스티키 바 */
.stickybar{
  flex:0 0 auto;display:flex;gap:9px;padding:12px 16px 18px;
  background:var(--abg);border-top:1px solid var(--aline);
}
.stickybar .btn{margin-top:0}
.stickybar .ghost{flex:0 0 40%}

/* ═══ 페르소나 카드 ═══ */
.reveal{animation:rise .5s cubic-bezier(.2,.7,.3,1) backwards}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}

.hero-card{
  background:linear-gradient(155deg,#17181d,#26262f);
  color:#fff;border-radius:var(--rr);padding:26px 22px;margin-bottom:14px;
}
.hero-card .nick{
  display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.04em;
  color:color-mix(in srgb,var(--aacc) 70%,#fff);
  border:1px solid color-mix(in srgb,var(--aacc) 55%,transparent);
  padding:5px 11px;border-radius:99px;margin-bottom:14px;
}
.hero-card .hl{font-size:21px;font-weight:800;line-height:1.5;letter-spacing:-.02em}
.hero-card .meta{
  margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:14px 22px;font-size:12.5px;color:#a0a0ae;
}
.hero-card .meta>div{min-width:fit-content} /* '답장 스타일'이 세로로 짜부되지 않게 — 좁으면 줄바꿈 */
.hero-card .meta b{display:block;color:#fff;font-size:14px;margin-top:3px;font-weight:700}

.pcard{
  background:var(--acard);border:1px solid var(--aline);
  border-radius:var(--rr);padding:20px;margin-bottom:12px;
}
.pcard h3{
  font-size:11.5px;font-weight:800;color:var(--amut);
  letter-spacing:.06em;margin-bottom:14px;
}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{
  background:color-mix(in srgb,var(--amut) 10%,var(--acard));
  color:color-mix(in srgb,var(--atx) 78%,var(--amut));
  font-size:13px;font-weight:700;padding:7px 12px;border-radius:9px;
}
.plist{list-style:none}
.plist li{
  font-size:14.5px;line-height:1.75;padding-left:16px;position:relative;margin-bottom:6px;
}
.plist li::before{content:"";position:absolute;left:2px;top:.72em;
  width:4px;height:4px;border-radius:50%;background:var(--aacc)}
.mineitem{
  border-left:3px solid var(--danger);padding:2px 0 2px 13px;margin-bottom:15px;
}
.mineitem:last-child{margin-bottom:0}
.mineitem b{font-size:14.5px;display:block;margin-bottom:4px}
.mineitem p{font-size:13.5px;color:color-mix(in srgb,var(--atx) 62%,var(--amut));line-height:1.65}
.prose{font-size:14px;line-height:1.85;color:color-mix(in srgb,var(--atx) 68%,var(--amut))}

/* ═══ 시나리오 ═══ */
.scen-rand{
  background:var(--acard);border:1px solid var(--aline);border-radius:var(--rr);
  padding:24px 20px;margin-bottom:12px;min-height:132px;
}
.scen-rand .sr-tag{
  display:inline-block;font-size:11px;font-weight:800;color:var(--aacc);
  letter-spacing:.05em;margin-bottom:10px;
  border:1px solid color-mix(in srgb,var(--aacc) 35%,transparent);
  padding:4px 10px;border-radius:99px;
}
.scen-rand b{display:block;font-size:20px;font-weight:800;letter-spacing:-.025em;margin-bottom:7px}
.scen-rand p{font-size:14px;color:color-mix(in srgb,var(--atx) 62%,var(--amut));line-height:1.7}
.scenlist{display:grid;gap:10px;margin-bottom:22px}
.scen{
  text-align:left;width:100%;background:var(--acard);
  border:1px solid var(--aline);border-radius:var(--rr);padding:18px;
  transition:all .15s;
}
.scen:hover{border-color:var(--aacc);transform:translateY(-1px)}
.scen b{display:block;font-size:16px;font-weight:800;margin-bottom:5px;letter-spacing:-.02em}
.scen span{font-size:13px;color:var(--amut);line-height:1.6}
.custom{background:var(--acard);border:1px solid var(--aline);border-radius:var(--rr);padding:18px}
.custom .lbl{margin-top:0}
.custom .btn{margin-top:12px}

/* ═══ 카톡방 ═══ */
#v-chat{background:var(--kbg)}
.situation{
  flex:0 0 auto;background:color-mix(in srgb,#000 12%,var(--kbg));color:var(--sittx);
  font-size:12.5px;line-height:1.6;padding:11px 18px;text-align:center;
}
.chatlog{flex:1 1 auto;overflow-y:auto;padding:16px 12px 20px}
.msg{display:flex;margin-bottom:11px;align-items:flex-end;gap:7px}
.msg.me{justify-content:flex-end}
.av{
  width:34px;height:34px;border-radius:12px;background:var(--avbg);color:var(--avtx);
  flex:0 0 auto;display:grid;place-items:center;font-size:14px;font-weight:800;
}
.bub{
  max-width:74%;padding:10px 13px;border-radius:15px;
  font-size:14.5px;line-height:1.55;word-break:break-word;white-space:pre-wrap;
  animation:pop .18s ease-out;
}
@keyframes pop{from{opacity:0;transform:translateY(4px) scale(.98)}}
.them .bub{background:var(--kthem);color:var(--kthemtx);border-top-left-radius:4px}
.me .bub{background:var(--kakao);color:#3c2f00;border-top-right-radius:4px}
.tm{font-size:10px;color:var(--sittx);align-self:flex-end;padding-bottom:2px}
/* 내 말풍선 옆 안읽음 "1" — 시각 위에 노랗게 (카톡 문법) */
.mcol{display:flex;flex-direction:column;align-items:flex-end;align-self:flex-end}
.unread{font-style:normal;font-size:10.5px;font-weight:800;color:#f2b104;
  line-height:1;margin-bottom:2px;transition:opacity .45s}
.typing .bub{color:var(--amut);font-style:italic}
.sysline{
  text-align:center;font-size:11.5px;color:var(--sittx);
  background:var(--sitbg);border-radius:99px;
  padding:6px 12px;margin:10px auto;width:fit-content;max-width:88%;line-height:1.5;
}
/* 카톡 밖 현실 상황 연출 줄 — 배경 없이 이탤릭으로, 지문처럼 */
.sysline.scene{background:none;font-style:italic;opacity:.85}
/* 대화 마무리 신호 줄 */
.sysline.endmark{border:1px solid var(--aacc);color:var(--aacc);background:none}

/* 코치 패널 */
.coach{
  flex:0 0 auto;max-height:52vh;overflow-y:auto;
  background:var(--acard);border-top:2px solid var(--kakao);
  padding:16px 18px 18px;
}
.coach-top{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.ring{
  width:44px;height:44px;flex:0 0 auto;border-radius:50%;
  display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff;
}
.coach-top h4{font-size:14px;font-weight:800;flex:1}
.coach-top .x{font-size:18px;color:var(--amut);padding:4px}
.verdict{font-size:14px;line-height:1.7;margin-bottom:12px}
.predict{
  font-size:13px;color:color-mix(in srgb,var(--atx) 75%,var(--amut));
  background:color-mix(in srgb,var(--amut) 9%,var(--acard));
  border-radius:11px;padding:11px 13px;line-height:1.65;margin-bottom:14px;
}
.risk{font-size:13px;line-height:1.65;margin-bottom:7px}
.sev{font-weight:900;margin-right:5px}
.sev.high{color:var(--danger)} .sev.medium{color:var(--warn)} .sev.low{color:var(--amut)}
.coach h5{font-size:11.5px;font-weight:800;color:var(--amut);letter-spacing:.05em;margin:16px 0 9px}
.rw{
  background:var(--abg);border:1px solid var(--aline);border-radius:13px;
  padding:12px 13px;margin-bottom:8px;cursor:pointer;transition:all .15s;
}
.rw:hover{border-color:var(--aacc);transform:translateY(-1px)}
.rw .st{
  display:inline-block;font-size:11px;font-weight:800;margin-bottom:7px;
  letter-spacing:.03em;padding:3px 9px;border-radius:99px;
}
.st-fox{background:color-mix(in srgb,#e05836 14%,var(--acard));
  color:color-mix(in srgb,#e05836 75%,var(--atx))}
.st-plain{background:color-mix(in srgb,#1e9e6a 14%,var(--acard));
  color:color-mix(in srgb,#1e9e6a 70%,var(--atx))}
.st-light{background:color-mix(in srgb,#3b74d8 14%,var(--acard));
  color:color-mix(in srgb,#3b74d8 72%,var(--atx))}
.st-firm{background:color-mix(in srgb,#5a6273 16%,var(--acard));
  color:color-mix(in srgb,#5a6273 80%,var(--atx))}
.st-mine{background:color-mix(in srgb,var(--aacc) 13%,var(--acard));color:var(--aacc)}
.rw .tx{font-size:14.5px;line-height:1.6}
.rw .react{
  font-size:12px;color:color-mix(in srgb,var(--atx) 65%,var(--amut));
  background:color-mix(in srgb,var(--amut) 9%,var(--acard));
  border-radius:8px;padding:7px 9px;margin-top:8px;line-height:1.55;
}
.rw .wy{font-size:11.5px;color:var(--amut);margin-top:6px;line-height:1.5}

/* 입력창 */
/* 하단 독 — 뷰포트에 고정. 키보드가 열리면 JS가 그 위로 얹는다 (앱 높이는 절대 안 건드림) */
.dockbar{position:fixed;left:0;right:0;bottom:0;z-index:30;max-width:520px;margin:0 auto}
/* 카톡식 입력바 — 알약 하나에 ↺·입력·검사·전송이 모두 들어간다 */
.composer{background:var(--kbg);
  padding:8px 10px calc(10px + env(safe-area-inset-bottom, 0px))}
.crow{display:flex;align-items:flex-end;gap:1px;
  background:var(--acard);border-radius:23px;padding:4px 5px;
  box-shadow:0 1px 5px rgba(0,0,0,.10)}
.composer textarea{
  flex:1;min-width:0;border:none;border-radius:0;padding:8px 6px;max-height:110px;
  background:transparent;font-size:15px;resize:none;
}
.composer textarea:focus{border:none;background:transparent}
.cbtn{
  width:38px;height:38px;border-radius:50%;border:none;
  background:transparent;font-size:20px;flex:0 0 auto;transition:all .15s;
  color:var(--amut);display:grid;place-items:center;
}
.cbtn:hover{background:var(--fake)}
.coach-btn{
  width:auto;min-width:38px;height:32px;margin:3px 1px;padding:0 10px;
  border-radius:16px;white-space:nowrap;
  background:color-mix(in srgb,var(--kakao) 26%,var(--acard));
  font-size:11px;font-weight:800;color:var(--atx);
}
.sendbtn{
  width:34px;height:34px;margin:2px;border-radius:50%;flex:0 0 auto;
  background:var(--kakao);color:#3c2f00;font-weight:800;font-size:15px;
  display:grid;place-items:center;padding:0;
}
.sendbtn:disabled{opacity:.4}
/* 입력 중… 점 세 개 (실제 카톡 느낌) */
.tydots{display:inline-flex;gap:4px;align-items:center;padding:3px 2px}
.tydots i{
  width:6px;height:6px;border-radius:50%;
  background:var(--amut);opacity:.5;
  animation:tybounce 1.1s ease-in-out infinite;
}
.tydots i:nth-child(2){animation-delay:.15s}
.tydots i:nth-child(3){animation-delay:.3s}
@keyframes tybounce{
  0%,60%,100%{transform:translateY(0);opacity:.35}
  30%{transform:translateY(-4px);opacity:.9}
}

/* 나중에 온 카톡 알림 토스트 — 카톡 푸시처럼 위에서 내려온다 */
.fu-toast{
  position:fixed;top:calc(12px + env(safe-area-inset-top, 0px));left:50%;transform:translateX(-50%);
  z-index:80;display:flex;align-items:center;gap:10px;
  width:min(92vw,380px);padding:12px 14px;cursor:pointer;
  background:var(--acard);color:var(--atx);
  border:1px solid var(--aline);border-radius:16px;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.35);
  animation:fudrop .35s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes fudrop{from{transform:translate(-50%,-70px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.fu-toast.out{transition:transform .35s,opacity .35s;transform:translate(-50%,-70px);opacity:0}
.fu-av{
  flex:none;width:36px;height:36px;border-radius:12px;
  background:var(--avbg);color:var(--avtx);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;
}
.fu-txt{
  flex:1;min-width:0;font-size:13px;line-height:1.45;color:var(--amut);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fu-txt b{display:block;font-size:13.5px;color:var(--atx)}
.fu-go{flex:none;color:var(--amut);font-size:18px;font-weight:700}
.endlink{
  display:block;width:100%;text-align:center;margin-top:9px;
  font-size:12.5px;font-weight:600;color:var(--amut);padding:4px;
}
.endlink:hover{color:var(--atx)}
/* 대화가 마무리된 분위기일 때 — 리포트 버튼을 살짝 강조 */
.endlink.hot{color:var(--aacc);font-weight:800;animation:endpulse 1.6s ease-in-out infinite}
@keyframes endpulse{0%,100%{opacity:1}50%{opacity:.55}}

/* ═══ 리포트 ═══ */
.outcome{
  background:linear-gradient(155deg,#17181d,#26262f);color:#fff;
  border-radius:var(--rr);padding:26px 22px;margin-bottom:14px;text-align:center;
}
/* 점수만큼 차오르는 도넛 링 — --rc(색)·--pct(점수)로 그린다 */
.bigring{
  width:92px;height:92px;margin:0 auto 16px;border-radius:50%;position:relative;
  display:grid;place-items:center;font-size:26px;font-weight:800;color:#fff;
  background:conic-gradient(var(--rc) calc(var(--pct)*1%), rgba(255,255,255,.13) 0);
}
.bigring::before{content:"";position:absolute;inset:8px;border-radius:50%;background:#1d1e25}
.bigring span{position:relative;color:var(--rc)}
.outcome .verd{font-size:22px;font-weight:800;letter-spacing:-.02em}
.outcome .sm{font-size:14px;color:#a0a0ae;line-height:1.75;margin-top:12px}
.script{
  background:#191a1f;color:#f2f2f6;border-radius:14px;padding:18px;
  font-size:15px;line-height:1.85;white-space:pre-wrap;margin-bottom:10px;
}
.copybtn{
  width:100%;padding:14px;border-radius:12px;
  background:var(--kakao);color:#3c2f00;font-weight:800;font-size:14.5px;
}

/* ═══ 페이월 ═══ */
.modal{
  position:fixed;inset:0;z-index:50;background:rgba(18,18,24,.6);
  backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center;
}
.sheet{
  background:var(--abg);color:var(--atx);width:100%;max-width:480px;
  border-radius:24px 24px 0 0;padding:30px 22px 26px;text-align:center;
  animation:up .3s cubic-bezier(.2,.7,.3,1);
}
@keyframes up{from{transform:translateY(100%)}}
/* ─── 콘텐츠 보호 — 드래그 선택·꾹 눌러 복사 차단 (입력창만 예외, 복사 버튼은 JS로 작동) ─── */
body{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea{-webkit-user-select:text;-moz-user-select:text;user-select:text;-webkit-touch-callout:default}
img{-webkit-user-drag:none;user-drag:none}
@media print{
  body>*{display:none!important}
  body::before{content:"이 페이지는 인쇄할 수 없어요.";display:block;padding:60px 20px;font-size:15px;text-align:center}
}

.sheet-ico{font-size:30px;display:block;margin-bottom:12px}
#styleNote{
  width:100%;margin-top:14px;padding:12px 14px;font-family:inherit;font-size:13.5px;
  background:var(--acard);color:var(--atx);border:1px solid var(--aline);
  border-radius:var(--rr);resize:none;line-height:1.5;
}
#styleNote:focus{outline:none;border-color:var(--aacc)}
#styleModal .btn.primary{margin-top:10px}
.style-samples{max-height:180px;overflow-y:auto;text-align:left;margin-top:4px}
.style-line{
  font-size:12.5px;color:var(--amut);background:var(--acard);border:1px solid var(--aline);
  border-radius:10px;padding:6px 10px;margin-bottom:6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sheet h3{font-size:21px;font-weight:800;letter-spacing:-.03em}
.sheet>p{font-size:14px;color:var(--amut);margin-top:8px;line-height:1.6}
.plan{
  background:var(--acard);border:1px solid var(--aline);border-radius:var(--rr);
  padding:20px;margin:20px 0 4px;text-align:left;
}
.plan-name{font-size:14px;color:var(--amut)}
.plan-name b{color:var(--atx);font-weight:800}
.plan-price{font-size:15px;color:var(--amut);margin-top:4px}
.plan-price b{font-size:28px;color:var(--atx);font-weight:800;letter-spacing:-.03em}
.plan ul{list-style:none;margin-top:14px;padding-top:14px;border-top:1px solid var(--aline)}
.plan li{font-size:13.5px;line-height:1.9;
  color:color-mix(in srgb,var(--atx) 70%,var(--amut));
  padding-left:18px;position:relative}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:800}

/* ═══ 로딩 ═══ */
.loading{
  position:fixed;inset:0;z-index:60;
  background:color-mix(in srgb,var(--abg) 94%,transparent);
  display:grid;place-content:center;justify-items:center;gap:16px;text-align:center;padding:24px;
  color:var(--atx);
}
.loading p{font-size:15px;font-weight:700}
.loading span{font-size:13px;color:var(--amut);line-height:1.6;max-width:280px}
.orb{
  width:44px;height:44px;border-radius:50%;
  background:conic-gradient(from 0deg,var(--aacc),var(--kakao),var(--aacc));
  animation:spin 1.1s linear infinite;
  mask:radial-gradient(circle,transparent 55%,#000 57%);
  -webkit-mask:radial-gradient(circle,transparent 55%,#000 57%);
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ═══ 코치 타이밍 ═══ */
.timing{border-radius:13px;padding:12px 13px;margin-bottom:14px;border:1px solid}
.timing.hold{background:color-mix(in srgb,var(--danger) 8%,var(--acard));
  border-color:color-mix(in srgb,var(--danger) 28%,transparent)}
.timing.wait{background:color-mix(in srgb,var(--warn) 9%,var(--acard));
  border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.timing.go{background:color-mix(in srgb,var(--ok) 9%,var(--acard));
  border-color:color-mix(in srgb,var(--ok) 28%,transparent)}
.tm-h{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;margin-bottom:6px;
  color:color-mix(in srgb,var(--atx) 80%,var(--amut))}
.tm-badge{font-size:11px;font-weight:800;padding:3px 9px;border-radius:99px;color:#fff}
.timing.hold .tm-badge{background:var(--danger)}
.timing.wait .tm-badge{background:var(--warn)}
.timing.go .tm-badge{background:var(--ok)}
.tm-when{font-size:14px;font-weight:700;margin-bottom:4px}
.tm-why{font-size:12.5px;color:color-mix(in srgb,var(--atx) 62%,var(--amut));line-height:1.6}

/* ═══ 디코더 (상대 말 해석) ═══ */
#decodeBody{margin-top:20px}
.state{background:color-mix(in srgb,#3b74d8 9%,var(--acard));
  border:1px solid color-mix(in srgb,#3b74d8 28%,transparent);
  border-radius:14px;padding:15px 16px;margin-bottom:12px}
.state .sl{font-size:11px;font-weight:800;
  color:color-mix(in srgb,#3b74d8 72%,var(--atx));letter-spacing:.05em;margin-bottom:6px}
.state p{font-size:15px;line-height:1.6;font-weight:700}
.dec{margin-bottom:13px}
.dec:last-child{margin-bottom:0}
.dec .surf{font-size:14px;font-weight:800;margin-bottom:4px}
.dec .surf::before{content:"“"}
.dec .surf::after{content:"”"}
.dec .real{font-size:13.5px;color:color-mix(in srgb,var(--atx) 68%,var(--amut));
  line-height:1.65;padding-left:15px;position:relative}
.dec .real::before{content:"→";position:absolute;left:0;
  color:color-mix(in srgb,#3b74d8 75%,var(--atx));font-weight:800}
.conf{display:inline-block;font-size:12px;color:var(--amut);
  background:color-mix(in srgb,var(--amut) 10%,var(--acard));
  padding:6px 12px;border-radius:99px;margin-bottom:12px}
.conf b{color:var(--atx)}
.caution{font-size:13.5px;line-height:1.65;
  background:color-mix(in srgb,var(--warn) 10%,var(--acard));
  border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);
  border-radius:13px;padding:12px 14px;margin-bottom:12px;
  color:color-mix(in srgb,var(--warn) 62%,var(--atx))}
.alt{background:var(--acard);border:1px solid var(--aline);border-radius:var(--rr);
  padding:18px;margin-bottom:12px}
.alt h4{font-size:13px;font-weight:800;margin-bottom:12px}
.alt .branch{display:flex;gap:10px;font-size:13.5px;line-height:1.6;margin-bottom:10px}
.alt .tagb{font-size:11px;font-weight:800;padding:3px 9px;border-radius:8px;height:fit-content;flex:0 0 auto;margin-top:1px}
.tagb.a{background:color-mix(in srgb,var(--amut) 12%,var(--acard));
  color:color-mix(in srgb,var(--atx) 70%,var(--amut))}
.tagb.b{background:color-mix(in srgb,#3b74d8 12%,var(--acard));
  color:color-mix(in srgb,#3b74d8 72%,var(--atx))}
.alt .branch span{color:color-mix(in srgb,var(--atx) 68%,var(--amut))}
.careflag{font-size:12.5px;color:color-mix(in srgb,var(--atx) 62%,var(--amut));
  background:var(--abg);border:1px dashed var(--aline);
  border-radius:11px;padding:11px 13px;line-height:1.65;margin-top:4px}
.careflag.on{
  background:color-mix(in srgb,#3b74d8 9%,var(--acard));
  border:1px solid color-mix(in srgb,#3b74d8 28%,transparent);
  color:color-mix(in srgb,#3b74d8 70%,var(--atx))}
.howto{font-size:14px;line-height:1.7;
  background:color-mix(in srgb,var(--aacc) 8%,var(--acard));
  border:1px solid color-mix(in srgb,var(--aacc) 28%,transparent);
  border-radius:13px;padding:13px 15px;margin-top:4px}
.howto b{color:var(--aacc);display:block;font-size:11px;letter-spacing:.04em;margin-bottom:5px;font-weight:800}

/* ═══════════════ 하단 탭바 ═══════════════ */
.tabbar{
  flex:0 0 auto;display:flex;gap:4px;
  background:var(--acard);border-top:1px solid var(--aline);
  padding:6px 10px calc(8px + env(safe-area-inset-bottom,0px));
  position:sticky;bottom:0;z-index:5;
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:10.5px;font-weight:700;color:var(--amut);
  padding:7px 4px 5px;border-radius:12px;transition:color .15s;
}
.tab svg{
  width:21px;height:21px;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .15s;
}
.tab.on{color:var(--aacc)}
.tab.on svg{transform:translateY(-1px)}

/* ═══════════════ 보관함: 홈 모드 카드 ═══════════════ */
.home-q{font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.45;margin:2px 0 12px;text-wrap:balance}
.mode-card{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  background:var(--acard);border:1px solid var(--aline);border-radius:var(--rr);
  padding:17px 16px;margin-bottom:9px;transition:all .15s;
}
.mode-card:hover{border-color:var(--aacc);transform:translateY(-1px)}
.m-ico{
  width:42px;height:42px;border-radius:14px;flex:0 0 auto;display:grid;place-items:center;
  background:color-mix(in srgb,var(--aacc) 11%,var(--acard));color:var(--aacc);
}
.m-ico svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.m-info{flex:1;min-width:0}
.m-info b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.02em}
.m-info span{display:block;font-size:12.5px;color:var(--amut);margin-top:3px;line-height:1.5}
.m-arrow{color:var(--amut);font-size:18px;flex:0 0 auto}

/* ═══════════════ 통계 그리드 ═══════════════ */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.stat{background:var(--abg);border:1px solid var(--aline);border-radius:13px;padding:14px 15px}
.stat b{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat small{font-size:11.5px;color:var(--amut)}

/* ═══════════════ 보관함 ═══════════════ */
/* minmax(0,1fr): 별명이 길어도 트랙이 화면 밖으로 안 커지게 (폰 가로 스크롤 방지) */
.plist-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-bottom:4px}
.pitem{
  display:flex;align-items:center;gap:12px;text-align:left;width:100%;
  background:var(--acard);border:1px solid var(--aline);border-radius:var(--rr);
  padding:14px 16px;transition:all .15s;
}
.pitem:hover{border-color:var(--amut);transform:translateY(-1px)}
.pitem.on{
  border-color:var(--aacc);
  background:color-mix(in srgb,var(--aacc) 5%,var(--acard));
}
.p-av{
  width:44px;height:44px;border-radius:50%;
  background:color-mix(in srgb,var(--aacc) 13%,var(--acard));color:var(--aacc);
  display:grid;place-items:center;font-size:17px;font-weight:800;flex:0 0 auto;
}
.p-info{flex:1;min-width:0}
.p-info b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.02em}
.p-info span{
  display:block;font-size:12.5px;color:var(--amut);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.p-cur{
  font-size:11px;font-weight:800;color:var(--aacc);
  background:color-mix(in srgb,var(--aacc) 11%,var(--acard));
  padding:4px 10px;border-radius:99px;flex:0 0 auto;
}
.p-more{
  font-size:11.5px;font-weight:700;color:var(--amut);
  border:1px solid var(--aline);padding:6px 11px;border-radius:99px;
  flex:0 0 auto;transition:all .15s;
}
.p-more:hover{color:var(--atx);border-color:var(--amut)}
.empty{
  text-align:center;font-size:14px;color:var(--amut);line-height:1.7;
  background:var(--acard);border:1.5px dashed var(--dash);border-radius:var(--rr);
  padding:34px 18px;
}
.homehint{
  font-size:13px;font-weight:700;color:var(--aacc);
  background:color-mix(in srgb,var(--aacc) 8%,var(--acard));
  border:1px solid color-mix(in srgb,var(--aacc) 30%,transparent);
  border-radius:11px;padding:10px 13px;
  margin-bottom:12px;line-height:1.5;
}

/* ═══════════════ 실전: 답장 추천 ═══════════════ */
.liverow{display:flex;gap:8px}
.liverow .btn{flex:1;margin-top:0}
.liverow .ghost{flex:1}
#replyBody{margin-top:20px}
.rp-h{font-size:11.5px;font-weight:800;color:var(--amut);letter-spacing:.05em;margin:16px 0 9px}
.rp-headline{
  font-size:19px;font-weight:800;letter-spacing:-.025em;line-height:1.5;
  margin:2px 0 14px;text-wrap:balance;
}
#replyBody .rw{border-color:var(--aline)}
#replyBody .rw.polish{border-color:color-mix(in srgb,var(--aacc) 45%,transparent)}
.avoid{
  background:color-mix(in srgb,var(--danger) 8%,var(--acard));
  border:1px solid color-mix(in srgb,var(--danger) 28%,transparent);
  border-radius:13px;padding:14px 15px;margin-top:14px;
}
.avoid b{
  display:block;font-size:11.5px;font-weight:800;color:var(--danger);
  letter-spacing:.03em;margin-bottom:7px;
}
.av-tx{font-size:14px;font-weight:700;line-height:1.6}
.av-wy{font-size:12.5px;color:color-mix(in srgb,var(--danger) 55%,var(--atx));
  line-height:1.6;margin-top:5px}

/* ═══════════════ 실전: 스크린샷 첨부 ═══════════════ */
.shotrow{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.shotbtn{
  font-size:13px;font-weight:700;color:var(--atx);
  background:var(--acard);border:1px solid var(--aline);
  padding:9px 14px;border-radius:99px;transition:all .15s;
}
.shotbtn:hover{border-color:var(--amut)}
.shothint{font-size:11.5px;color:var(--amut);line-height:1.5}
.shotstrip{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.shot{position:relative;display:block}
.shot img{
  width:64px;height:64px;object-fit:cover;border-radius:10px;
  border:1px solid var(--aline);display:block;
}
.shot button{
  position:absolute;top:-6px;right:-6px;width:20px;height:20px;
  border-radius:50%;background:var(--abtn);color:var(--abtntx);font-size:10px;
  display:grid;place-items:center;line-height:1;
}

/* ═══════════════ 리포트: 네 가지 축 ═══════════════ */
.dim{margin-bottom:16px}
.dim:last-child{margin-bottom:0}
.dim-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.dim-top span{font-size:13.5px;font-weight:800}
.dim-top b{font-size:15px;font-weight:800}
.dim-bar{height:7px;background:color-mix(in srgb,var(--amut) 13%,var(--acard));
  border-radius:99px;overflow:hidden}
.dim-bar i{display:block;height:100%;border-radius:99px;transition:width .6s cubic-bezier(.2,.7,.3,1)}
.dim-note{font-size:12.5px;color:color-mix(in srgb,var(--atx) 60%,var(--amut));line-height:1.6;margin-top:6px}

/* ═══════════════ 마이 ═══════════════ */
.my-card{
  background:var(--acard);border:1px solid var(--aline);
  border-radius:var(--rr);padding:20px;margin-bottom:12px;
}
.my-card h3{
  font-size:11.5px;font-weight:800;color:var(--amut);
  letter-spacing:.06em;margin-bottom:14px;
}
.profile-card{
  display:flex;align-items:center;gap:14px;
  background:var(--acard);border:1px solid var(--aline);
  border-radius:var(--rr);padding:18px;margin-bottom:12px;
}
.pf-av{width:52px;height:52px;font-size:19px}
.pf-info b{display:block;font-size:16.5px;font-weight:800;letter-spacing:-.02em}
.pf-info span{display:block;font-size:12.5px;color:var(--amut);margin-top:3px}
.sec-h{
  font-size:11.5px;font-weight:800;color:var(--amut);
  letter-spacing:.05em;margin:22px 0 9px;
}
#myDelta{margin-bottom:4px}
.thgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.thopt{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  background:var(--abg);border:1.5px solid var(--aline);border-radius:14px;
  padding:14px 8px 12px;transition:all .15s;
}
.thopt:hover{border-color:var(--amut)}
.thopt.on{
  border-color:var(--aacc);
  background:color-mix(in srgb,var(--aacc) 6%,var(--acard));
}
.thopt b{font-size:12.5px;font-weight:800;letter-spacing:-.01em}
.thopt.on b{color:var(--aacc)}
.thdots{display:flex;gap:4px}
.thdots i{width:14px;height:14px;border-radius:50%;display:block;border:1px solid rgba(0,0,0,.15)}

/* 내 카톡 능력 — 등급 배지 카드 */
.gcard{display:flex;align-items:center;gap:16px}
.g-badge{
  flex:0 0 auto;width:58px;height:58px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  font-size:27px;font-weight:900;color:#fff;
}
.g-info{flex:1;min-width:0}
.g-top{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.g-top b{font-size:15.5px;font-weight:800}
.g-top .pct-chip{margin-top:0}
.g-sub{display:block;font-size:12px;color:var(--amut);margin-bottom:9px}
.g-bonus{
  margin-left:6px;font-size:11px;font-weight:800;color:var(--ok);
  background:color-mix(in srgb, var(--ok) 12%, transparent);
  padding:2px 7px;border-radius:99px;
}
.g-bar{height:6px;border-radius:99px;background:color-mix(in srgb, var(--amut) 14%, transparent);overflow:hidden}
.g-bar i{display:block;height:100%;border-radius:99px}
.g-next{display:block;font-size:11px;font-weight:700;color:var(--amut);margin-top:5px;text-align:right}

/* 연습 대화 기록 */
.hist-item{
  display:block;width:100%;text-align:left;cursor:pointer;font-family:inherit;color:var(--atx);
  background:var(--acard);border:1px solid var(--aline);
  border-radius:var(--rr);padding:14px 16px;margin-bottom:10px;
}
.hist-item:hover{border-color:var(--amut)}
/* 연습 기록 목록은 눌러도 열리는 상세가 없다 (대화 내용 미보관) */
#histList .hist-item{cursor:default}
#histList .hist-item:hover{border-color:var(--aline)}
.hi-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:3px}
.hi-top b{font-size:14.5px;font-weight:800}
.hi-top small{font-size:11px;color:var(--amut);flex:0 0 auto}
.hi-scen{margin:0 0 4px;font-size:12px;font-weight:700;color:var(--aacc)}
.hi-last{margin:0;font-size:12.5px;color:var(--amut);display:flex;align-items:center;gap:6px}
.hi-del{
  margin-left:auto;background:none;border:none;cursor:pointer;font-family:inherit;
  font-size:11.5px;color:var(--amut);text-decoration:underline;padding:2px 4px;
}
.hi-del:hover{color:#d33}
.histlog{background:var(--kbg);border-radius:var(--rr);padding:16px 12px 8px;margin-top:10px}
#btnHistDel{margin-top:14px}

.mylist{
  background:var(--acard);border:1px solid var(--aline);
  border-radius:var(--rr);overflow:hidden;margin-bottom:12px;
}
.myrow{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  width:100%;text-align:left;padding:16px 18px;
  border-bottom:1px solid var(--aline);font-size:14.5px;font-weight:700;
  transition:background .15s;
}
.myrow:last-child{border-bottom:0}
.myrow:hover{background:color-mix(in srgb,var(--amut) 5%,var(--acard))}

/* 설정 — 선택지가 한 줄에 다 보이는 칩 방식 (이름 왼쪽 · 칩 오른쪽) */
.setrow{cursor:default;gap:10px}
.setrow:hover{background:var(--acard)}
.setrow > span{flex:0 0 auto;white-space:nowrap}
.optchips{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.optc{
  font-size:11.5px;font-weight:700;color:var(--amut);
  border:1px solid var(--aline);border-radius:99px;padding:4.5px 9px;
  transition:all .12s;white-space:nowrap;
}
.optc:hover{border-color:var(--amut)}
.optc.on{
  color:#fff;background:var(--aacc);border-color:var(--aacc);
}

/* 회원탈퇴 — 목록 밖 작은 링크 */
.withdraw-link{
  display:block;margin:14px auto 2px;font-size:11.5px;color:var(--amut);
  text-decoration:underline;text-underline-offset:3px;
}
.withdraw-link:hover{color:var(--danger)}
.myrow small{color:var(--amut);font-size:12.5px;font-weight:600;white-space:nowrap}
#gsiBtn{
  padding:14px 18px;border-bottom:1px solid var(--aline);
  display:flex;justify-content:center;
}
#gsiBtn[hidden]{display:none}
.acct-row{cursor:default}
.acct-row small{
  max-width:60%;overflow:hidden;text-overflow:ellipsis;
}
.switch{
  width:42px;height:24px;border-radius:99px;background:var(--aline);
  position:relative;flex:0 0 auto;transition:background .15s;
}
.switch::after{
  content:"";position:absolute;width:18px;height:18px;border-radius:50%;
  background:#fff;left:3px;top:3px;transition:left .15s;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.switch.on{background:var(--ok)}
.switch.on::after{left:21px}

@media(min-width:560px){
  #app{border-left:1px solid rgba(0,0,0,.08);border-right:1px solid rgba(0,0,0,.08)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
}

/* ─── 싱크로율 + 대화 추가 ─── */
.sync-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.sync-top h3{margin:0}
.sync-num{font-size:22px;font-weight:800;color:var(--aacc)}
.sync-gain{font-size:13px;font-weight:800;color:var(--aacc);opacity:.85;margin-left:2px}
.sync-bar{height:8px;border-radius:99px;background:color-mix(in srgb, var(--aacc) 14%, transparent);overflow:hidden}
.sync-bar i{display:block;height:100%;border-radius:99px;background:var(--aacc);transition:width .6s ease}
.sync-hint{font-size:12.5px;color:var(--amut);line-height:1.55;margin:10px 0 12px}
.stash-line{
  margin-top:10px;padding:8px 11px;border-radius:10px;
  background:color-mix(in srgb,var(--aacc) 7%,transparent);
  font-size:12px;color:var(--amut);line-height:1.55;
}
.stash-line b{color:var(--atx)}
.enrich-form{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.enrich-form .drop{margin:0}
.enrich-form textarea{width:100%;border:1px solid var(--aline);border-radius:12px;padding:10px 12px;font:inherit;font-size:13.5px;background:var(--acard);color:var(--atx);resize:vertical}

/* ─── 단계형 로딩 ─── */
.lbar{width:230px;height:5px;border-radius:99px;background:color-mix(in srgb, var(--aacc) 14%, transparent);overflow:hidden}
.lbar[hidden]{display:none}
.lbar i{display:block;height:100%;border-radius:99px;background:var(--aacc);width:3%}
.lsteps{display:flex;flex-direction:column;gap:9px;align-items:flex-start;text-align:left;min-width:210px}
.lsteps[hidden]{display:none}
.lstep{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--amut);transition:color .3s}
.lstep .l-ico{width:16px;height:16px;border-radius:50%;flex:0 0 16px;position:relative;border:2px solid color-mix(in srgb, var(--amut) 35%, transparent)}
.lstep.on{color:var(--atx);font-weight:600}
.lstep.on .l-ico{border-color:color-mix(in srgb, var(--aacc) 30%, transparent);border-top-color:var(--aacc);animation:spin .8s linear infinite}
.lstep.done{color:var(--amut)}
.lstep.done .l-ico{border-color:var(--aacc);background:var(--aacc)}
.lstep.done .l-ico::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ─── 드래그 앤 드롭 하이라이트 ─── */
.drop.dragging{border-color:var(--aacc);background:color-mix(in srgb, var(--aacc) 8%, transparent)}
#v-live.dragging .wrap{outline:2px dashed var(--aacc);outline-offset:-8px;border-radius:16px}
#v-live.dragging #decodeInput{border-color:var(--aacc)}

/* ─── 분석 화면 기본 정보 (MBTI·생년월일·시) ─── */
/* .hero-card .meta(flex 한 줄)보다 세게 — 폰에서 2열로 접혀야 가로 스크롤이 안 생긴다 */
.meta-base,.hero-card .meta-base{margin-top:8px;padding-top:10px;border-top:1px dashed color-mix(in srgb, var(--aline) 70%, transparent);display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:12px 14px;align-items:start}
.meta-base>div{white-space:nowrap;line-height:16px}
.meta-base b{font-size:13px;line-height:17px;margin-top:4px}

/* ─── 실전 코칭 기록 ─── */
.ll-shots{font-size:11.5px;color:var(--amut)}
.ll-txt{font-size:13.5px;line-height:1.65;white-space:pre-wrap;color:var(--atx);word-break:break-word}
.ll-meta{margin-top:10px;font-size:12px;color:var(--amut)}
.ll-mine{margin-top:12px;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--aacc) 7%,transparent);font-size:13px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.ll-mine b{display:block;font-size:11px;color:var(--aacc);margin-bottom:4px}

/* ─── 리포트 등급 ─── */
/* 리포트 등급 — 마이 탭 '내 등급'과 같은 가로 배치 (색 배지 + 라벨·상위%·점수) */
.grade-h{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:18px;text-align:left}
.grade-h .g-hinfo b{font-size:16.5px;color:#fff}
.grade-h .g-hinfo small{display:block;font-size:12.5px;color:#a0a0ae;margin-top:3px}
.grade-h .g-top{display:flex;align-items:center;gap:8px}
.grade-h .pct-chip{margin-top:0}

/* 분석 하단 바 — 연습(로즈 CTA)과 실전(흰 테두리)이 눌림 상태처럼 안 보이게 구분 */
.persona-bar #btnToScenario{background:var(--aacc);border-color:var(--aacc)}
.persona-bar #btnToScenario:hover{background:color-mix(in srgb,var(--aacc) 88%,#000)}

.grade-row{display:flex;align-items:center;justify-content:center;gap:22px;margin-bottom:16px}
.grade-row .bigring{margin:0;flex:0 0 auto} /* 링의 가운데 정렬 마진이 줄 안에서 삐뚤어지는 것 방지 */
.grade-box{display:flex;flex-direction:column;align-items:flex-start;gap:7px;text-align:left}
.grade-top{display:flex;align-items:baseline;gap:9px}
.grade-g{font-size:42px;font-weight:900;line-height:1;letter-spacing:-.02em}
.grade-lbl{font-size:14px;font-weight:700;color:#e9e9f0;white-space:nowrap} /* 다크 카드 위 — 밝게 */
.grade-box .pct-chip{margin-top:0}
.pct-chip{margin-top:5px;font-size:12px;font-weight:800;color:var(--aacc);background:color-mix(in srgb, var(--aacc) 12%, transparent);padding:3px 9px;border-radius:99px}

/* ─── 속뜻 보기 버튼 — 포인트색 틴트 (테마 자동 적응) ─── */
.btn.decode{
  background:color-mix(in srgb, var(--aacc) 13%, transparent);
  color:var(--aacc);
  border:1px solid color-mix(in srgb, var(--aacc) 32%, transparent);
  font-weight:800;
}
.btn.decode:active{background:color-mix(in srgb, var(--aacc) 22%, transparent)}

/* ─── 충전 패키지 ─── */
.packs{display:flex;flex-direction:column;gap:8px;margin:14px 0 8px;max-height:44vh;overflow-y:auto;padding:2px}
.pack{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-radius:14px;border:1.5px solid var(--aline);background:var(--acard);color:var(--atx);font:inherit;cursor:pointer;text-align:left;flex-shrink:0}
.pack .pk-l{display:flex;flex-direction:column;gap:2px}
.pack b{font-size:15px;font-weight:800;display:flex;align-items:center;gap:6px}
.pack small{font-size:11.5px;color:var(--amut)}
.pack small em{font-style:normal;font-weight:700;color:var(--aacc)}
.pack .pk-r{font-size:14px;font-weight:700;white-space:nowrap}
.pack.on{border-color:var(--aacc);background:color-mix(in srgb, var(--aacc) 8%, transparent)}
.pack i{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.02em;color:#fff;background:var(--aacc);padding:1.5px 7px;border-radius:99px}
.pack i.best{background:#c9a227}
.pack-cap{font-size:11.5px;font-weight:700;color:var(--amut);text-align:left;margin:6px 2px 0;flex-shrink:0}
.pack-costs{font-size:11.5px;color:var(--amut);text-align:center;line-height:1.6;margin-bottom:6px}

/* ─── 친구 초대 ─── */
.ref-link{
  margin:14px 0 10px;padding:12px 14px;border-radius:12px;
  border:1.5px dashed color-mix(in srgb, var(--aacc) 45%, transparent);
  background:color-mix(in srgb, var(--aacc) 7%, transparent);
  font-size:13.5px;font-weight:700;color:var(--aacc);
  word-break:break-all;text-align:center;user-select:all;
}
.ref-note{
  text-align:center;margin-top:10px;padding:10px 14px;border-radius:12px;
  background:color-mix(in srgb, var(--aacc) 8%, transparent);
  color:var(--atx);
}
.ref-note.hidden{display:none}

/* ─── 로그인 화면 ─── */
.login-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:70vh;gap:6px}
.login-ico{font-size:44px;margin-bottom:6px}
/* ZZEND 워드마크 — 로그인 화면의 첫 인상 */
.login-wm{font-size:40px;font-weight:900;letter-spacing:-1.5px;margin-bottom:2px;text-align:center}
.login-wm i{font-style:normal;color:var(--aacc)}
.btn.kakao{
  background:#FEE500;color:#191919;font-weight:800;border:none;
  margin-top:18px;max-width:300px;
}
.btn.kakao:active{filter:brightness(.95)}
.agree-row{
  display:flex;align-items:flex-start;gap:8px;max-width:300px;
  margin-top:16px;font-size:12.5px;color:var(--sub,#8f9098);line-height:1.5;cursor:pointer;
}
.agree-row input{margin-top:2px;accent-color:#FEE500;width:16px;height:16px;flex:none}
.agree-row a{color:inherit;text-decoration:underline}
/* 기존 가입자 동의 게이트 — 화면 전체를 덮고, 동의해야 닫힌다 */
.agree-gate{
  position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.agree-gate.hidden{display:none}
.agree-card{
  background:var(--acard,#fff);color:var(--atx,#222);border-radius:var(--rr,20px);
  max-width:340px;width:100%;padding:26px 22px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.agree-card h3{font-size:17px;margin:4px 0 2px}
.agree-card .agree-row{margin:14px 0 4px;text-align:left}
.agree-card .btn{margin-top:10px;width:100%}

/* ══════════ 문의하기 ══════════ */
.inq{
  background:var(--acard);border:1px solid var(--aline);border-radius:14px;
  padding:14px 16px;margin-bottom:10px;
}
.inq-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.inq-top small{color:var(--amut);font-size:11.5px}
.inq-wait{font-size:12px;color:var(--warn)}
.inq-done{font-size:12px;color:var(--ok)}
.inq-q{font-size:14px;line-height:1.55;color:var(--atx);white-space:pre-wrap;word-break:break-word}
.inq-a{
  margin-top:10px;padding:10px 12px;border-radius:10px;
  background:color-mix(in srgb,var(--aacc) 7%,var(--acard));
  border:1px solid color-mix(in srgb,var(--aacc) 22%,var(--aline));
}
.inq-a-h{font-size:11.5px;font-weight:700;color:var(--aacc);margin-bottom:5px}
.inq-a p{font-size:13.5px;line-height:1.55;color:var(--atx);white-space:pre-wrap;word-break:break-word}

/* 심층 분석 잠금 카드 — 탭하면 대화 추가로 안내 */
.deep-locked{cursor:pointer;border:1.5px dashed var(--aline)}
.deep-locked:active{transform:scale(.99)}
.deep-locked .prose{color:var(--amut)}
.deep-locked .locknote{font-size:11.5px;font-weight:700;color:var(--aacc);margin-top:8px}
/* 싱크로율 80% 달성 — 대망의 심층 분석 강조 카드 */
.deep-hype{
  border:1.5px solid var(--aacc);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--aacc) 10%, transparent);
}
.deep-hype h3{color:var(--aacc)}

/* 최종판 잠금 티저 — 70% 미만일 때 점선 카드 */
.deep-locked{border:1.5px dashed var(--dash)}
.deep-locked h3{color:var(--amut)}

/* 실전 탭 — 올린 카톡 txt 파일 칩 */
.shot.txtchip{
  width:64px;height:64px;border-radius:10px;border:1px solid var(--aline);
  background:var(--fake);display:grid;place-items:center;font-size:24px;
}

/* 상대별 대화 타임라인 */

/* 분석 화면 하단 바 — 연습/실전 두 버튼 + 아래 삭제 한 줄 */
.persona-bar{flex-wrap:wrap;padding-bottom:10px}
/* 연습·실전 두 버튼은 정확히 반반 — 같은 크기 */
.persona-bar .primary,
.persona-bar .ghost{flex:1 1 0;min-width:0;white-space:nowrap}
.persona-bar .text{
  flex:1 1 100%;width:100%;margin:0;padding:8px 0 4px;
  color:var(--danger);font-size:12.5px;
}

/* 붙여넣은 대화 내용은 상자 안에서만 스크롤 — 페이지가 한없이 길어지지 않게 */
.ll-scroll{display:block;max-height:220px;overflow-y:auto;white-space:pre-wrap}
#timelineBody .ll-scroll{max-height:62vh} /* 모아 보기는 박스 하나에 전체 대화라 넉넉하게 */

/* ── 화면 캡처 억제 ── */
/* 계정 워터마크 — 화면 위에 은은하게 깔려 캡처물에 출처가 남는다. 클릭은 통과 */
#wmLayer{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.07;background-repeat:repeat}
/* 앱이 백그라운드로 가면 완전 검은 화면 — 폰 최근 앱 목록 미리보기에 아무것도 안 보이게 */
body.veiled{background:#000}
body.veiled>*{visibility:hidden}

/* ── 앱 설치 배너 (PWA) ── */
.install-banner{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:color-mix(in srgb,var(--aacc) 7%,var(--acard));
  border:1px solid color-mix(in srgb,var(--aacc) 28%,transparent);
  border-radius:14px;padding:12px 14px;margin-bottom:14px;cursor:pointer}
.install-banner .ib-ico{font-size:22px}
.install-banner .ib-txt{flex:1;min-width:0}
.install-banner .ib-txt b{display:block;font-size:13.5px;color:var(--aacc)}
.install-banner .ib-txt small{display:block;font-size:11.5px;color:var(--amut);margin-top:1px}
.install-banner i{font-style:normal;color:var(--amut);padding:4px 7px;font-size:13px}

/* ── 카톡 파일 접수증 — 올린 파일이 잘 읽혔는지 그 자리에서 확인 ── */
.receipt{margin:10px 0 2px;padding:11px 14px;border-radius:12px;
  background:var(--acard);border:1px solid var(--aline);
  font-size:12.5px;line-height:1.6;color:var(--atx)}
.receipt b{font-size:13px}
.receipt small{display:block;margin-top:3px;color:var(--amut);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.receipt em{display:block;margin-top:5px;font-style:normal;color:var(--warn);font-weight:600}