:root {
  /* 은은한 빛 · 차분한 여백 · 서울숲의 초록 (고덕 서울숲 홈페이지 분위기) */
  --bg:#F5F5EE; --surface:#FFFFFF; --surface2:#F9FAF5; --line:#E1E4DA;
  --ink:#363636; --muted:#6F665B; --faint:#8E857A;
  --accent:#2F6B4F; --accent-ink:#FFFFFF; --accent-soft:#E3EEE6;
  --warm:#7E5F43; --warm-soft:#F1E8DC;
  --danger:#A8402F; --danger-bg:#FBEEEA; --danger-line:#EBC3B9; --call:#B0473A;
  --tabh:64px;
  --serif:"Noto Serif KR","Nanum Myeongjo",serif;
}
* { box-sizing:border-box; }
html { background:var(--bg); }
body { margin:0 auto; max-width:560px; min-height:100vh; background:var(--bg); color:var(--ink);
  font-family:"Pretendard","Pretendard Variable","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; word-break:keep-all; }
a { color:inherit; }
button { font:inherit; color:inherit; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
h1, h2, h3 { margin:0; letter-spacing:-0.02em; }

/* 화면 */
.view { padding:calc(16px + env(safe-area-inset-top)) 20px calc(var(--tabh) + 28px + env(safe-area-inset-bottom)); }
.view[hidden] { display:none; }
.top { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:8px 0 20px; }
.eyebrow { margin:0 0 4px; font-size:14px; color:var(--muted); }
.title { font-family:var(--serif); font-size:28px; font-weight:700; }
.round { width:48px; height:48px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--ink); flex:none; }
.back { display:inline-flex; align-items:center; gap:4px; min-height:44px; color:var(--muted); text-decoration:none; font-weight:600; }

/* 검색 */
.search { display:flex; align-items:center; gap:10px; padding:0 16px; height:54px; border-radius:16px; background:var(--surface); border:1px solid var(--line); color:var(--muted); margin-bottom:18px; }
.search input { flex:1; height:100%; border:none; outline:none; background:transparent; color:var(--ink); font:inherit; font-size:16px; }
.search input::placeholder { color:var(--faint); }
.search:focus-within { border-color:var(--accent); }

/* 설치 안내 */
.install { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; padding:12px 14px; margin-bottom:14px; border-radius:14px; background:var(--accent-soft); font-size:14px; }
.install[hidden] { display:none; }
.row-gap { display:flex; gap:6px; }
.btn-sm { border:none; border-radius:10px; padding:8px 14px; min-height:40px; background:var(--accent); color:var(--accent-ink); font-weight:700; cursor:pointer; }
.btn-sm[hidden] { display:none; }
.btn-ghost { border:none; background:transparent; color:var(--muted); min-height:40px; padding:8px 10px; cursor:pointer; }
.btn-ghost.wide { width:100%; margin-top:6px; }

/* 마음 상태 고르기 */
.panel { background:var(--surface); box-shadow:0 1px 2px rgba(54,48,40,0.04); border:1px solid var(--line); border-radius:24px; padding:22px 20px; }
.panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:16px; }
.panel-head h2 { font-family:var(--serif); font-size:24px; line-height:1.4; font-weight:700; }
.pill-tag { flex:none; padding:6px 12px; border-radius:999px; background:var(--warm-soft); color:var(--warm); font-size:13px; font-weight:700; }
.step { display:flex; align-items:center; gap:10px; margin:14px 0 10px; font-weight:700; font-size:16px; }
.num { width:26px; height:26px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font-size:14px; font-weight:800; flex:none; }
.seg { display:flex; gap:8px; }
.seg-btn { flex:1; min-height:46px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--ink); font-weight:600; cursor:pointer; }
.seg-btn.on { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:800; }
.moods { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.mood { display:flex; align-items:center; gap:10px; min-height:58px; padding:10px 12px; border-radius:16px; border:1px solid var(--line); background:var(--surface2); text-align:left; cursor:pointer; }
.mood:hover, .mood:focus-visible { border-color:var(--accent); }
.mood .mi { width:34px; height:34px; border-radius:10px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; flex:none; }
.mood span { font-size:15px; font-weight:600; line-height:1.3; }

/* 기능 카드 */
.feature-row { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin:18px 0; }
.feature { display:flex; flex-direction:column; gap:2px; padding:16px 14px; border-radius:20px; background:var(--surface); border:1px solid var(--line); text-decoration:none; min-height:128px; }
.feature .ico { width:42px; height:42px; border-radius:12px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; margin-bottom:10px; }
.feature b { font-size:17px; }
.feature span:last-child { font-size:13px; color:var(--muted); }

/* 위기 카드 */
.alert-card { width:100%; display:flex; align-items:center; gap:14px; padding:18px 16px; border-radius:20px; background:var(--danger-bg); border:1px solid var(--danger-line); text-align:left; cursor:pointer; }
.alert-ico { width:46px; height:46px; border-radius:50%; background:#fff; color:var(--danger); display:grid; place-items:center; flex:none; }
.alert-text { flex:1; display:flex; flex-direction:column; gap:2px; }
.alert-text b { color:var(--danger); font-size:17px; }
.alert-text span { color:#6F4A42; font-size:14px; line-height:1.45; }
.chev { color:var(--danger); flex:none; }

/* 주제 */
.sec-head { display:flex; justify-content:space-between; align-items:baseline; margin:28px 0 12px; }
.sec-head h2 { font-family:var(--serif); font-size:20px; font-weight:700; }
.sec-head a { color:var(--muted); font-size:14px; text-decoration:none; }
.hscroll { display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -20px; padding:0 20px 4px; scrollbar-width:none; }
.hscroll::-webkit-scrollbar { display:none; }
.topic { flex:0 0 72%; scroll-snap-align:start; display:flex; flex-direction:column; gap:8px; padding:18px; border-radius:20px; background:var(--surface); border:1px solid var(--line); text-decoration:none; min-height:150px; }
.tag { align-self:flex-start; padding:4px 10px; border-radius:999px; background:var(--warm-soft); color:var(--warm); font-size:12px; font-weight:700; }
.topic b { font-size:18px; line-height:1.35; }
.topic span.s { color:var(--muted); font-size:14px; line-height:1.5; }
.list { display:flex; flex-direction:column; gap:10px; }
.list .topic { flex:none; min-height:0; }
.empty { color:var(--muted); padding:24px 4px; }
.foot-note { margin:26px 2px 0; font-size:13px; color:var(--muted); line-height:1.6; }
.foot-note b { color:var(--ink); }

/* 글 */
.article h1 { font-family:var(--serif); font-size:25px; line-height:1.35; margin:8px 0 12px; }
.article p { margin:0 0 14px; font-size:17px; line-height:1.75; color:#4A443D; }
.article .src { font-size:13px; color:var(--muted); margin-top:18px; }
.btn-main { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:54px; margin-top:22px; border:none; border-radius:16px; background:var(--accent); color:var(--accent-ink); font-weight:800; font-size:16px; cursor:pointer; text-decoration:none; }

/* AI 상담 */
.chat-note { margin:-8px 0 14px; padding:10px 14px; border-radius:12px; background:var(--surface); color:var(--muted); font-size:13px; }
.chat-note b { color:var(--ink); }
.chat { display:flex; flex-direction:column; gap:12px; padding-bottom:84px; }
.msg { max-width:90%; padding:13px 15px; border-radius:18px; line-height:1.7; overflow-wrap:anywhere; }
.msg p { margin:0 0 8px; } .msg p:last-child { margin:0; }
.bot { background:var(--surface); border:1px solid var(--line); border-top-left-radius:6px; align-self:flex-start; }
.me { background:var(--accent); color:var(--accent-ink); font-weight:500; border-top-right-radius:6px; align-self:flex-end; white-space:pre-wrap; }
.ref { display:inline-block; font-size:11px; font-weight:800; color:var(--accent); background:var(--accent-soft); border-radius:6px; padding:0 5px; margin:0 1px; vertical-align:1px; }
.sources { margin-top:10px; padding-top:8px; border-top:1px dashed var(--line); font-size:13px; color:var(--muted); }
.sources summary { cursor:pointer; }
.sources li { margin:6px 0; }
.sources .ex { display:block; font-size:12px; margin-top:2px; }
.small { font-size:12px; color:var(--faint); margin-top:10px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.chips button { font-size:14px; border:1px solid var(--line); background:var(--surface2); color:var(--accent); border-radius:999px; padding:8px 12px; min-height:40px; cursor:pointer; }
.typing span { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--muted); margin:0 2px; animation:b 1s infinite; }
.typing span:nth-child(2){animation-delay:.15s} .typing span:nth-child(3){animation-delay:.3s}
@keyframes b { 0%,80%,100%{opacity:.25} 40%{opacity:1} }
.err { color:var(--danger); }
.composer { position:fixed; left:50%; transform:translateX(-50%); width:100%; max-width:560px; bottom:calc(var(--tabh) + env(safe-area-inset-bottom)); display:flex; gap:8px; padding:10px 16px; background:var(--bg); border-top:1px solid var(--line); z-index:4; }
.composer textarea { flex:1; font:inherit; font-size:16px; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--ink); resize:none; max-height:140px; outline:none; }
.composer textarea:focus { border-color:var(--accent); }
.composer button { width:52px; flex:none; border:none; border-radius:14px; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; cursor:pointer; }
.composer button:disabled { opacity:.5; }
.crisis { border:1.5px solid var(--danger-line); background:var(--danger-bg); }
.crisis b { color:var(--danger); }

/* 전화 버튼 */
.calls { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.calls.col { flex-direction:column; }
.call { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:46px; padding:0 16px; border-radius:14px; background:var(--call); color:#fff; font-weight:700; font-size:15px; text-decoration:none; }
.call.big { min-height:56px; font-size:17px; }
.call.soft { background:transparent; color:var(--danger); border:1.5px solid var(--danger-line); }
.call[hidden] { display:none; }

/* 병원 */
.card { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:20px; margin-bottom:12px; }
.stack { display:flex; flex-direction:column; gap:10px; }
.card h2 { font-size:19px; }
.muted { color:var(--muted); margin:0; font-size:14px; }
.info-row { display:flex; gap:12px; align-items:flex-start; }
.info-row .k { width:64px; flex:none; color:var(--muted); font-size:14px; padding-top:1px; }
.info-row .v { white-space:pre-line; }
.crisis-box { background:var(--danger-bg); border-color:var(--danger-line); }
.crisis-box h2 { color:var(--danger); }

/* 위기 시트 */
.sheet-bg { position:fixed; inset:0; background:rgba(54,48,40,0.45); z-index:20; display:flex; align-items:flex-end; justify-content:center; }
.sheet-bg[hidden] { display:none; }
.sheet { width:100%; max-width:560px; background:var(--surface); border-radius:26px 26px 0 0; padding:26px 20px calc(18px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); }
.sheet h2 { font-family:var(--serif); font-size:22px; margin-bottom:8px; }
.sheet > p { margin:0 0 6px; color:#4A443D; }
.sheet .muted { margin-top:14px; }

/* 아래 탭 */
.tabbar { position:fixed; left:50%; transform:translateX(-50%); bottom:0; width:100%; max-width:560px; height:calc(var(--tabh) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom);
  display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); background:rgba(247,243,236,0.96); border-top:1px solid var(--line); z-index:5; backdrop-filter:blur(8px); }
.tabbar a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:12px; color:var(--faint); text-decoration:none; font-weight:600; }
.tabbar a.on { color:var(--accent); }
.tagline { margin:6px 0 0; font-family:var(--serif); font-size:15px; color:var(--muted); }
.panel-sub { margin:-8px 0 4px; font-size:14px; color:var(--muted); }
.feature, .topic, .card, .bot { box-shadow:0 1px 2px rgba(54,48,40,0.04); }
.me { font-weight:500; }
.call.clinic { background:var(--accent); }
.med { border:1.5px solid var(--accent); background:var(--accent-soft); }
.hours { margin:12px 0 0; font-size:13px; color:var(--muted); line-height:1.6; }
.hours b { color:var(--ink); }
.notice-card { display:flex; align-items:center; gap:14px; padding:16px; margin-bottom:12px; border-radius:20px; background:var(--accent-soft); border:1px solid var(--line); text-decoration:none; }
.notice-card .ico { width:46px; height:46px; border-radius:50%; background:var(--surface); color:var(--accent); display:grid; place-items:center; flex:none; }
.nc-text { flex:1; display:flex; flex-direction:column; gap:2px; }
.nc-text b { color:var(--accent); font-size:17px; }
.nc-text span { color:var(--muted); font-size:14px; }
.chev2 { color:var(--accent); flex:none; }
.lead { margin:8px 0 18px; color:var(--muted); font-size:16px; line-height:1.6; }
.field { display:flex; flex-direction:column; gap:8px; font-weight:700; font-size:15px; }
.field input { height:54px; padding:0 14px; border:1px solid var(--line); border-radius:14px; background:var(--surface2); color:var(--ink); font:inherit; font-size:18px; font-weight:500; outline:none; }
.field input:focus { border-color:var(--accent); }
.consent { display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.55; color:var(--muted); cursor:pointer; }
.consent input { width:22px; height:22px; margin-top:2px; accent-color:var(--accent); flex:none; }
.consent b { color:var(--ink); }
.on-state { display:flex; align-items:center; gap:8px; margin:0; color:var(--accent); font-size:18px; }
.btn-ghost.line { border:1px solid var(--line); border-radius:14px; min-height:48px; }
.err[hidden] { display:none; }
.intro { margin:0 0 16px; padding:22px 20px; border-radius:20px; background:var(--accent-soft); }
.intro-tag { margin:0 0 8px; font-family:var(--serif); font-size:21px; font-weight:700; line-height:1.45; color:var(--accent); text-wrap:balance; }
.intro-text { margin:0; font-size:15px; line-height:1.75; color:#4A443D; }
.doctor .doc-head { display:flex; gap:12px; align-items:center; margin-bottom:12px; }
.doc-ico { width:48px; height:48px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; flex:none; }
.doc-head b { display:block; font-family:var(--serif); font-size:20px; }
.doc-head span { font-size:14px; color:var(--muted); }
.career { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.career li { position:relative; padding-left:14px; font-size:15px; line-height:1.55; color:#4A443D; }
.career li::before { content:""; position:absolute; left:0; top:10px; width:5px; height:5px; border-radius:50%; background:var(--accent); }
.sub-h { font-family:var(--serif); font-size:19px; margin:24px 2px 12px; }
.depts { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.dept { padding:14px; border-radius:16px; background:var(--surface); border:1px solid var(--line); display:flex; flex-direction:column; gap:4px; }
.dept b { font-size:15px; color:var(--accent); }
.dept span { font-size:13px; line-height:1.5; color:var(--muted); }
.about-card { display:flex; flex-direction:column; gap:6px; margin-top:24px; padding:20px; border-radius:20px; background:var(--surface); border:1px solid var(--line); text-decoration:none; }
.about-tag { font-family:var(--serif); font-size:19px; font-weight:700; line-height:1.45; color:var(--ink); }
.about-doc { font-size:14px; color:var(--muted); }
.about-more { margin-top:4px; font-size:14px; font-weight:700; color:var(--accent); }
.career-all { margin-top:14px; border-top:1px solid var(--line); padding-top:12px; }
.career-all summary { cursor:pointer; min-height:40px; display:flex; align-items:center; font-weight:700; color:var(--accent); list-style:none; }
.career-all summary::-webkit-details-marker { display:none; }
.career-all summary::after { content:"＋"; margin-left:auto; font-weight:400; }
.career-all[open] summary::after { content:"－"; }
.doc-main h3, .career-all h3 { font-size:14px; color:var(--muted); font-weight:700; margin:16px 0 8px; letter-spacing:0; }
/* 한국어 / English 전환 */
.top-actions { display:flex; gap:8px; align-items:center; flex:none; }
.lang-btn { min-width:56px; height:44px; padding:0 14px; border-radius:999px; border:1px solid var(--line); background:var(--card, #fff); color:var(--accent); font:600 14px/1 inherit; font-family:inherit; letter-spacing:.02em; cursor:pointer; flex:none; }
.lang-btn:hover { border-color:var(--accent); }
.lang-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.lang-en .title, .lang-en h1, .lang-en h2 { word-break:normal; overflow-wrap:break-word; }
.lang-en body { word-break:normal; }
.doc-main h3:first-child { margin-top:4px; }
/* 약 준비 안내 카드 (앱 안) — 엄지가 닿는 아래쪽, 탭 바 바로 위 */
.ready { position:fixed; z-index:30; left:50%; transform:translateX(-50%); width:calc(100% - 24px); max-width:536px; bottom:calc(var(--tabh) + 12px + env(safe-area-inset-bottom)); padding:18px; border-radius:22px; background:var(--accent); color:var(--accent-ink); display:flex; flex-direction:column; gap:14px; box-shadow:0 12px 32px rgba(31,61,46,.35); animation:readyIn .35s ease-out; }
.ready-in { display:flex; align-items:center; gap:14px; }
.ready-ic { width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.16); display:grid; place-items:center; flex:none; }
.ready-tx { display:flex; flex-direction:column; gap:3px; min-width:0; }
.ready-tx b { font-family:var(--serif); font-size:20px; line-height:1.3; }
.ready-tx span { font-size:15px; line-height:1.5; opacity:.95; }
.ready-ok { width:100%; min-height:54px; border-radius:14px; border:none; background:#fff; color:var(--accent); font:inherit; font-weight:800; font-size:17px; cursor:pointer; }
.ready-ok:active { transform:scale(.98); }
.ready-ok:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.ready-dim { position:fixed; inset:0; z-index:29; background:rgba(20,30,25,.28); }
@keyframes readyIn { from { transform:translate(-50%, 30px); opacity:0; } to { transform:translateX(-50%); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .ready { animation:none; } }
/* 만족도 평가 */
.tabbar a { position:relative; }
.tab-dot { position:absolute; top:9px; left:calc(50% + 9px); width:9px; height:9px; border-radius:50%; background:#C2492F; box-shadow:0 0 0 2px var(--bg); }
.ready-row { display:flex; gap:10px; }
.ready-row .ready-ok { flex:2; }
.ready-later { flex:1; min-height:54px; border-radius:14px; border:1px solid rgba(255,255,255,.55); background:transparent; color:#fff; font:inherit; font-weight:700; font-size:16px; cursor:pointer; }
.sv-locked, .sv-done { text-align:center; padding:30px 22px; }
.sv-locked h2, .sv-done h2 { font-family:var(--serif); font-size:21px; margin:12px 0 8px; }
.sv-locked p, .sv-done p { margin:0; line-height:1.6; }
.sv-big-ic { width:60px; height:60px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:inline-grid; place-items:center; }
.sv-form { display:flex; flex-direction:column; gap:14px; }
.sv-lead { margin:0 0 4px; font-size:16px; line-height:1.6; color:var(--muted); }
.sv-q { margin:0; min-width:0; }
.sv-q legend { display:flex; align-items:center; gap:10px; float:left; width:100%; margin-bottom:14px; padding:0; font-weight:800; font-size:17px; line-height:1.4; }
.sv-q legend + * { clear:both; }
.sv-n { width:28px; height:28px; flex:none; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font-size:14px; }
.sv-hint { clear:both; margin:0 0 12px; font-size:14px; color:var(--muted); }
.sv-opts { display:flex; flex-wrap:wrap; gap:8px; }
.sv-opt { position:relative; }
.sv-opt input { position:absolute; opacity:0; width:1px; height:1px; }
.sv-opt span { display:flex; align-items:center; min-height:46px; padding:0 16px; border-radius:999px; border:1px solid var(--line); background:var(--surface2); font-weight:600; font-size:15px; cursor:pointer; }
.sv-opt input:checked + span { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:800; }
.sv-opt input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
.sv-staff { display:flex; flex-direction:column; gap:14px; }
.sv-person { display:flex; flex-direction:column; gap:8px; padding-top:14px; border-top:1px solid var(--line); }
.sv-person:first-child { border-top:none; padding-top:0; }
.sv-who { display:flex; align-items:baseline; gap:8px; font-weight:800; font-size:16px; }
.sv-who small { font-weight:500; font-size:13px; color:var(--muted); }
.sv-scale { display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; }
.sv-scale .sv-opt span { justify-content:center; padding:0; min-height:46px; border-radius:12px; font-size:17px; }
.sv-skip { font-size:13px; color:var(--muted); background:none; border:none; padding:4px 0; align-self:flex-start; cursor:pointer; text-decoration:underline; min-height:32px; }
.sv-comment { display:flex; flex-direction:column; gap:10px; }
.sv-qt { font-weight:800; font-size:17px; }
.sv-comment textarea { padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:var(--surface2); font:inherit; font-size:16px; color:var(--ink); resize:vertical; }
.sv-comment textarea:focus { outline:none; border-color:var(--accent); }
.sv-form .btn-main { margin-top:4px; }
/* 베타: 약 알림 + 병원 탭만 */
html[data-beta] .full-only, html:not([data-beta]) .beta-only { display:none !important; }
html[data-beta] .tabbar { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.beta-pill { display:inline-block; padding:2px 8px; border-radius:999px; background:var(--warm-soft); color:var(--warm); font-size:12px; font-weight:800; vertical-align:1px; }
.beta-app { margin:0; font-family:var(--serif); font-size:26px; font-weight:700; line-height:1.3; }
[hidden] { display:none !important; }