@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root {
  --navy: #233e4c;
  --navy-2: #365563;
  --navy-deep: #132a38;
  --gold: #8a7044;
  --gold-soft: #c9a867;
  --sage: #577367;
  --paper: #f8f8f5;
  --card: #fff;
  --ink: #233b48;
  --muted: #5e706a;
  --line: #dfe4df;
  --soft: #eff2ed;
  --danger: #a72828;
  --ok: #21634c;
  --radius: 0.875rem;
  --shadow: 0 1px 2px rgba(19, 42, 56, .06), 0 0.375rem 1.25rem rgba(19, 42, 56, .07);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* 휴대폰 글자 크기 설정을 따른다. 아이폰은 -apple-system-body 가 있어야 큰 글씨 설정이 적용되고,
   안드로이드는 rem 이 자동으로 커진다. 모든 크기를 rem 으로 써서 글자와 함께 화면이 커진다. */
html { font: -apple-system-body; font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.55;
  letter-spacing: -0.01em;
  word-break: keep-all;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--navy); }
[hidden] { display: none !important; }

.app { max-width: min(100%, 40rem); margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; }

/* 상단바 */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 0.625rem;
  padding: calc(0.625rem + var(--safe-t)) 1rem 0.625rem;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.brand { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; color: var(--navy); min-width: 0; flex: 1; }
.brand img { width: 2.25rem; height: 2.25rem; border-radius: 9px; flex: none; }
.brand b { display: block; font-size: 1.0625rem; font-weight: 750; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand small { display: block; font-size: 0.75rem; color: var(--muted); line-height: 1.2; }
.icon-btn {
  width: 2.75rem; height: 2.75rem; border-radius: 12px; border: 0; background: transparent;
  display: inline-grid; place-items: center; color: var(--navy); flex: none;
}
.icon-btn:active { background: var(--soft); }
.icon-btn svg { width: 1.5rem; height: 1.5rem; }

main { flex: 1; padding: 1.25rem 1.125rem calc(1.75rem + var(--safe-b)); }

/* 홈 */
.eyebrow { font-size: 0.75rem; letter-spacing: .14em; font-weight: 700; color: var(--gold); text-transform: uppercase; margin: 0.375rem 0 0.625rem; }
.hero h1 { font-size: 2rem; line-height: 1.28; font-weight: 700; color: var(--navy); margin: 0 0 0.75rem; letter-spacing: -0.03em; }
.hero h1 em { font-style: normal; color: var(--sage); }
.hero p { margin: 0 0 1.375rem; color: var(--muted); font-size: 1.0625rem; }

.status-pill {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4375rem 0.8125rem; border-radius: 999px;
  background: var(--soft); color: var(--navy); font-size: 0.875rem; font-weight: 600; margin-bottom: 1rem;
}
.status-pill i { width: 0.5625rem; height: 0.5625rem; border-radius: 50%; background: #9aa6a0; }
.status-pill.on i { background: #2f9e6e; box-shadow: 0 0 0 4px rgba(47, 158, 110, .18); }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 0.625rem;
  width: 100%; min-height: 3.625rem; padding: 0.875rem 1.25rem; border-radius: var(--radius);
  border: 1px solid transparent; font-size: 1.125rem; font-weight: 700; text-decoration: none; text-align: center;
  transition: transform .06s ease, background .15s ease;
}
.btn:active { transform: scale(.985); }
.btn svg { width: 1.375rem; height: 1.375rem; flex: none; }
.btn-primary { background: var(--navy); color: #fff; box-shadow: 0 6px 16px rgba(35, 62, 76, .25); }
.btn-primary:active { background: var(--navy-deep); }
.btn-primary:disabled { background: #9fb0b8; box-shadow: none; }
.btn-line { background: #fff; color: var(--navy); border-color: var(--line); }
.btn-kakao { background: #fee500; color: #191600; }
.btn-danger { background: #fff; color: var(--danger); border-color: #e8c9c9; }
.btn-sm { min-height: 2.75rem; font-size: 0.9375rem; padding: 0.625rem 0.875rem; border-radius: 11px; }

.quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 0.625rem; margin: 0.75rem 0 1.5rem; }
.quick a, .quick button {
  display: flex; flex-direction: column; align-items: center; gap: 0.375rem; padding: 0.875rem 0.375rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 0.875rem; font-weight: 650; color: var(--navy); text-decoration: none;
}
.quick svg { width: 1.625rem; height: 1.625rem; }
.quick .kakao svg { color: #3b1e1e; }

.section-title { font-size: 0.9375rem; font-weight: 750; color: var(--navy); margin: 1.625rem 0 0.625rem; display: flex; align-items: center; justify-content: space-between; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); }
.room-list { display: grid; gap: 0.625rem; }
.room {
  display: flex; align-items: center; gap: 0.75rem; width: 100%; text-align: left;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.875rem 1rem;
}
.room .dot { width: 2.625rem; height: 2.625rem; border-radius: 12px; background: var(--soft); display: grid; place-items: center; color: var(--navy); flex: none; }
.room .dot svg { width: 1.375rem; height: 1.375rem; }
.room b { display: block; font-size: 1rem; }
.room small { color: var(--muted); font-size: 0.8125rem; }
.room .grow { flex: 1; min-width: 0; }
.badge { min-width: 1.375rem; height: 1.375rem; padding: 0 0.4375rem; border-radius: 11px; background: var(--danger); color: #fff; font-size: 0.75rem; font-weight: 700; display: inline-grid; place-items: center; }

.trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 0.5rem; margin-top: 0.5rem; }
.trust div { background: var(--soft); border-radius: 12px; padding: 0.75rem 0.5rem; text-align: center; font-size: 0.8125rem; color: var(--muted); }
.trust b { display: block; color: var(--navy); font-size: 0.875rem; }

.steps-how { counter-reset: s; display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.steps-how li { counter-increment: s; display: flex; gap: 0.75rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 0.75rem 0.875rem; font-size: 0.9375rem; }
.steps-how li::before { content: counter(s); width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 700; font-size: 0.875rem; display: grid; place-items: center; flex: none; }

.fineprint { font-size: 0.8125rem; color: var(--muted); line-height: 1.6; margin-top: 1.375rem; }
.fineprint a { color: var(--muted); }

/* 단계 진행 */
.progress { display: flex; gap: 0.375rem; margin: 2px 0 1.125rem; }
.progress span { flex: 1; height: 0.375rem; border-radius: 3px; background: var(--line); }
.progress span.on { background: var(--gold-soft); }
.step-label { font-size: 0.875rem; color: var(--gold); font-weight: 700; margin-bottom: 0.25rem; }
.step h2 { font-size: 1.625rem; line-height: 1.3; margin: 0 0 0.375rem; color: var(--navy); letter-spacing: -0.03em; }
.step .help { color: var(--muted); margin: 0 0 1.125rem; font-size: 1rem; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem; }
.tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; min-height: 7.375rem;
  padding: 1rem; background: #fff; border: 1.5px solid var(--line); border-radius: 16px; text-align: left;
  font-size: 1.125rem; font-weight: 700; color: var(--navy);
}
.tile svg { width: 2.125rem; height: 2.125rem; color: var(--gold); }
.tile.sel, .choice.sel { border-color: var(--navy); background: #f1f5f6; box-shadow: inset 0 0 0 1px var(--navy); }
.choices { display: grid; gap: 0.625rem; }
.choice {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%;
  min-height: 3.875rem; padding: 0.875rem 1.125rem; background: #fff; border: 1.5px solid var(--line); border-radius: 14px;
  font-size: 1.125rem; font-weight: 650; text-align: left; color: var(--navy);
}
.choice svg { width: 1.25rem; height: 1.25rem; color: #9aa6a0; flex: none; }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.75rem; }
.chip { padding: 0.625rem 0.875rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 0.9375rem; font-weight: 600; color: var(--navy); }
.chip.sel { background: var(--navy); border-color: var(--navy); color: #fff; }

.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 700; margin-bottom: 0.4375rem; font-size: 1rem; }
.input, textarea.input {
  width: 100%; border: 1.5px solid var(--line); border-radius: 13px; background: #fff; padding: 0.9375rem 1rem; font-size: 1.125rem; outline: none;
}
.input:focus { border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(54, 85, 99, .12); }
textarea.input { min-height: 8.75rem; resize: vertical; line-height: 1.5; }
.mic-line { display: flex; justify-content: flex-end; margin-top: -0.25rem; margin-bottom: 0.625rem; }
.dictate {
  display: inline-flex; align-items: center; gap: 0.4375rem; padding: 0.625rem 0.875rem; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--navy); font-weight: 650; font-size: 0.9375rem;
}
.dictate svg { width: 1.125rem; height: 1.125rem; }
.dictate.live { background: var(--danger); border-color: var(--danger); color: #fff; }
.agree { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.875rem; border-radius: 13px; background: var(--soft); font-size: 0.9375rem; margin-bottom: 1.125rem; }
.agree input { width: 1.5rem; height: 1.5rem; margin: 1px 0 0; accent-color: var(--navy); flex: none; }
.warn { color: var(--danger); font-size: 0.875rem; font-weight: 600; min-height: 1.25rem; margin: 0.25rem 0 0.625rem; }
.note { font-size: 0.875rem; color: var(--muted); background: #fbf7ee; border: 1px solid #efe3c8; border-radius: 12px; padding: 0.625rem 0.75rem; margin-bottom: 0.875rem; }
.step-actions { display: grid; gap: 0.625rem; margin-top: 0.5rem; }

/* 대화방 */
.chat-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat-head { background: #fff; border-bottom: 1px solid var(--line); padding: 0.625rem 1rem; font-size: 0.875rem; color: var(--muted); display: flex; justify-content: space-between; gap: 0.625rem; align-items: center; }
.chat-head b { color: var(--navy); letter-spacing: .06em; }
.messages { flex: 1; min-width: 0; overflow-x: hidden; overflow-y: auto; padding: 1rem 0.875rem 0.625rem; display: flex; flex-direction: column; gap: 0.625rem; }
.msg { max-width: min(84%, 40rem); min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.msg .bubble { padding: 0.6875rem 0.875rem; border-radius: 16px; font-size: 1.0625rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg time { font-size: 0.6875rem; color: #8c9a95; padding: 0 0.25rem; }
.msg.me { align-self: flex-end; align-items: flex-end; }
.msg.me .bubble { background: var(--navy); color: #fff; border-bottom-right-radius: 0.3125rem; }
.msg.them { align-self: flex-start; }
.msg.them .who { font-size: 0.8125rem; font-weight: 700; color: var(--gold); padding-left: 0.25rem; }
.msg.them .bubble { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 0.3125rem; }
.msg.sys { align-self: center; max-width: 92%; }
.msg.sys .bubble { background: var(--soft); color: var(--muted); font-size: 0.875rem; text-align: center; border-radius: 12px; }
.bubble .tools { display: flex; gap: 0.375rem; margin-top: 0.5rem; }
.speak { display: inline-flex; align-items: center; gap: 0.3125rem; border: 1px solid var(--line); background: var(--paper); color: var(--navy); border-radius: 999px; padding: 0.3125rem 0.6875rem; font-size: 0.8125rem; font-weight: 650; }
.speak svg { width: 0.9375rem; height: 0.9375rem; }
.voice { display: flex; align-items: center; gap: 0.625rem; min-width: 10.625rem; border: 0; background: transparent; padding: 0; color: inherit; font-size: 1rem; font-weight: 650; }
.voice .play { width: 2.375rem; height: 2.375rem; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .18); flex: none; }
.msg.them .voice .play { background: var(--soft); color: var(--navy); }
.voice .play svg { width: 1.125rem; height: 1.125rem; }
.voice .bars { flex: 1; height: 1.375rem; background: repeating-linear-gradient(90deg, currentColor 0 0.1875rem, transparent 0.1875rem 0.4375rem); opacity: .35; border-radius: 3px; mask: linear-gradient(90deg, #000 var(--p, 0%), rgba(0,0,0,.45) var(--p, 0%)); }
.transcript { font-size: 0.875rem; opacity: .85; margin-top: 0.375rem; }

.composer {
  position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--line);
  padding: 0.625rem 0.75rem calc(0.625rem + var(--safe-b)); display: flex; gap: 0.5rem; align-items: flex-end;
}
.composer textarea {
  flex: 1; border: 1.5px solid var(--line); border-radius: 22px; padding: 0.6875rem 1rem; font-size: 1.0625rem;
  resize: none; max-height: 8.75rem; min-height: 2.875rem; outline: none; background: var(--paper); line-height: 1.4;
}
.composer textarea:focus { border-color: var(--navy-2); background: #fff; }
.round { width: 3rem; height: 3rem; border-radius: 50%; border: 0; display: grid; place-items: center; flex: none; }
.round svg { width: 1.4375rem; height: 1.4375rem; }
.round.main { background: var(--navy); color: #fff; }
.round.ghost { background: var(--soft); color: var(--navy); }
.round.live { background: var(--danger); color: #fff; }

.recorder { display: flex; align-items: center; gap: 0.75rem; flex: 1; min-height: 3rem; padding: 0 0.375rem; }
.recorder .rec-dot { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--danger); animation: pulse 1s infinite; }
.recorder .rec-time { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.125rem; }
.recorder .rec-hint { color: var(--muted); font-size: 0.875rem; flex: 1; }
@keyframes pulse { 50% { opacity: .3; } }

.voice-hint { font-size: 0.8125rem; color: var(--muted); text-align: center; padding: 0.375rem 0.75rem 0; background: #fff; }

/* 모달 */
.modal-bg { position: fixed; inset: 0; background: rgba(19, 42, 56, .45); display: grid; place-items: end center; z-index: 50; padding: 1rem; }
.modal { background: #fff; border-radius: 20px; padding: 1.375rem 1.25rem calc(1.125rem + var(--safe-b)); width: 100%; max-width: 32.5rem; }
.modal h3 { margin: 0 0 0.5rem; font-size: 1.3125rem; color: var(--navy); }
.modal p { margin: 0 0 1.125rem; color: var(--muted); }
.modal .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.625rem; }

.toast { position: fixed; left: 50%; bottom: calc(5.625rem + var(--safe-b)); transform: translateX(-50%); background: var(--navy-deep); color: #fff; padding: 0.75rem 1.125rem; border-radius: 12px; font-size: 0.9375rem; z-index: 60; max-width: 90%; text-align: center; }

.done-code { text-align: center; padding: 1.25rem 0.625rem; }
.done-code .code { font-size: 2.375rem; font-weight: 800; letter-spacing: .14em; color: var(--navy); margin: 0.375rem 0; }

.spinner { width: 1.375rem; height: 1.375rem; border: 3px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

body.chat-mode main { padding: 0; display: flex; flex-direction: column; }
body.chat-mode .app { height: 100dvh; }

@media (min-width: 600px) {
  .hero h1 { font-size: 2.375rem; }
  .app { border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: var(--paper); }
}