:root{
 --ink:#17283a;--muted:#667684;--line:#dee5e8;--paper:#fffdf8;--bg:#f4f1ea;
 --navy:#12354b;--blue:#246eb7;--sea:#087f8c;--teal:#17716c;--coral:#c94e3e;
 --gold:#b98a2d;--silver:#7c8790;--bronze:#a6613a;--cream:#f7efe1;
 --food:#b6523d;--cafe:#8a6248;--stay:#4f708a;--transit:#246eb7;
 --city-primary:#12354b;--city-accent:#087f8c;--city-soft:#eaf6f5;--city-warm:#e8d7b7;
 --section:#087f8c;--section-soft:#edf7f5;
 --shadow:0 14px 38px rgba(23,40,58,.10);--soft:0 7px 20px rgba(23,40,58,.07);
 --radius:22px;
}
body.city-busan{--city-primary:#12354b;--city-accent:#087f8c;--city-soft:#eaf6f5;--city-warm:#e8d7b7}
body.city-seoul{--city-primary:#273b59;--city-accent:#526d9b;--city-soft:#edf1f7;--city-warm:#e7dbc8}
body.city-gyeongju{--city-primary:#315645;--city-accent:#9a7040;--city-soft:#f4ebdb;--city-warm:#e7d7b7}
body.city-chuncheon{--city-primary:#315c50;--city-accent:#638f78;--city-soft:#eef5ec;--city-warm:#e6d6b7}
body.cat-food{--section:#b6523d;--section-soft:#fff1eb}
body.cat-attraction{--section:#17716c;--section-soft:#eaf5f2}
body.cat-cafe{--section:#8a6248;--section-soft:#f7f0e9}
body.cat-hotel{--section:#4f708a;--section-soft:#edf2f6}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;color:var(--ink);background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;line-height:1.5;padding-bottom:18px}
button,input{font:inherit}
button{cursor:pointer}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
h1,h2,h3,p{margin-top:0}
h1,h2,h3,b,strong,.nowrap{word-break:keep-all;overflow-wrap:normal;line-break:strict}
.topbar{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);backdrop-filter:blur(16px);border-bottom:1px solid rgba(14,42,65,.10);padding:7px 10px 6px}
.masthead{border:0;background:transparent;padding:0;display:inline-flex;flex-direction:column;align-items:flex-start;max-width:56%;vertical-align:middle}
.mast-kicker{display:none;font-size:9px;letter-spacing:.13em;font-weight:900;color:var(--sea);white-space:nowrap}
.masthead strong{font-size:19px;line-height:1.05;letter-spacing:-.5px;white-space:nowrap;margin-top:1px}
.top-actions{float:right;display:flex;gap:7px;align-items:center}
.lang-control{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.lang-control button{border:0;background:#fff;color:#6d7884;font-size:11px;font-weight:900;height:31px;min-width:35px;padding:0 7px;white-space:nowrap}
.lang-control button.on{background:var(--city-primary);color:#fff}
.today-top{height:31px;border:0;border-radius:9px;background:#e8f3ff;color:#075cae;font-weight:900;font-size:11px;padding:0 9px;white-space:nowrap}
.city-tabs{clear:both;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:6px}
.city-tabs button{height:35px;border:1px solid var(--line);background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#66727f;min-width:0;padding:0 4px}
.city-tabs span{display:none}
.city-tabs b{font-size:13px;white-space:nowrap;line-height:1}
.city-tabs button.on{background:var(--city-primary);border-color:var(--city-primary);color:#fff}
.city-tabs button.on span{color:#d8eef1}
.primary-nav{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin-top:4px}
.primary-nav button{height:38px;border:0;border-radius:10px;background:transparent;color:#6d7983;min-width:0;padding:3px 2px;position:relative}
.primary-nav button.on{background:var(--city-soft);color:var(--city-primary)}
.primary-nav button.on::after{content:"";position:absolute;left:28%;right:28%;bottom:0;height:3px;background:var(--city-accent);border-radius:3px 3px 0 0}
.primary-nav .nav-mark{display:block;font-size:13px;font-weight:950;line-height:1;margin-bottom:4px}
.primary-nav b{display:block;font-size:10px;white-space:nowrap}
.live-dock{display:flex;gap:4px;overflow-x:auto;margin-top:3px;padding-bottom:0;scrollbar-width:none}
.live-dock::-webkit-scrollbar{display:none}
.live-shortcut{flex:0 0 auto;height:32px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:9px;background:#fff;color:#405365;padding:0 8px;font-size:9.5px;font-weight:900;white-space:nowrap}
.live-shortcut .ico{font-size:14px;line-height:1}
.live-shortcut.primary{background:var(--city-primary);border-color:var(--city-primary);color:#fff}
#app{max-width:1120px;margin:0 auto}
.view{display:none}
.view.active{display:block}
.hero{position:relative;min-height:360px;margin:11px 11px 0;border-radius:25px;overflow:hidden;box-shadow:var(--shadow);background:var(--city-primary);color:#fff}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,16,28,.04) 5%,rgba(3,16,28,.2) 40%,rgba(3,16,28,.86) 100%)}
.hero-copy{position:relative;z-index:2;min-height:360px;padding:25px 20px 21px;display:flex;flex-direction:column;justify-content:flex-end}
.hero-eyebrow{font-size:11px;font-weight:900;letter-spacing:.12em;color:#bfe6f6;margin-bottom:5px}
.hero h1{font-size:34px;line-height:1.12;letter-spacing:-1.2px;margin:0 0 10px;max-width:520px}
.hero p{font-size:15px;line-height:1.55;color:#edf6fa;margin:0;max-width:560px;word-break:keep-all}
.hero-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.hero-actions button{min-height:44px;border-radius:12px;padding:0 14px;font-weight:900;border:1px solid rgba(255,255,255,.45);white-space:nowrap}
.hero-actions .primary{background:#fff;color:var(--navy)}
.hero-actions .glass{background:rgba(7,27,45,.28);color:#fff}
.photo-credit{position:absolute;z-index:3;right:9px;top:9px;background:rgba(0,0,0,.34);color:#fff;border-radius:8px;padding:4px 7px;font-size:9px}
.quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:11px}
.quick-card{border:0;background:#fff;border-radius:18px;min-height:112px;text-align:left;padding:16px;box-shadow:var(--soft);position:relative;overflow:hidden}
.quick-card::after{content:"";position:absolute;width:54px;height:54px;border-radius:50%;right:-12px;bottom:-12px;background:var(--city-soft)}
.quick-card .n{display:block;color:var(--city-accent);font-size:10px;font-weight:900;letter-spacing:.12em;margin-bottom:11px}
.quick-card strong{display:block;font-size:19px;line-height:1.22;letter-spacing:-.45px}
.quick-card small{display:block;color:var(--muted);font-size:11px;margin-top:6px;word-break:keep-all}
.section{margin:4px 11px 14px;background:#fff;border-radius:var(--radius);padding:17px;box-shadow:var(--soft)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}
.section-kicker{display:block;font-size:10px;color:var(--section);font-weight:900;letter-spacing:.13em;margin-bottom:4px}
.section h2,.page-title h1{font-size:25px;line-height:1.18;letter-spacing:-.75px;margin:0}
.link-btn{border:0;background:transparent;color:var(--blue);font-size:12px;font-weight:900;padding:4px 0;white-space:nowrap}
.top3{display:grid;gap:11px}
.podium-card{display:grid;grid-template-columns:128px minmax(0,1fr);min-height:146px;border:1px solid #e7e2d5;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#fffdf7,#fff);text-align:left}
.top3 .podium-card:first-child{grid-template-columns:1fr;grid-template-rows:190px auto}
.top3 .podium-card:first-child .podium-photo{min-height:190px}
.podium-photo{position:relative;min-height:142px;background:#d8e0e6}
.podium-photo img{width:100%;height:100%;object-fit:cover}
.rank-shield{position:absolute;left:8px;top:8px;width:48px;height:55px;clip-path:polygon(50% 0,96% 15%,88% 76%,50% 100%,12% 76%,4% 15%);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-weight:950;text-shadow:0 1px 1px rgba(0,0,0,.22);box-shadow:0 4px 10px rgba(0,0,0,.15)}
.rank-shield.gold{background:linear-gradient(145deg,#f0c64c,#9f6810)}
.rank-shield.silver{background:linear-gradient(145deg,#d4d9dd,#6a737c)}
.rank-shield.bronze{background:linear-gradient(145deg,#d98a55,#8e4729)}
.rank-shield.regular{background:linear-gradient(145deg,#2d6687,#12354b)}
.rank-shield .crown{font-size:15px;line-height:1}
.rank-shield .num{font-size:18px;line-height:1}
.podium-body{padding:13px 13px 11px;min-width:0}
.podium-body h3{font-size:21px;line-height:1.2;margin:0 0 4px;letter-spacing:-.55px}
.podium-body .zone{font-size:10px;color:var(--muted);font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rating-row{display:flex;gap:6px;flex-wrap:wrap;margin:9px 0 7px}
.rate{display:inline-flex;align-items:center;gap:5px;border-radius:8px;background:#f4f7f9;padding:5px 7px;font-size:11px;font-weight:900;white-space:nowrap}
.rate .naver-mark{display:grid;place-items:center;width:18px;height:18px;background:#03c75a;color:#fff;border-radius:4px;font-size:11px}
.rate .google-mark{font-size:16px;font-weight:1000;background:linear-gradient(90deg,#4285f4 0 25%,#ea4335 25% 50%,#fbbc05 50% 75%,#34a853 75%);-webkit-background-clip:text;color:transparent}
.podium-body p{font-size:12px;color:#445260;line-height:1.45;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all}
.badge-row{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}
.mini-badge{font-size:9px;font-weight:900;border-radius:999px;padding:4px 7px;background:var(--section-soft);color:var(--section);white-space:nowrap}
.mini-badge.warn{background:#fff0ea;color:#a94530}
.rank-list{display:grid;gap:8px}
.rank-row{display:grid;grid-template-columns:34px 74px minmax(0,1fr) 18px;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:16px;padding:8px 8px 8px 7px;text-align:left;min-height:92px}
.rank-no{width:32px;height:32px;border-radius:10px;background:var(--section-soft);color:var(--section);display:grid;place-items:center;font-weight:950;font-size:13px}
.rank-thumb{display:block;width:74px;height:74px;border-radius:12px;overflow:hidden;background:#edf1f3}
.rank-thumb img{width:100%;height:100%;object-fit:cover}
.rank-main{min-width:0}
.rank-main strong{display:block;font-size:15px;line-height:1.18;letter-spacing:-.25px}
.rank-main .scoreline{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.rank-main .tiny-rate{font-style:normal;font-size:8.5px;font-weight:900;color:#526171;background:#f2f5f7;border-radius:6px;padding:2px 5px;white-space:nowrap}
.rank-main .tiny-rate.n{background:#e9f7ed;color:#168548}
.rank-main .tiny-rate.g{background:#eef3ff;color:#3566b8}
.rank-main small{display:block;color:var(--muted);font-size:9px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-main p{font-size:9.5px;color:#566674;line-height:1.35;margin:3px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all}
.rank-arrow{font-size:21px;color:#96a1aa}
.area-strip{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:10px;overflow-x:auto;padding-bottom:3px;scrollbar-width:none}
.area-strip::-webkit-scrollbar{display:none}
.area-tile{position:relative;min-height:178px;border-radius:18px;overflow:hidden;border:0;background:#173e58;color:#fff;text-align:left;padding:0;box-shadow:var(--soft)}
.area-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.area-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,15,26,.08),rgba(2,15,26,.76))}
.area-tile .copy{position:absolute;z-index:2;left:14px;right:14px;bottom:12px}
.area-tile em{font-style:normal;font-size:9px;font-weight:900;letter-spacing:.12em;color:#cceaf4}
.area-tile strong{display:block;font-size:21px;line-height:1.18;margin-top:3px}
.area-tile small{display:block;font-size:11px;margin-top:4px;color:#e5eef2;word-break:keep-all}
.page-title{padding:22px 14px 11px}
.page-title .eyebrow{font-size:10px;letter-spacing:.14em;font-weight:900;color:var(--sea);margin-bottom:4px}
.page-title p{font-size:13px;color:var(--muted);margin:7px 0 0;word-break:keep-all}
.segmented{display:flex;gap:6px;overflow-x:auto;padding:0 12px 10px;scrollbar-width:none}
.segmented::-webkit-scrollbar{display:none}
.segmented button{flex:0 0 auto;min-height:40px;border:1px solid var(--line);background:#fff;color:#61707d;border-radius:999px;padding:0 14px;font-size:12px;font-weight:900;white-space:nowrap}
.segmented button.on{background:var(--section);border-color:var(--section);color:#fff}
.rank-hero{margin:0 11px 12px;padding:17px;border-radius:19px;color:#fff;background:linear-gradient(135deg,var(--city-primary),var(--section));box-shadow:var(--soft)}
.rank-hero strong{font-size:24px;line-height:1.2;display:block}
.rank-hero p{font-size:12px;color:#dceaf0;margin:7px 0 0;word-break:keep-all}
.track-block{margin:12px 11px;background:#fff;border-radius:19px;padding:14px;box-shadow:var(--soft)}
.track-block h3{font-size:18px;margin:0 0 5px}
.track-block>p{font-size:11px;color:var(--muted);margin:0 0 11px}
.track-grid{display:grid;gap:8px}
.track-card{border:1px solid #f0d9d0;background:#fffaf8;border-radius:13px;padding:11px;text-align:left}
.track-card strong{display:block;font-size:14px}
.track-card small{display:block;font-size:11px;color:#6a5960;margin-top:4px;word-break:keep-all}
.area-grid{display:grid;grid-template-columns:1fr;gap:10px;padding:0 11px 15px}
.area-grid .area-tile{min-height:210px}
.area-dashboard{padding-bottom:15px}
.area-hero{position:relative;margin:0 11px 12px;border-radius:22px;overflow:hidden;height:255px;color:#fff;box-shadow:var(--shadow)}
.area-hero img{width:100%;height:100%;object-fit:cover}
.area-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,18,29,.06),rgba(3,18,29,.78))}
.area-hero .copy{position:absolute;z-index:2;left:18px;right:18px;bottom:17px}
.area-hero .copy h2{font-size:28px;line-height:1.15;margin:0 0 5px}
.area-hero .copy p{margin:0;font-size:13px;color:#e9f2f5;word-break:keep-all}
.area-cats{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:0 11px}
.area-cat{border:0;border-radius:17px;background:#fff;box-shadow:var(--soft);padding:14px;text-align:left;min-height:116px}
.area-cat span{display:block;font-size:9px;letter-spacing:.12em;color:var(--sea);font-weight:900}
.area-cat strong{display:block;font-size:18px;margin-top:7px;line-height:1.22}
.area-cat small{display:block;color:var(--muted);font-size:10px;margin-top:4px;word-break:keep-all}
.area-back{display:inline-flex;margin:2px 11px 10px;border:0;background:#e7eef4;color:#385067;border-radius:10px;padding:8px 11px;font-size:11px;font-weight:900}
.plan-switch{display:flex;gap:7px;padding:0 11px 10px}
.plan-switch button{flex:1;height:42px;border:1px solid var(--line);background:#fff;border-radius:12px;font-weight:900;color:#62717d}
.plan-switch button.on{background:var(--city-primary);color:#fff;border-color:var(--city-primary)}
.plan-card{margin:0 11px 12px;background:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--soft)}
.plan-card .plan-band{padding:13px 15px;color:#fff;background:linear-gradient(90deg,#0b7165,#0a87a2)}
.plan-card .plan-band strong{font-size:19px}
.plan-card .plan-band small{display:block;margin-top:3px;color:#d9f0ef;font-size:11px}
.timeline{padding:13px}
.stop{display:grid;grid-template-columns:34px minmax(0,1fr);gap:9px;padding:10px 0;border:0;border-bottom:1px solid #edf1f3;background:transparent;text-align:left;width:100%}
.stop:last-child{border-bottom:0}
.stop-no{width:31px;height:31px;border-radius:50%;background:#eaf3f8;color:#075e9a;display:grid;place-items:center;font-weight:950;font-size:12px}
.stop strong{font-size:15px;line-height:1.3}
.stop small{display:block;color:var(--muted);font-size:10px;margin-top:3px}
.route-banner{margin:2px 11px 10px;border-radius:16px;padding:12px 14px;background:linear-gradient(115deg,var(--city-primary),var(--city-accent));color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:var(--soft)}
.route-banner span{font-size:9px;letter-spacing:.13em;font-weight:900;opacity:.8;white-space:nowrap}
.route-banner strong{font-size:19px;line-height:1.1;white-space:nowrap}
.route-card{margin:0 11px 10px;background:#fff;border-radius:18px;padding:13px 14px;box-shadow:var(--soft);border:1px solid var(--line)}
.route-card.primary{border:2px solid var(--city-accent)}
.route-card .tag{display:inline-flex;font-size:9px;font-weight:900;letter-spacing:.06em;color:var(--section);background:var(--section-soft);border-radius:999px;padding:4px 8px;margin-bottom:7px}
.route-card h3{font-size:16px;line-height:1.3;margin:0 0 6px;word-break:keep-all}
.route-card p{font-size:11px;color:var(--muted);margin:0;word-break:keep-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.compact-route .actions{margin-top:9px}
.route-card .actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:#fff;font-size:11px;font-weight:900;white-space:nowrap}
.btn.primary{background:var(--city-primary);border-color:var(--city-primary);color:#fff}
.live-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.live-card{border:1px solid var(--line);border-radius:14px;min-height:85px;padding:12px;background:#fff}
.live-card em{font-style:normal;font-size:9px;font-weight:900;color:var(--sea);letter-spacing:.09em}
.live-card strong{display:block;margin-top:5px;font-size:14px;line-height:1.25}
.live-card small{display:block;color:var(--muted);font-size:10px;margin-top:4px}
.stay-card{border:1px solid var(--line);border-radius:17px;background:#fff;padding:14px;margin-bottom:9px;text-align:left;width:100%}
.stay-card h3{font-size:18px;margin:0 0 7px}
.stay-card p{font-size:11px;color:var(--muted);margin:5px 0}
.stay-note{margin:0 11px 11px;background:#eaf4f7;border-radius:16px;padding:13px;color:#31566a;font-size:11px;font-weight:800;word-break:keep-all}
.sheet-backdrop{position:fixed;inset:0;z-index:90;background:rgba(5,18,29,.54);backdrop-filter:blur(2px)}
.detail-sheet{position:fixed;z-index:100;left:0;right:0;bottom:0;height:min(92vh,880px);background:#f5f7f8;border-radius:26px 26px 0 0;transform:translateY(105%);transition:transform .28s ease;overflow:auto;overscroll-behavior:contain;box-shadow:0 -20px 60px rgba(0,0,0,.24)}
.detail-sheet.open{transform:translateY(0)}
.sheet-grab{position:sticky;top:0;z-index:3;width:42px;height:5px;border-radius:99px;background:#b7c0c8;margin:8px auto -2px}
.sheet-close{position:sticky;float:right;top:8px;right:10px;z-index:5;width:39px;height:39px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(7,27,45,.78);color:#fff;font-size:26px;line-height:1}
.detail-hero{position:relative;height:235px;background:#17374d;overflow:hidden}
.detail-hero img{width:100%;height:100%;object-fit:cover}
.detail-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(5,18,29,.76))}
.detail-hero .info{position:absolute;z-index:2;left:17px;right:56px;bottom:15px;color:#fff}
.detail-hero .rank-label{display:inline-block;background:#fff;color:#0b4f75;border-radius:999px;padding:4px 8px;font-size:9px;font-weight:950;margin-bottom:6px}
.detail-hero h2{font-size:27px;line-height:1.15;margin:0 0 3px}
.detail-hero p{font-size:11px;color:#e0ecf0;margin:0}
.detail-content{padding:14px 13px 32px}
.detail-rating{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:11px}
.detail-card{background:#fff;border-radius:16px;padding:14px;margin-bottom:9px;box-shadow:0 4px 16px rgba(7,27,45,.05)}
.detail-card h3{font-size:14px;margin:0 0 8px}
.detail-card p,.detail-card li{font-size:12px;line-height:1.55;color:#465665;word-break:keep-all}
.detail-card ul{padding-left:18px;margin:0}
.procon{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.detail-card.good{border-top:4px solid #17815f}
.detail-card.bad{border-top:4px solid #d8573f}
.detail-meta{display:grid;gap:7px}
.meta-line{display:grid;grid-template-columns:68px minmax(0,1fr);gap:8px;font-size:12px}
.meta-line b{color:#667482}
.meta-line span{word-break:keep-all}
.sheet-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.sheet-actions a{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:11px;border:1px solid var(--line);background:#fff;font-size:11px;font-weight:900}
.sheet-actions a.primary{background:var(--city-primary);color:#fff;border-color:var(--city-primary)}
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:70;height:67px;background:rgba(255,255,255,.98);backdrop-filter:blur(16px);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);padding-bottom:env(safe-area-inset-bottom)}
.bottom-nav button{border:0;background:transparent;color:#74818d;min-width:0;position:relative;padding:5px 2px 2px}
.bottom-nav button.on{color:#075fa4;background:#edf6fd}
.bottom-nav button.on::before{content:"";position:absolute;left:29%;right:29%;top:0;height:3px;background:#0870c9;border-radius:0 0 3px 3px}
.nav-mark{display:block;font-size:16px;font-weight:950;line-height:1;margin-bottom:5px}
.bottom-nav b{display:block;font-size:11px;white-space:nowrap}
.to-top{position:fixed;right:13px;bottom:18px;z-index:75;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--city-primary);box-shadow:var(--soft);font-weight:950;font-size:17px;opacity:0;pointer-events:none}
.to-top.show{opacity:1;pointer-events:auto}
.empty{padding:32px 10px;color:var(--muted);font-size:13px;text-align:center}
.coming-wrap{padding:22px 11px 40px}
.coming-card{min-height:320px;border-radius:24px;background:linear-gradient(145deg,#fffdf8,var(--city-soft));box-shadow:var(--shadow);padding:28px 22px;display:flex;flex-direction:column;justify-content:center}
.coming-kicker{display:inline-flex;align-self:flex-start;border-radius:999px;background:var(--city-primary);color:#fff;padding:6px 10px;font-size:10px;font-weight:950;letter-spacing:.08em}
.coming-card h1{font-size:30px;line-height:1.14;letter-spacing:-.8px;margin:13px 0 10px;word-break:keep-all}
.coming-card p{font-size:14px;color:var(--muted);line-height:1.6;word-break:keep-all}
.coming-live-note{margin-top:18px;border-top:1px solid var(--line);padding-top:15px;color:var(--city-primary);font-size:12px;font-weight:900;word-break:keep-all}
.live-inline-note{margin:8px 11px 12px;border:1px solid var(--line);background:#fff;border-radius:14px;padding:10px 12px;font-size:11px;font-weight:850;color:#4f6170}
@media(max-width:360px){
 .masthead strong{font-size:18px}
 .mast-kicker{font-size:8px}
 .today-top{padding:0 7px}
 .hero h1{font-size:30px}
 .quick-card strong{font-size:17px}
 .podium-card{grid-template-columns:100px minmax(0,1fr)}
 .city-tabs b{font-size:12px}
 .primary-nav b{font-size:9px}
 .live-shortcut{font-size:9px;padding:0 8px}
}
@media(min-width:700px){
 body{padding-bottom:20px}
 .topbar{padding-left:max(16px,calc((100vw - 1080px)/2));padding-right:max(16px,calc((100vw - 1080px)/2))}
 .bottom-nav{position:sticky;top:116px;bottom:auto;max-width:680px;margin:10px auto;border:1px solid var(--line);border-radius:14px;height:56px;padding:0}
 .hero{min-height:450px}
 .hero-copy{min-height:450px;padding:34px}
 .hero h1{font-size:45px}
 .quick-grid{grid-template-columns:repeat(4,1fr)}
 .top3{grid-template-columns:repeat(3,1fr)}
 .podium-card{grid-template-columns:1fr;grid-template-rows:190px auto}
 .area-strip{grid-auto-columns:31%}
 .area-grid{grid-template-columns:repeat(2,1fr)}
 .area-cats{grid-template-columns:repeat(5,1fr)}
 .rank-list{grid-template-columns:repeat(2,1fr)}
 .live-grid{grid-template-columns:repeat(4,1fr)}
 .detail-sheet{left:50%;right:auto;width:min(720px,100%);transform:translate(-50%,105%)}
 .detail-sheet.open{transform:translate(-50%,0)}
 .detail-hero{height:310px}
}


/* 2026-09-30 · area-map / hotel search / navigation */
.zone-map-block{margin:0 11px 14px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:var(--soft)}
.zone-map-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:9px}
.zone-map-head span{display:block;font-size:8px;letter-spacing:.13em;font-weight:950;color:var(--city-accent)}
.zone-map-head strong{display:block;font-size:16px;letter-spacing:-.35px;margin-top:2px}
.zone-all{border:1px solid var(--line);background:#fff;border-radius:999px;min-height:34px;padding:0 11px;font-size:10px;font-weight:900;color:#60707d}
.zone-all.on{background:var(--city-primary);border-color:var(--city-primary);color:#fff}
.zone-map-stage{height:275px;position:relative;overflow:hidden;border-radius:17px;background:linear-gradient(150deg,#eef5ee 0 57%,#dceff5 57% 100%)}
.busan-silhouette{position:absolute;left:7%;right:6%;top:8%;bottom:7%;background:linear-gradient(145deg,#dfe9d7,#c9dfc2);clip-path:polygon(5% 58%,15% 45%,20% 31%,34% 36%,41% 22%,52% 26%,63% 12%,76% 19%,94% 8%,89% 32%,78% 43%,88% 52%,76% 61%,67% 77%,54% 70%,43% 89%,31% 79%,16% 91%,9% 76%);box-shadow:inset 0 0 0 1px rgba(49,86,69,.08)}
.zone-map-stage::after{content:"";position:absolute;right:-10%;bottom:-15%;width:55%;height:55%;border:1px solid rgba(255,255,255,.55);border-radius:50%;box-shadow:0 0 0 22px rgba(255,255,255,.11),0 0 0 46px rgba(255,255,255,.09)}
.zone-pin{position:absolute;z-index:2;transform:translate(-50%,-50%);border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:2px;max-width:92px;padding:0;color:#243746}
.zone-pin .pin-dot{width:19px;height:19px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--city-primary);border:3px solid #fff;box-shadow:0 3px 9px rgba(17,45,62,.22)}
.zone-pin b{background:rgba(255,255,255,.94);border:1px solid rgba(18,53,75,.10);box-shadow:0 2px 7px rgba(0,0,0,.08);border-radius:7px;padding:3px 5px;font-size:8.5px;line-height:1.15;word-break:keep-all}
.zone-pin.on .pin-dot{background:var(--city-accent);transform:rotate(-45deg) scale(1.18)}
.zone-pin.on b{background:var(--city-primary);color:#fff}
.zone-sea{position:absolute;right:7%;bottom:5%;font-size:8px;letter-spacing:.16em;color:#6f9aaa;font-weight:900}
.zone-map-note{font-size:9px;color:#7b8791;margin:8px 3px 0;word-break:keep-all}
.hotel-compare-hero{margin:0 11px 12px;border-radius:22px;padding:18px;background:linear-gradient(135deg,#102f45,var(--city-primary) 58%,var(--city-accent));color:#fff;box-shadow:var(--shadow)}
.hotel-kicker{display:inline-flex;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:4px 8px;font-size:8px;letter-spacing:.12em;font-weight:950}
.hotel-compare-hero h2{font-size:27px;letter-spacing:-.8px;margin:10px 0 5px}
.hotel-compare-hero p{font-size:12px;line-height:1.5;margin:0 0 13px;color:#e9f1f3;word-break:keep-all}
.hotel-main-search{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:13px;background:#fff;color:var(--city-primary);font-size:14px;font-weight:950;box-shadow:0 7px 20px rgba(0,0,0,.14)}
.hotel-compare-hero small{display:block;font-size:9.5px;line-height:1.45;color:#d9e5e8;margin-top:9px;word-break:keep-all}
.hotel-filters{margin:0 11px 8px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:11px 12px;display:grid;gap:10px}
.filter-group{display:grid;gap:6px}
.filter-group>b{font-size:10px;color:#536474}
.filter-pills{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none}
.filter-pills::-webkit-scrollbar{display:none}
.filter-pills button{flex:0 0 auto;border:1px solid var(--line);background:#fff;border-radius:999px;min-height:34px;padding:0 10px;font-size:10px;font-weight:900;color:#5f6d79}
.filter-pills button.on{background:var(--city-primary);border-color:var(--city-primary);color:#fff}
.hotel-platforms{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.hotel-platform{min-height:58px;border:1px solid var(--line);border-radius:14px;background:#fff;display:flex;align-items:center;gap:9px;padding:9px}
.hotel-platform.featured{grid-column:1/-1;background:var(--city-soft);border-color:rgba(18,53,75,.16)}
.hotel-platform .brand-mark{width:31px;height:31px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--city-primary);color:#fff;font-size:10px;font-weight:950;flex:0 0 auto}
.hotel-platform strong{display:block;font-size:12px;color:#263b4d}
.hotel-platform small{display:block;font-size:9px;color:#7a8792;margin-top:1px}
.provider-note{font-size:9.5px;color:#74818b;line-height:1.5;margin:9px 1px 0;word-break:keep-all}
.count-badge{min-width:29px;height:29px;border-radius:999px;background:var(--city-soft);display:inline-flex;align-items:center;justify-content:center;color:var(--city-primary);font-size:11px;font-weight:950}
.hotel-results{display:grid;gap:8px}
.hotel-result-card{width:100%;border:1px solid var(--line);background:#fff;border-radius:18px;padding:13px 14px;text-align:left;box-shadow:0 4px 16px rgba(7,27,45,.045)}
.hotel-card-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.hotel-fit{display:inline-flex;border-radius:999px;background:var(--city-soft);color:var(--city-primary);padding:4px 8px;font-size:9px;font-weight:950}
.hotel-arrow{font-size:25px;color:#8c99a3;line-height:1}
.hotel-result-card h3{font-size:18px;line-height:1.22;letter-spacing:-.35px;margin:7px 0 8px}
.hotel-result-card p{font-size:10.5px;line-height:1.5;color:#63727f;margin:4px 0;word-break:keep-all}
.hotel-result-card .hotel-twin{color:#31584d;font-weight:850}
.hotel-result-card .hotel-price{color:#a05a2b;font-weight:900}
.hotel-result-card .hotel-quiet{color:#505f6d}
.hotel-detail-card{border-top:4px solid var(--city-accent)}
.back-fab{position:fixed;left:13px;bottom:82px;z-index:115;width:45px;height:45px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.97);color:var(--city-primary);box-shadow:0 8px 24px rgba(9,34,51,.18);font-size:23px;font-weight:900;opacity:0;pointer-events:none;transform:translateY(8px);transition:.2s}
.back-fab.show{opacity:1;pointer-events:auto;transform:translateY(0)}

.quick-grid>.quick-card:last-child:nth-child(odd){grid-column:1/-1;min-height:94px}


/* 2026-09-30 · honest photo fallback + future city expansion */
.photo-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:
 radial-gradient(circle at 24% 18%,rgba(255,255,255,.9),transparent 34%),
 linear-gradient(145deg,var(--city-soft),#dfe9ee);color:var(--city-primary);text-align:center}
.photo-placeholder i{font-style:normal;font-size:28px;filter:saturate(.8)}
.photo-placeholder b{font-size:9px;letter-spacing:.01em;opacity:.78}
.rank-placeholder i{font-size:21px}
.rank-placeholder b{font-size:7.5px}
.detail-placeholder i{font-size:42px}
.detail-placeholder b{font-size:11px}
.ko-proper{display:block;font-size:11px;font-weight:800;color:#e3edf1;margin:-1px 0 3px}
.coming-card{justify-content:flex-start}
.coming-module-grid,.coming-zone-grid{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.coming-module-grid span{display:inline-flex;align-items:center;min-height:31px;border-radius:999px;background:#fff;border:1px solid var(--line);padding:0 9px;font-size:9.5px;font-weight:900;color:var(--city-primary)}
.coming-zone-head{margin-top:22px;padding-top:17px;border-top:1px solid var(--line)}
.coming-zone-head b{display:block;font-size:15px}
.coming-zone-head small{display:block;font-size:10px;color:var(--muted);margin-top:3px;word-break:keep-all}
.coming-zone-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.coming-zone-grid span{display:flex;align-items:center;min-height:50px;border-radius:13px;background:#fff;padding:9px 10px;font-size:10px;font-weight:850;color:#405365;word-break:keep-all;box-shadow:0 3px 10px rgba(23,40,58,.04)}
.coming-status{margin-top:15px;border-radius:13px;background:var(--city-soft);color:var(--city-primary);padding:11px 12px;font-size:10px;font-weight:850;line-height:1.5;word-break:keep-all}
@media(max-width:360px){
 .coming-zone-grid{grid-template-columns:1fr}
}