:root {
  --yellow: #f6c445;
  --green: #1f5e4b;
  --green-dark: #123b2f;
  --ink: #17221e;
  --muted: #66716b;
  --paper: #f8f6ef;
  --cream: #fffdf7;
  --line: #d9d7cd;
  --pink: #e97062;
  --blue: #4d83ba;
  --radius: 22px;
  color: var(--ink);
  font-family: "IBM Plex Sans KR", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 20; background: var(--ink); color: white; padding: 10px 12px; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.page-shell { width: min(100%, 760px); min-height: 100vh; margin: 0 auto; background: var(--cream); overflow: hidden; }
.site-header { height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid rgba(23,34,30,.08); background: rgba(255,253,247,.94); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(12px); }
.wordmark { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; letter-spacing: -.4px; }
.wordmark b { color: var(--green); }
.wordmark-symbol { position: relative; width: 28px; height: 28px; border: 5px solid var(--yellow); border-radius: 50%; display: block; background: var(--green); box-shadow: inset 0 0 0 2px var(--green-dark); }
.wordmark-symbol::before, .wordmark-symbol::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 3px; border-radius: 3px; background: var(--cream); transform: translate(-50%,-50%) rotate(36deg); }
.wordmark-symbol::after { transform: translate(-50%,-50%) rotate(-42deg); }
.wordmark-symbol span span { position:absolute; width:5px; height:5px; left:7px; top:7px; z-index:1; border-radius:50%; background:var(--yellow); }
.icon-button { border: 1px solid var(--line); color: var(--green); width: 38px; height: 38px; display: grid; place-items: center; background: var(--cream); border-radius: 50%; font-size: 22px; line-height: 1; transition: transform .16s ease, background .16s ease; }
.icon-button:hover { transform: translateY(-2px); background: #fff; }
.hero { padding: 42px 24px 31px; background: var(--green); color: white; position: relative; overflow: hidden; }
.hero::before { content: ""; width: 260px; height: 260px; border: 40px solid rgba(246,196,69,.18); border-radius: 50%; position: absolute; right: -135px; top: -125px; }
.hero::after { content: "01"; position: absolute; right: 17px; bottom: -37px; color: rgba(255,255,255,.08); font-size: 156px; font-weight: 700; letter-spacing: -14px; }
.eyebrow { display:flex; align-items:center; gap:7px; margin:0 0 12px; font-size:10px; letter-spacing:1.1px; font-weight:700; }
.station-dot { width:8px; height:8px; border-radius:50%; display:inline-block; background:var(--yellow); box-shadow:0 0 0 3px rgba(246,196,69,.25); }
.station-dot.green { background:var(--green); box-shadow:0 0 0 3px rgba(31,94,75,.14); }
.hero h1 { margin:0; max-width: 540px; color: #fffdf7; font-size: clamp(39px, 11vw, 66px); line-height:1.05; letter-spacing:-2.7px; position:relative; z-index:1; }
.hero h1 em { color: var(--yellow); font-style:normal; }
.hero-copy { margin:20px 0 23px; position:relative; z-index:1; color:rgba(255,255,255,.83); font-size:14px; line-height:1.7; letter-spacing:-.3px; }
.hero-stats { display:flex; position:relative; z-index:1; gap:0; margin-bottom:26px; flex-wrap:wrap; }
.hero-stats span { border-right:1px solid rgba(255,255,255,.25); padding:0 12px; font-size:11px; color:rgba(255,255,255,.82); }
.hero-stats span:first-child { padding-left:0; }
.hero-stats span:last-child { border:0; }
.hero-stats b { color:var(--yellow); font-size:16px; margin-right:3px; }
.primary-cta { min-height:48px; border-radius:14px; display:flex; justify-content:space-between; align-items:center; padding:0 16px; background:var(--yellow); color:var(--ink); position:relative; z-index:1; font-weight:700; font-size:14px; box-shadow:0 7px 0 rgba(0,0,0,.12); }
.primary-cta span { font-size:20px; }
.quick-start, .explore { padding:30px 20px; background:var(--cream); }
.section-heading { display:flex; gap:13px; align-items:flex-start; margin-bottom:18px; }
.section-heading.compact { margin-bottom:15px; }
.route-number { min-width:42px; margin:2px 0 0; color:var(--green); font-size:10px; letter-spacing:.9px; font-weight:700; }
.section-heading h2, .guide-note h2 { margin:0 0 4px; font-size:21px; letter-spacing:-1px; line-height:1.25; }
.section-heading p:not(.route-number), .guide-note p { margin:0; color:var(--muted); font-size:12px; line-height:1.55; }
.intent-pills, .filter-row { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.intent-pills::-webkit-scrollbar, .filter-row::-webkit-scrollbar { display:none; }
.intent-pill, .filter-chip { flex: 0 0 auto; border:1px solid var(--line); background:#fff; color:var(--ink); padding:10px 13px; border-radius:999px; font-size:12px; font-weight:600; transition:background .16s ease, color .16s ease, border .16s ease; }
.intent-pill:hover, .filter-chip:hover, .filter-chip.active { background:var(--green); color:#fff; border-color:var(--green); }
.route-strip { padding:28px 24px 26px; margin:0 20px 0; border:1px solid #e5d597; border-radius:var(--radius); background:linear-gradient(135deg,#fff6c4,#ffeb8e); position:relative; overflow:hidden; }
.route-strip::after { content:"→"; position:absolute; right:17px; top:18px; color:rgba(31,94,75,.17); font-size:100px; font-weight:700; line-height:1; }
.route-strip-top { display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1; }
.route-strip-top .eyebrow { margin:0; color:var(--green); }
.route-strip-top > span { font-size:11px; font-weight:600; color:var(--green); }
.route-strip h2 { position:relative; z-index:1; margin:13px 0 19px; font-size:25px; line-height:1.25; letter-spacing:-1.3px; }
.route-line { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:5px; align-items:center; margin:0 0 14px; font-size:10px; color:var(--green-dark); }
.route-line b { padding:5px 6px; border:1px solid rgba(31,94,75,.28); border-radius:5px; background:rgba(255,255,255,.45); }
.route-line i { width:13px; height:1px; background:var(--green); opacity:.7; }
.text-button { border:0; padding:0; background:transparent; color:var(--green); font-weight:700; font-size:12px; }
.text-button span { margin-left:4px; font-size:16px; }
.explore { padding-top:35px; }
.search-box { height:50px; display:flex; gap:9px; align-items:center; padding:0 15px; margin:0 0 14px; border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--green); }
.search-box span { font-size:23px; transform:rotate(-20deg); display:inline-block; }
.search-box input { border:0; width:100%; background:transparent; outline:0; font-size:13px; color:var(--ink); }
.search-box input::placeholder { color:#98a09a; }
#guide-content { background:var(--paper); }
.seo-fallback { padding:35px 20px; color:var(--ink); }
.seo-fallback h2 { margin:0 0 10px; font-size:25px; }
.seo-fallback p { color:var(--muted); line-height:1.6; font-size:13px; }
.seo-fallback ul { padding-left:18px; line-height:1.8; font-size:13px; }
.results-meta { padding:16px 20px 0; color:var(--muted); font-size:12px; }
.results-meta b { color:var(--green); }
.guide-section { padding:34px 20px 0; position:relative; }
.guide-section::before { content:""; position:absolute; left:40px; top:76px; bottom:-23px; border-left:1px dashed rgba(31,94,75,.34); }
.guide-section:last-child::before { display:none; }
.area-head { display:grid; grid-template-columns:43px 1fr; gap:13px; position:relative; z-index:1; }
.area-number { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:var(--green); color:var(--yellow); border:4px solid var(--paper); box-shadow:0 0 0 1px var(--green); font-size:12px; font-weight:700; }
.area-location { margin:0 0 4px; font-size:23px; line-height:1.18; letter-spacing:-1.1px; }
.area-subtitle { margin:0; color:var(--green); font-size:11px; font-weight:700; }
.area-card { margin:16px 0 0 56px; border:1px solid var(--line); border-radius:17px; overflow:hidden; background:var(--cream); }
.area-card-top { padding:15px 15px 12px; background:#fffdf7; }
.area-vibe { margin:0 0 8px; font-weight:700; font-size:13px; line-height:1.45; }
.area-summary { margin:0; color:var(--muted); font-size:12px; line-height:1.58; }
.tag-list { display:flex; gap:5px; flex-wrap:wrap; margin-top:11px; }
.tag { display:inline-flex; padding:4px 7px; border-radius:999px; color:var(--green-dark); background:#e4eee9; font-size:10px; font-weight:600; }
.route-note { padding:11px 15px; border-top:1px dashed var(--line); background:#fbfaf4; color:var(--green); font-size:11px; line-height:1.55; }
.route-note b { color:var(--ink); }
.place-block { margin:0 0 0 56px; }
.block-label { display:flex; align-items:center; gap:7px; margin:20px 0 9px; color:var(--green); font-size:11px; letter-spacing:.7px; font-weight:700; }
.block-label::after { content:""; flex:1; border-top:1px solid rgba(31,94,75,.18); }
.place-list { display:grid; gap:9px; }
.place-card { border:1px solid var(--line); border-radius:15px; background:#fff; padding:13px; box-shadow:0 2px 0 rgba(23,34,30,.02); }
.place-card-top { display:flex; gap:8px; align-items:flex-start; justify-content:space-between; }
.place-name { margin:0; font-size:14px; letter-spacing:-.4px; line-height:1.35; }
.map-link { flex:0 0 auto; display:inline-flex; align-items:center; gap:4px; padding:6px 8px; border:1px solid rgba(31,94,75,.22); color:var(--green); background:#f6faf7; border-radius:7px; font-size:10px; font-weight:700; }
.map-link:hover { background:var(--green); color:white; }
.place-note { margin:8px 0 0; color:#59645e; font-size:12px; line-height:1.58; }
.place-card .tag-list { margin-top:9px; }
.no-results { margin:0 20px; padding:35px 20px; text-align:center; border:1px dashed var(--line); border-radius:17px; background:var(--cream); }
.no-results b { display:block; margin-bottom:6px; font-size:15px; }
.no-results p { margin:0; color:var(--muted); font-size:12px; }
.bagel-section { margin:34px 20px 0; padding:24px 18px; border-radius:var(--radius); background:var(--green-dark); color:#fffdf7; }
.bagel-section .section-heading h2 { color:#fffdf7; }
.bagel-section .section-heading p:not(.route-number) { color:rgba(255,255,255,.68); }
.bagel-section .route-number { color:var(--yellow); }
.bagel-section .station-dot { background:var(--yellow); }
.bagel-list { display:grid; gap:8px; }
.bagel-card { padding:12px; border:1px solid rgba(255,255,255,.18); border-radius:13px; background:rgba(255,255,255,.06); }
.bagel-card h3 { margin:0; font-size:14px; }
.bagel-card p { margin:5px 0 0; color:rgba(255,255,255,.7); font-size:11px; line-height:1.55; }
.bagel-card .map-link { margin-top:9px; background:rgba(246,196,69,.13); border-color:rgba(246,196,69,.55); color:var(--yellow); }
.guide-note { display:flex; gap:12px; margin:36px 20px; padding:16px; border-top:2px solid var(--green); background:#e7f0eb; }
.note-mark { flex:0 0 auto; width:22px; height:22px; display:grid; place-items:center; margin:0 !important; border-radius:50%; background:var(--green); color:#fff; font-weight:700; }
.site-footer { padding:31px 20px calc(31px + env(safe-area-inset-bottom)); display:flex; align-items:center; gap:11px; border-top:1px solid var(--line); background:#f0ede2; }
.footer-mark { width:37px; height:37px; border-radius:50%; object-fit:cover; background:var(--yellow); }
.site-footer p { margin:0; flex:1; color:var(--muted); font-size:11px; line-height:1.55; }
.site-footer p b { color:var(--ink); font-size:13px; }
.toast { position:fixed; z-index:30; left:50%; bottom:calc(22px + env(safe-area-inset-bottom)); transform:translate(-50%, 80px); max-width:calc(100vw - 32px); padding:10px 14px; border-radius:999px; background:var(--ink); color:#fff; font-size:12px; opacity:0; transition:opacity .2s ease, transform .2s ease; box-shadow:0 8px 26px rgba(0,0,0,.2); }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media (min-width: 680px) {
  .hero { padding:56px 44px 40px; }
  .quick-start, .explore { padding-left:44px; padding-right:44px; }
  .route-strip { margin-left:44px; margin-right:44px; }
  .guide-section { padding-left:44px; padding-right:44px; }
  .guide-section::before { left:64px; }
  .results-meta { padding-left:44px; }
  .bagel-section, .guide-note { margin-left:44px; margin-right:44px; }
  .site-header, .site-footer { padding-left:44px; padding-right:44px; }
}
@media (prefers-reduced-motion: no-preference) { .hero > *, .route-strip { animation:rise .48s ease both; } .route-strip { animation-delay:.08s; } @keyframes rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } } }