:root {
  --ink: #15352f;
  --muted: #71817d;
  --primary: #0f7a66;
  --primary-dark: #075a4b;
  --mint: #dff5ed;
  --cream: #fbfaf4;
  --peach: #ff8c68;
  --line: #dce8e4;
  --white: #fff;
  --shadow: 0 22px 70px rgba(13, 76, 64, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 0;
  color: var(--ink);
  background: #eaf2ee;
  font-family: "Noto Sans KR", system-ui, sans-serif;
  line-height: 1.5;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.ambient { position: fixed; border-radius: 50%; filter: blur(8px); pointer-events: none; }
.ambient-one { width: 420px; height: 420px; background: #c5eadf; top: -130px; left: 5vw; }
.ambient-two { width: 350px; height: 350px; background: #f6d9ca; bottom: -120px; right: 5vw; }

.app-shell {
  position: relative;
  width: min(100%, 720px);
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--cream);
  box-shadow: var(--shadow);
}
.topbar {
  height: 72px;
  padding: 0 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(251, 250, 244, .9);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(15,122,102,.08);
}
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-size: 20px; font-weight: 800; letter-spacing: .08em; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px 11px 17px 11px; color: white; background: var(--primary); font-size: 17px; letter-spacing: 0; transform: rotate(-4deg); }
.header-actions { display:flex; align-items:center; gap:8px; }
.language-button { border:1px solid var(--line); background:white; color:var(--primary-dark); border-radius:12px; padding:7px 9px; font-size:11px; font-weight:800; }
.status-pill { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 600; padding: 7px 10px; background: white; border: 1px solid var(--line); border-radius: 20px; }
.status-pill > span:first-child { width: 7px; height: 7px; border-radius: 50%; background: #21bc7c; box-shadow: 0 0 0 4px rgba(33,188,124,.12); }

.hero { position: relative; min-height: 610px; padding: 48px 34px 40px; background: radial-gradient(circle at 95% 20%, #d8f2e8, transparent 38%), linear-gradient(160deg, #fbfaf4 60%, #f3ede0); }
.eyebrow { color: var(--primary); font-size: 11px; letter-spacing: .18em; font-weight: 800; }
h1 { margin: 15px 0 20px; font-size: clamp(38px, 8vw, 58px); line-height: 1.18; letter-spacing: -.055em; }
h1 em { color: var(--primary); font-style: normal; }
.hero > p { color: var(--muted); font-size: 16px; }
.hero-art { position: relative; height: 195px; margin: 10px 0 7px; }
.service-menu { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; padding:18px 20px 22px; background:#f9faf5; border-bottom:1px solid var(--line); }
.service-menu a { display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center; text-decoration:none; color:var(--primary-dark); font-size:10px; }
.service-menu a span { display:grid; place-items:center; width:44px; height:44px; background:white; border:1px solid var(--line); border-radius:16px; font-size:20px; }
.orbit { position: absolute; border: 1px solid rgba(15,122,102,.18); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-15deg); }
.orbit-a { width: 300px; height: 150px; }
.orbit-b { width: 220px; height: 220px; }
.art-center { position: absolute; display: grid; place-items: center; left: 50%; top: 50%; width: 100px; height: 100px; transform: translate(-50%, -50%) rotate(-5deg); border-radius: 38px 38px 54px 38px; background: linear-gradient(145deg, #17977e, #075b4c); color: white; font-size: 28px; font-weight: 800; box-shadow: 0 20px 40px rgba(15,122,102,.28); }
.art-card { position: absolute; display: grid; place-items: center; width: 74px; height: 74px; background: white; border-radius: 25px; font-size: 23px; box-shadow: 0 12px 30px rgba(20,61,51,.12); color: var(--peach); }
.art-card small { font-size: 9px; color: var(--muted); font-weight: 700; }
.art-medical { left: 10%; top: 13%; transform: rotate(-8deg); }
.art-travel { right: 8%; bottom: 10%; color: var(--primary); transform: rotate(7deg); }
.primary-button, .outline-button { width: 100%; min-height: 56px; border-radius: 18px; border: 0; font-weight: 700; transition: transform .2s, box-shadow .2s, background .2s; }
.primary-button { display: flex; justify-content: center; align-items: center; gap: 13px; background: var(--primary); color: white; box-shadow: 0 13px 28px rgba(15,122,102,.23); }
.primary-button span { font-size: 19px; }
.primary-button:hover { background: var(--primary-dark); transform: translateY(-2px); }
.trust-row { display: flex; justify-content: center; gap: 18px; margin-top: 16px; color: var(--muted); font-size: 10px; }

.planner { padding: 62px 28px 78px; background: white; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
h2 { margin: 7px 0 0; font-size: 28px; letter-spacing: -.045em; }
.step-badge { white-space: nowrap; padding: 8px 12px; border-radius: 99px; color: var(--primary); background: var(--mint); font-size: 11px; font-weight: 700; }
.quick-form { padding: 22px; background: #f6faf8; border: 1px solid #e7efec; border-radius: 25px; margin-bottom: 24px; }
.choice-group + .choice-group { margin-top: 19px; }
.choice-label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 9px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--line); background: white; color: #556963; padding: 9px 12px; border-radius: 12px; font-size: 12px; }
.chip.selected { color: white; border-color: var(--primary); background: var(--primary); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 19px 0 13px; }
.form-row label { font-size: 11px; font-weight: 700; }
.form-row select { display: block; width: 100%; margin-top: 7px; padding: 11px 10px; border: 1px solid var(--line); background: white; border-radius: 12px; color: var(--ink); }
.outline-button { min-height: 47px; border: 1px solid var(--primary); color: var(--primary); background: transparent; font-size: 13px; }
.outline-button:hover { background: var(--mint); }

.chat-card { border: 1px solid var(--line); border-radius: 28px; overflow: hidden; background: white; box-shadow: 0 15px 45px rgba(27,75,64,.09); }
.chat-header { display: flex; align-items: center; gap: 11px; padding: 16px 18px; border-bottom: 1px solid #edf2f0; }
.avatar { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 14px; background: #e3f3d9; color: white; font-size:25px; }
.chat-header div:nth-child(2) { display: flex; flex-direction: column; }
.chat-header strong { font-size: 13px; }
.chat-header span { color: #3fa781; font-size: 10px; }
.reset-button { margin-left: auto; width: 34px; height: 34px; border: 0; border-radius: 50%; color: var(--muted); background: #f3f7f5; font-size: 17px; }
.messages { min-height: 300px; max-height: 480px; overflow: auto; padding: 18px; background: #fbfcfb; }
.message { display: flex; margin: 10px 0; animation: rise .35s ease both; }
.message.user { justify-content: flex-end; }
.bubble { max-width: 84%; padding: 13px 15px; border-radius: 6px 18px 18px; background: white; border: 1px solid #e6eeeb; font-size: 13px; line-height: 1.65; box-shadow: 0 5px 15px rgba(31,70,60,.05); }
.user .bubble { color: white; background: var(--primary); border-color: var(--primary); border-radius: 18px 6px 18px 18px; }
.bubble small { display: block; color: #8a9995; margin-top: 8px; font-size: 10px; line-height: 1.5; }
.user .bubble small { color: rgba(255,255,255,.7); }
.typing { display: flex; gap: 4px; align-items: center; min-width: 58px; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: #93aaa4; animation: bounce 1s infinite alternate; }
.typing i:nth-child(2) { animation-delay: .2s; }.typing i:nth-child(3) { animation-delay: .4s; }
.profile-strip { display: flex; gap: 6px; flex-wrap: wrap; padding: 9px 15px; border-top: 1px solid #edf2f0; background: #f6faf8; }
.profile-strip span { padding: 5px 8px; color: var(--primary); background: var(--mint); border-radius: 8px; font-size: 10px; font-weight: 600; }
.chat-input { display: flex; gap: 10px; padding: 13px; border-top: 1px solid #edf2f0; background: white; }
.chat-input textarea { flex: 1; resize: none; max-height: 100px; border: 0; outline: 0; background: #f3f7f5; border-radius: 15px; padding: 12px 14px; font-size: 12px; }
.chat-input button { flex: 0 0 44px; height: 44px; border: 0; border-radius: 15px; color: white; background: var(--primary); font-size: 20px; }
.chat-input button:disabled { opacity: .45; cursor: wait; }

.result-section { padding: 0 28px 75px; background: #f5f8f6; }
.result-hero { margin: 0 -28px 26px; padding: 58px 28px 42px; text-align: center; color: white; background: linear-gradient(145deg, #0e7563, #084c41); }
.result-hero .eyebrow { color: #8ce1c8; }
.result-check { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 15px; color: var(--primary); background: white; border-radius: 50%; font-size: 22px; font-weight: 800; }
.result-hero h2 { font-size: 30px; }
.result-hero p { color: rgba(255,255,255,.7); font-size: 12px; }
.cost-summary { display: flex; justify-content: space-between; align-items: center; padding: 23px; background: white; border-radius: 23px; box-shadow: 0 10px 30px rgba(26,70,60,.08); }
.cost-summary > div:first-child { display: flex; flex-direction: column; }
.cost-summary span { color: var(--muted); font-size: 11px; }
.cost-summary strong { margin: 4px 0; font-size: 26px; letter-spacing: -.05em; }
.cost-summary small { color: var(--primary); font-weight: 600; }
.donut { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: conic-gradient(var(--primary) 0 44%, var(--peach) 44% 70%, #e6b65c 70% 85%, #78aeb3 85%); position: relative; }
.donut::after { content: ""; position: absolute; width: 52px; height: 52px; background: white; border-radius: 50%; }
.donut span { z-index: 1; text-align: center; font-size: 9px; line-height: 1.3; }
.cost-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin: 9px 0 38px; }
.cost-item { padding: 12px 6px; text-align: center; background: white; border-radius: 13px; }
.cost-item span { display: block; color: var(--muted); font-size: 9px; }.cost-item strong { font-size: 11px; }
.content-title { display: flex; align-items: center; gap: 13px; margin: 28px 0 12px; }
.content-title > span { color: var(--primary); font-size: 10px; font-weight: 800; }
.content-title small { color: var(--muted); font-size: 8px; letter-spacing: .16em; }
.content-title h3 { margin: 0; font-size: 18px; }
.recommend-card { min-height: 155px; padding: 22px; overflow: hidden; position: relative; border-radius: 23px; background: white; box-shadow: 0 8px 25px rgba(26,70,60,.07); }
.recommend-card::after { content: ""; position: absolute; width: 150px; height: 150px; right: -45px; top: -60px; border-radius: 50%; background: var(--mint); }
.recommend-card .tag { display: inline-block; padding: 5px 8px; border-radius: 7px; color: var(--primary); background: var(--mint); font-size: 9px; font-weight: 700; }
.recommend-card h4 { margin: 12px 0 4px; font-size: 17px; position: relative; z-index: 1; }
.recommend-card p { margin: 2px 0; color: var(--muted); font-size: 11px; position: relative; z-index: 1; }
.card-score { position: absolute; right: 18px; bottom: 18px; padding: 7px 10px; border-radius: 10px; color: #a66600; background: #fff4d8; font-size: 10px; font-weight: 700; }
.hotel-card::after { background: #f9e4d7; }
.timeline { padding: 12px 19px; background: white; border-radius: 23px; }
.timeline-item { display: grid; grid-template-columns: 45px 1fr; gap: 12px; padding: 15px 0; position: relative; }
.timeline-item:not(:last-child) { border-bottom: 1px solid #edf2f0; }
.day { width: 39px; height: 39px; display: grid; place-items: center; color: var(--primary); background: var(--mint); border-radius: 13px; font-size: 10px; font-weight: 800; }
.timeline-item strong { display: block; font-size: 12px; }.timeline-item p { margin: 3px 0 0; color: var(--muted); font-size: 10px; }
.notice { padding: 18px; margin: 28px 0 16px; color: #765e35; background: #fff8e7; border: 1px solid #f4e4bb; border-radius: 17px; }
.notice strong { font-size: 11px; }.notice p { margin: 6px 0 0; font-size: 9px; line-height: 1.6; }
.directory { padding:55px 28px; background:white; scroll-margin-top:75px; }
.directory.pale { background:#f6faf5; }
.directory > p { color:var(--muted); font-size:12px; line-height:1.7; margin:10px 0 22px; }
.directory-grid { display:grid; gap:10px; }
.directory-card { display:flex; gap:15px; align-items:flex-start; border:1px solid var(--line); border-radius:20px; background:white; padding:17px; }
.directory-icon { display:grid; place-items:center; flex:0 0 55px; height:55px; background:#e9f5ed; border-radius:15px; font-size:26px; }
.directory-card h3 { margin:3px 0; font-size:15px; }.directory-card strong { font-size:12px; }.directory-card p { margin:3px 0; color:var(--muted); font-size:10px; }.directory-card small { color:var(--primary); font-size:10px; font-weight:700; }
.sample-label { display:inline-block; color:#887549; background:#fff4d9; padding:2px 5px; border-radius:5px; font-size:9px; }
.demo-map { position:relative; height:300px; overflow:hidden; border:1px solid #b8dad4; border-radius:24px; background:linear-gradient(145deg,#c8e8e8,#7fc4d2); }
.map-water { position:absolute; right:15px; bottom:20px; color:#367b88; font-size:16px; font-weight:700; }.map-land { position:absolute; width:83%; height:145%; left:-18%; top:-20%; border-radius:40% 55% 45% 40%; transform:rotate(18deg); background:#dcebd2; box-shadow:inset -15px 0 0 #bfd7ae; }
.map-pin { position:absolute; z-index:1; padding:7px 9px; border-radius:20px; background:white; color:var(--primary-dark); box-shadow:0 3px 12px #28635b35; font-size:10px; font-weight:700; white-space:nowrap; }.pin-hospital { top:24%; left:28%; }.pin-hotel { top:45%; left:45%; }.pin-beach { top:69%; left:59%; }.pin-market { top:72%; left:10%; }
.demo-profile { display:flex; align-items:center; gap:12px; padding:16px; border-radius:18px; background:white; }.demo-profile > span { display:grid; place-items:center; width:48px; height:48px; background:var(--mint); border-radius:50%; font-size:23px; }.demo-profile div { display:flex; flex-direction:column; }.demo-profile strong { font-size:13px; }.demo-profile small { color:var(--muted); font-size:10px; }
.saved-plan { padding:17px; margin:10px 0; background:white; border:1px solid var(--line); border-radius:16px; font-size:12px; }
.bottom-tabs { position:sticky; bottom:0; z-index:30; display:grid; grid-template-columns:repeat(4,1fr); background:#fffefa; border-top:1px solid var(--line); padding:8px 7px calc(8px + env(safe-area-inset-bottom)); box-shadow:0 -8px 25px #1a5f4a12; }.bottom-tabs a { display:flex; flex-direction:column; align-items:center; color:var(--ink); text-decoration:none; font-size:20px; line-height:1.15; }.bottom-tabs small { font-size:9px; }
section { scroll-margin-top:72px; }
footer { display: flex; flex-direction: column; align-items: center; padding: 45px 20px calc(45px + env(safe-area-inset-bottom)); color: #82928e; background: #122f2a; }
footer strong { color: white; font-size: 20px; letter-spacing: .13em; }footer span { margin: 5px 0 14px; font-size: 10px; }footer small { opacity: .55; font-size: 8px; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 50; transform: translate(-50%, 30px); opacity: 0; pointer-events: none; padding: 11px 17px; color: white; background: #173c35; border-radius: 13px; box-shadow: var(--shadow); font-size: 11px; transition: .25s; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
[hidden] { display: none !important; }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes bounce { to { transform: translateY(-5px); opacity: .45; } }
@media (min-width: 850px) { body { padding: 30px 0; }.app-shell { border-radius: 34px; min-height: calc(100vh - 60px); }.topbar { top: 0; } }
@media (max-width: 420px) { .hero { padding-left: 24px; padding-right: 24px; }.planner,.result-section { padding-left: 20px; padding-right: 20px; }.result-hero { margin-left: -20px; margin-right: -20px; }.trust-row { gap: 9px; }.cost-grid { grid-template-columns: 1fr 1fr; }.section-heading { align-items: start; }.step-badge { margin-top: 25px; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }

/* Presentation mockup: one mobile screen at a time. */
body { background:#e9ebe2; }
.app-shell { width:min(100%, 440px); min-height:100dvh; background:#faf9f2; }
.ambient { opacity:.22; }
.topbar { height:74px; padding:0 20px; background:#faf9f2; border-bottom:1px solid #ecebe0; }
.topbar .brand,.topbar .status-pill { display:none; }
.mobile-title { position:absolute; left:50%; transform:translateX(-50%); color:#075021; font-size:27px; letter-spacing:.03em; }
.header-back,.header-menu { border:0; background:none; color:#171d17; font-size:30px; line-height:1; padding:4px; }
.header-menu { margin-left:auto; font-size:25px; }
.header-actions { margin-left:auto; margin-right:16px; }
.topbar .header-actions { display:none; }
.menu-open .topbar .header-actions { display:flex; position:absolute; right:47px; top:20px; z-index:45; margin:0; }
.language-button { background:transparent; border-color:#b5cbae; }
.hero,.service-menu,.section-heading,.quick-form,.chat-header,.profile-strip,.directory,footer { display:none !important; }
.planner { display:flex; flex-direction:column; min-height:calc(100dvh - 138px); padding:20px 16px 12px; background:#faf9f2; }
.mobile-intro { align-self:center; border:1px solid #a1c281; background:#f5faed; border-radius:24px; padding:8px 13px; color:#164a23; font-size:11px; text-align:center; }
.mobile-greeting { display:flex; align-items:center; gap:4px; margin:22px 0 20px; }
.mobile-greeting img { width:108px; height:135px; object-fit:contain; flex:0 0 auto; }
.mobile-greeting .bubble { font-size:17px; line-height:1.7; color:#151d17; padding:15px 16px; border-color:#e4e1d8; border-radius:22px; }
.quick-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin:0 0 16px; }
.quick-actions button { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:5px; min-height:77px; border:1px solid #deded2; border-radius:18px; background:#fff; color:#174d27; font-size:10px; white-space:nowrap; }
.quick-actions span { font-size:23px; }
.chat-card { display:flex; flex-direction:column; flex:1; min-height:230px; border:0; box-shadow:none; background:transparent; border-radius:0; }
.messages { flex:1; min-height:130px; max-height:none; padding:0 1px 12px; background:transparent; }
.messages .message:first-child { display:none; }
.messages .sample-conversation .bubble { font-size:14px; }
.messages .message { margin:8px 0; }
.messages .message.bot::before { content:""; display:block; flex:0 0 46px; height:56px; background:url('./assets/1793937872506.png') center/contain no-repeat; margin-right:5px; mix-blend-mode:multiply; }
.messages .bubble { max-width:86%; font-size:14px; border-radius:18px; }
.messages .user .bubble { color:#163b21; background:#e2eccf; border:1px solid #b8d1a3; }
.chat-input { padding:8px 0; border:0; background:transparent; }
.chat-input textarea { min-height:48px; background:#fff; border:1px solid #deded2; border-radius:25px; padding:14px 16px; }
.chat-input button { border-radius:50%; background:#2b842c; }
.bottom-tabs { height:64px; padding:5px 4px calc(5px + env(safe-area-inset-bottom)); background:#fff; }
.bottom-tabs a { font-size:21px; color:#303833; }.bottom-tabs small { font-size:10px; }
.bottom-tabs a:first-child { color:#166a2c; }
.result-section { display:none; min-height:calc(100dvh - 138px); padding:14px 12px 24px; background:#faf9f2; }
.result-open .planner { display:none; }.result-open .result-section:not([hidden]) { display:block; }
.result-bot { display:flex; align-items:center; gap:5px; margin-bottom:10px; }.result-bot img { width:58px; height:70px; }.result-bot .bubble { font-size:13px; padding:11px 13px; }
.result-hero { display:none; }
.plan-overview { display:grid; grid-template-columns:44% 56%; border:1px solid #d9e7c4; background:#fbfff5; border-radius:24px; padding:12px; gap:6px; }
.plan-overview::before { content:'✚  OI 맞춤 플랜 제안'; grid-column:1/-1; color:#0d5a25; font-size:18px; font-weight:800; }
.busan-art { position:relative; min-height:175px; overflow:hidden; border-radius:15px; background:linear-gradient(#66b8ed 0 52%,#d8e6dc 52% 54%,#4fa8c9 54% 100%); color:white; }
.busan-art span { position:absolute; z-index:1; left:12px; top:18px; font-size:13px; line-height:1.5; text-shadow:0 2px 4px #32627d; }
.skyline { position:absolute; bottom:38%; left:0; right:0; height:45px; color:#3c7e9e; font-size:35px; letter-spacing:-8px; white-space:nowrap; }
.overview-list { padding:2px 7px; background:white; border-radius:14px; }.overview-list p { display:flex; justify-content:space-between; gap:3px; margin:0; padding:7px 0; border-bottom:1px solid #eceee9; font-size:10px; }.overview-list b { font-weight:600; }.overview-list span { font-weight:700; }
.cost-summary { margin-top:12px; padding:12px 18px; }.cost-summary strong { font-size:19px; }.donut { width:58px; height:58px; }.donut::after { width:39px; height:39px; }
.cost-grid { margin:5px 0 12px; }
.content-title { margin:14px 0 7px; }.content-title h3 { font-size:16px; }
.timeline { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; padding:8px; border:1px solid #e4e5d8; }.timeline-item { display:block; min-height:125px; padding:8px 4px; text-align:center; background:#f5f8ed; border-radius:12px; }.timeline-item:not(:last-child) { border-bottom:0; }.timeline-item .day { margin:0 auto 5px; }.timeline-item strong { font-size:10px; }.timeline-item p { font-size:9px; line-height:1.4; }
.recommend-card { min-height:95px; padding:12px 15px; }.recommend-card h4 { margin:5px 0 2px; font-size:14px; }.recommend-card p { font-size:10px; }.card-score { bottom:11px; right:11px; }
.aftercare { display:flex; align-items:center; gap:5px; margin-top:12px; padding:9px; background:#eef8df; border:1px solid #c8dda9; border-radius:20px; }.aftercare img { width:55px; }.aftercare strong { color:#0a5122; font-size:13px; }.aftercare p { margin:2px 0 6px; font-size:9px; }.care-days { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; }.care-days span { display:flex; flex-direction:column; align-items:center; font-size:9px; white-space:nowrap; }.care-days b { color:#0a5122; }
.notice { margin:12px 0; padding:10px; }.result-section > .primary-button { min-height:42px; font-size:12px; }
@media(min-width:720px) { body { padding:20px 0; }.app-shell { border:8px solid #d5d5ca; border-radius:52px; min-height:calc(100dvh - 40px); }.topbar { border-radius:42px 42px 0 0; }.bottom-tabs { border-radius:0 0 42px 42px; } }
@media(max-width:360px) { .mobile-greeting img { width:82px; }.mobile-greeting .bubble { font-size:14px; }.quick-actions button { font-size:9px; }.overview-list p { font-size:9px; } }
.menu-open .service-menu { display:grid !important; position:fixed; z-index:40; top:74px; left:50%; transform:translateX(-50%); width:min(100%,440px); grid-template-columns:repeat(5,1fr); box-shadow:0 12px 30px #113e2a25; }
.directory-open .planner,.directory-open .result-section { display:none !important; }
.directory-open .directory { display:none !important; }
.directory-open[data-screen="medicalInfo"] #medicalInfo,.directory-open[data-screen="travelInfo"] #travelInfo,.directory-open[data-screen="oisoMap"] #oisoMap,.directory-open[data-screen="myPage"] #myPage { display:block !important; min-height:calc(100dvh - 138px); padding:25px 16px; }
.mobile-greeting img,.result-bot img,.aftercare img { mix-blend-mode:multiply; border-radius:16px; }
.hospital-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.hospital-list article { min-width:0; padding:9px 7px; background:#fff; border:1px solid #e3e5d9; border-radius:12px; box-shadow:0 5px 12px #25432d12; }
.hospital-list h4 { margin:5px 0 3px; font-size:11px; line-height:1.3; word-break:keep-all; }
.hospital-list p { margin:3px 0; font-size:9px; color:#68716b; }
.hospital-list strong { display:block; margin-top:4px; color:#125b24; font-size:11px; }
.hospital-list .hospital-symbol { display:grid; place-items:center; height:47px; border-radius:9px; background:linear-gradient(155deg,#c8e0f2,#f2f6f1); color:#0e5d2e; font-size:22px; }

/* Refined presentation screens */
.icon-defs { position:absolute; width:0; height:0; overflow:hidden; }
button, a { -webkit-tap-highlight-color:transparent; }
button:focus-visible, a:focus-visible, textarea:focus-visible { outline:2px solid #267c3a; outline-offset:3px; }
.app-shell { color:#17251a; }
.topbar { height:68px; padding:0 19px; }
.mobile-title { font-size:25px; font-weight:800; white-space:nowrap; }
.header-back,.header-menu { display:grid; place-items:center; width:40px; height:40px; padding:0; border-radius:12px; font-family:inherit; font-size:27px; }
.header-back:hover,.header-menu:hover { background:#eff3e9; }
.planner { min-height:calc(100dvh - 134px); padding:18px 16px 9px; }
.mobile-intro { max-width:100%; font-size:11px; line-height:1.5; padding:8px 14px; }
.mobile-greeting { gap:3px; margin:17px 0 21px; }
.mobile-greeting img { width:120px; height:140px; object-fit:contain; object-position:center; }
.mobile-greeting .bubble { flex:1; max-width:none; padding:15px 15px; font-size:16px; line-height:1.6; border:1px solid #e1e5da; box-shadow:0 4px 13px #173d2510; }
.mobile-greeting img,.result-bot img,.aftercare img { mix-blend-mode:normal; border-radius:0; }
.quick-actions { gap:7px; margin-bottom:16px; }
.quick-actions button { min-width:0; min-height:80px; gap:7px; padding:9px 2px; border:1px solid #d6dfcf; border-radius:16px; background:#fff; box-shadow:0 3px 11px #1b42220a; color:#124d25; font-size:10px; line-height:1.25; font-weight:700; }
.quick-actions button:hover,.quick-actions button:focus-visible { background:#f4faed; border-color:#8ebc80; }
.quick-actions button svg { display:block; width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.quick-actions button span { display:block; font-size:10px; }
.messages .message.bot::before { background-image:url('./oi-mascot-cutout.png'); mix-blend-mode:normal; }
.messages .bubble { border-color:#e1e6da; box-shadow:0 3px 10px #264b2b0a; }
.chat-input { gap:8px; align-items:center; }
.chat-input textarea { min-width:0; font-size:13px; line-height:1.5; border-color:#d8ded2; }
.chat-input button { flex-basis:46px; height:46px; font-size:22px; box-shadow:0 3px 8px #0a5c2224; }
.bottom-tabs { height:66px; border-color:#e4e9e0; box-shadow:0 -3px 14px #2344250c; }
.bottom-tabs a { justify-content:center; gap:3px; font-size:10px; font-weight:600; }
.bottom-tabs a svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.bottom-tabs a:first-child svg { fill:#eaf4e4; }
.bottom-tabs small { font-size:10px; }
.result-section { min-height:calc(100dvh - 134px); padding:13px 13px 23px; }
.result-bot { gap:4px; margin-bottom:11px; }
.result-bot img { width:66px; height:72px; object-fit:contain; }
.result-bot .bubble { flex:1; max-width:none; font-size:15px; line-height:1.5; border-color:#e1e6da; border-radius:18px; }
.plan-overview { grid-template-columns:minmax(0,35%) minmax(0,65%); gap:7px; padding:11px; border-radius:20px; }
.plan-overview::before { content:'✚  OI 맞춤 플랜 제안'; font-size:19px; line-height:1.4; margin-bottom:2px; }
.busan-art { min-height:166px; background:#75b8df url('./busan-scene.svg') center/cover no-repeat; border-radius:13px; }
.busan-art::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg,#15516b60,transparent 65%); }
.busan-art span { left:10px; top:12px; font-size:13px; font-weight:700; line-height:1.5; text-shadow:0 1px 4px #17445e; }
.overview-list { min-width:0; padding:2px 7px; }
.overview-list p { display:grid; grid-template-columns:13px 51px minmax(0,1fr); align-items:center; column-gap:3px; padding:6px 0; font-size:12px; line-height:1.35; }
.overview-list p:last-child { border-bottom:0; }
.overview-list b { white-space:nowrap; }
.overview-list span { text-align:right; overflow-wrap:anywhere; }
.cost-summary { margin-top:9px; padding:9px 14px; border:1px solid #e5e9dd; box-shadow:0 4px 16px #1e4b2910; border-radius:17px; }
.cost-summary span,.cost-summary small { font-size:13px; }
.cost-summary strong { font-size:21px; }
.donut { width:48px; height:48px; }.donut::after { width:32px; height:32px; }
.donut span { font-size:9px; }
.cost-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; margin:5px 0 10px; }
.cost-item { border:1px solid #e5e9dd; border-radius:11px; }
.cost-item span { font-size:11px; }.cost-item strong { font-size:13px; }
.content-title { margin-top:18px; margin-bottom:8px; gap:9px; }
.content-title > span { display:grid; place-items:center; width:25px; height:25px; border-radius:7px; background:#ebf5e4; font-size:12px; }
.content-title small { font-size:11px; }
.content-title h3 { font-size:18px; }
.timeline { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; padding:7px; border-color:#e4eadc; border-radius:17px; }
.timeline-item { min-height:118px; padding:10px 8px; border-radius:11px; background:#f4f8ef; }
.timeline-item .day { width:auto; height:auto; display:block; margin:0 0 8px; background:transparent; font-size:12px; }
.timeline-item strong { font-size:13px; line-height:1.35; }
.timeline-item p { font-size:12px; line-height:1.45; overflow-wrap:anywhere; }
.hospital-list { gap:6px; }
.hospital-list article { padding:7px; border-radius:12px; }
.hospital-list .hospital-symbol { height:58px; background:#d7e9ec url('./hospital-building.svg') center/cover no-repeat; color:transparent; }
.hospital-list article:nth-child(2) .hospital-symbol { filter:hue-rotate(23deg) saturate(.86); }
.hospital-list article:nth-child(3) .hospital-symbol { filter:hue-rotate(-16deg) saturate(.94); }
.hospital-list h4 { min-height:34px; font-size:13px; }
.hospital-list p { font-size:11px; line-height:1.4; }
.hospital-list strong { font-size:14px; }
.recommend-card h4 { font-size:17px; }
.recommend-card p { font-size:12px; }
.recommend-card .tag { font-size:11px; }
.aftercare { padding:10px 7px; border-radius:18px; }
.aftercare img { width:61px; height:70px; object-fit:contain; flex:none; }
.aftercare > div { min-width:0; flex:1; }
.aftercare strong { font-size:15px; }
.aftercare p { font-size:12px; line-height:1.4; }
.care-days { gap:2px; }
.care-days span { font-size:11px; line-height:1.25; text-align:center; white-space:normal; }
.notice strong { font-size:14px; }.notice p { font-size:12px; line-height:1.5; }
.result-section > .primary-button { font-size:14px; }
@media (max-width:360px) {
  .planner { padding-left:11px; padding-right:11px; }
  .mobile-greeting img { width:98px; height:118px; }
  .mobile-greeting .bubble { font-size:14px; padding:12px; }
  .quick-actions { gap:4px; }
  .quick-actions button { min-height:74px; }
  .quick-actions button span { font-size:9px; letter-spacing:-.06em; }
  .plan-overview { grid-template-columns:1fr; padding:8px; gap:7px; }
  .busan-art { min-height:118px; }
  .overview-list p { grid-template-columns:15px 66px minmax(0,1fr); gap:4px; font-size:12px; }
  .cost-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Home: program index */
.home-open .header-back { visibility:hidden; }
.home-open .planner { display:none !important; }
.home-open .hero { display:block !important; min-height:0; padding:18px 16px 4px; background:#faf9f2; }
.home-hero-card { position:relative; min-height:225px; overflow:hidden; border:1px solid #c7dfbc; border-radius:23px; background:radial-gradient(circle at 88% 22%,#f7ffed 0,#edf7e7 37%,#dceecf 100%); }
.home-hero-card::after { content:''; position:absolute; width:170px; height:170px; right:-44px; bottom:-72px; border:1px solid #a9cf99; border-radius:50%; opacity:.65; }
.home-hero-copy { position:relative; z-index:2; width:69%; padding:21px 0 18px 19px; }
.home-kicker { display:block; color:#357f4b; font-size:10px; font-weight:800; letter-spacing:.12em; }
.home-hero-copy h1 { margin:13px 0 9px; color:#173d25; font-size:25px; line-height:1.27; letter-spacing:-.055em; word-break:keep-all; }
.home-hero-copy h1 em { color:#23743d; }
.home-hero-copy p { margin:0; color:#3b5d42; font-size:12px; line-height:1.55; word-break:keep-all; }
.home-mascot { position:absolute; z-index:1; right:4px; bottom:-9px; width:138px; height:178px; object-fit:contain; }
.home-open .hero .primary-button { min-height:52px; margin-top:12px; border-radius:15px; background:#267a39; box-shadow:0 8px 18px #205d2c25; font-size:14px; }
.home-open .hero .primary-button span { margin-left:auto; margin-right:16px; }
.home-open .hero .trust-row { justify-content:flex-start; gap:14px; margin:9px 4px 0; font-size:10px; }
.home-open .service-menu { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; padding:17px 16px 20px; border:0; background:#faf9f2; }
.home-section-heading { grid-column:1/-1; margin:0 0 4px; }
.home-section-heading > span { color:#368051; font-size:10px; font-weight:800; letter-spacing:.13em; }
.home-section-heading h2 { margin:3px 0 2px; color:#173d25; font-size:19px; }
.home-section-heading p { margin:0; color:#708273; font-size:11px; }
.service-menu a { min-width:0; min-height:115px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:8px; padding:13px; border:1px solid #dce8d6; border-radius:17px; background:#fff; box-shadow:0 4px 12px #224a2709; text-align:left; }
.service-menu a:hover,.service-menu a:focus-visible { border-color:#91bc87; background:#f6fbf3; }
.service-menu a span.service-icon { display:grid; place-items:center; flex:0 0 38px; width:38px; height:38px; border:0; border-radius:12px; background:#e9f4e5; color:#246b38; }
.service-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.service-menu a span.service-copy { display:flex; flex-direction:column; align-items:flex-start; gap:1px; width:auto; height:auto; padding:0; border:0; border-radius:0; background:transparent; }
.service-copy strong { color:#1d4828; font-size:13px; line-height:1.3; word-break:keep-all; }
.service-copy small { color:#778477; font-size:10px; line-height:1.35; word-break:keep-all; }
.service-menu a.service-feature { grid-column:1/-1; min-height:76px; flex-direction:row; align-items:center; gap:12px; background:#267a39; border-color:#267a39; }
.service-menu a.service-feature .service-icon { width:43px; height:43px; flex-basis:43px; background:#ffffff2b; color:white; }
.service-menu a.service-feature .service-copy { flex:1; }
.service-feature .service-copy strong { color:white; font-size:15px; }
.service-feature .service-copy small { color:#e3f3e0; font-size:11px; }
.service-feature b { color:white; font-size:21px; font-weight:500; }
.home-open .app-shell { padding-bottom:66px; }
.home-open .bottom-tabs { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:min(100%,440px); }
.bottom-tabs a[aria-current="page"] { color:#176a30; }
.bottom-tabs a[aria-current="page"] svg { fill:#eaf4e4; }
.bottom-tabs a:first-child:not([aria-current="page"]) { color:#303833; }
.bottom-tabs a:first-child:not([aria-current="page"]) svg { fill:none; }
.menu-open .service-menu { display:grid !important; position:fixed; z-index:40; top:68px; left:50%; transform:translateX(-50%); width:min(100%,440px); max-height:calc(100dvh - 135px); overflow:auto; grid-template-columns:repeat(2,minmax(0,1fr)); padding:12px; box-shadow:0 14px 30px #173f2929; }
.menu-open .home-section-heading { display:none; }
@media(max-width:360px) {
  .home-hero-card { min-height:224px; }
  .home-hero-copy { width:72%; padding-left:15px; }
  .home-hero-copy h1 { font-size:22px; }
  .home-hero-copy p { font-size:11px; }
  .home-mascot { right:-8px; width:113px; height:154px; }
  .service-menu a { padding:10px; }
  .service-copy strong { font-size:12px; }
}

/* Readable program details and richer demo choices */
.home-hero-copy p { font-size:14px; }
.home-section-heading p { font-size:13px; }
.service-copy strong { font-size:14px; }
.service-copy small { font-size:12px; }
.service-feature .service-copy small { font-size:12px; }
.home-open .hero .trust-row { font-size:11px; }
.service-menu a:nth-of-type(2) .service-icon { background:#fff0e8; color:#a65c3e; }
.service-menu a:nth-of-type(3) .service-icon { background:#e8f4fa; color:#2b7189; }
.service-menu a:nth-of-type(4) .service-icon { background:#fff4dd; color:#997122; }
.service-menu a:nth-of-type(5) .service-icon { background:#f2edfa; color:#715a97; }
.quick-actions button { min-height:84px; white-space:normal; }
.quick-actions button span { font-size:11px; line-height:1.2; }
.quick-actions button:nth-child(1) svg { color:#308048; }
.quick-actions button:nth-child(2) svg { color:#3b7f9d; }
.quick-actions button:nth-child(3) svg { color:#b2802b; }
.quick-actions button:nth-child(4) svg { color:#8b69a4; }
.bottom-tabs small { font-size:11px; }
.scenario-samples { padding:12px 2px; }
.scenario-heading { display:flex; align-items:baseline; justify-content:space-between; gap:6px; margin-bottom:9px; }
.scenario-heading strong { color:#1c5f32; font-size:13px; }
.scenario-heading small { color:#7c887e; font-size:11px; }
.scenario-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.scenario-grid button { min-width:0; min-height:38px; padding:7px 8px; border:1px solid #d5e4d1; border-radius:11px; background:#f7fbf4; color:#285c36; font-size:12px; font-weight:700; text-align:left; }
.scenario-grid button:nth-child(2n) { border-color:#d5e5e7; background:#f5fafb; color:#356777; }
.scenario-grid button:hover,.scenario-grid button:focus-visible { border-color:#73ad74; background:#eaf6e7; }
.directory { padding-top:30px; }
.directory .eyebrow { font-size:12px; }
.directory > p { font-size:14px; line-height:1.65; }
.directory-card { align-items:center; gap:13px; padding:15px; }
.directory-icon { flex-basis:54px; height:54px; background:#e9f4e8; font-size:25px; }
.directory-card:nth-child(5n+2) .directory-icon { background:#eaf3fb; }
.directory-card:nth-child(5n+3) .directory-icon { background:#fff1e7; }
.directory-card:nth-child(5n+4) .directory-icon { background:#f2edfa; }
.directory-card:nth-child(5n+5) .directory-icon { background:#fff6df; }
.directory-card h3 { font-size:16px; }
.directory-card strong { font-size:13px; }
.directory-card p { font-size:12px; line-height:1.45; }
.directory-card small { font-size:12px; }
.sample-label { font-size:10px; }
.directory-subtitle { display:flex; align-items:baseline; gap:9px; margin:21px 0 9px; }
.directory-subtitle span { color:#3a8a59; font-size:10px; font-weight:800; letter-spacing:.12em; }
.directory-subtitle h3 { margin:0; color:#1d482b; font-size:18px; }
.directory-source { margin-top:18px !important; font-size:11px !important; }
.directory-source a { color:#286f47; font-weight:700; }
.busan-art span { white-space:pre-line; }
.busan-art.other-city { background:linear-gradient(155deg,#87b9c5,#b6d6c3 52%,#5d9f9e); }
.hospital-list.single-hospital { grid-template-columns:1fr; }
.hospital-list.single-hospital article { display:grid; grid-template-columns:105px minmax(0,1fr); grid-template-rows:auto auto auto; align-items:center; column-gap:12px; padding:9px; }
.hospital-list.single-hospital .hospital-symbol { grid-row:1/4; height:100%; min-height:88px; }
.hospital-list.single-hospital h4 { min-height:0; margin:0; }
.hospital-list.single-hospital p { margin:0; }
.hospital-list.single-hospital strong { margin:0; }
.timeline-item:last-child:nth-child(odd) { grid-column:1/-1; }
@media(max-width:360px) {
  .home-hero-copy p { font-size:12px; }
  .service-copy small { font-size:11px; }
  .quick-actions button span { font-size:10px; }
  .scenario-heading { display:block; }
  .scenario-heading small { display:block; }
  .hospital-list.single-hospital article { grid-template-columns:85px minmax(0,1fr); }
}