/* 버드룸 모바일 컨시어지 — 디자인(색 · 글꼴 쓰임 · 간격 · 화면 스타일)
   색과 글꼴 묶음은 아래 :root 토큰에서 바꿉니다. 규칙은 저장소의 CLAUDE.md 「디자인 규칙」. */

/* 기본 — 페이지가 hidden 속성(장소 카드 · HOST PICKS 버튼 · 빠른 답)에 기대므로 지우지 않습니다. */
[hidden]{display:none!important}
img{max-width:100%}
/* Layout: 롱위켄드 모바일 컨시어지 골격(470px 한 칼럼 · 하단 4탭 · 같은 화면 순서) 위에
   버드룸 BX(가이드라인 p20 색 · p21 서체 · 종이 위 헤어라인 · 각진 카드)를 입힌다. 단일 라이트 테마(브랜드 앱). */
:root{
  --bg:#F7F7F2;           /* 브랜드 베이스 오프화이트 */
  --frame:#E9E8E1;        /* 데스크톱에서 칼럼 바깥 */
  --surface:#FFFFFF;
  --ink:#40312C;          /* 키컬러 다크 브라운 = 본문 잉크 */
  --ink-2:#5B4D47;
  --ink-3:#786C66;        /* 종이 위 4.7:1 */
  --soft:#B4AAA4;
  --rule:rgba(64,49,44,.12);
  --rule-strong:rgba(64,49,44,.24);
  --olive:#676651;  --olive-tint:rgba(103,102,81,.13);
  --rust:#703C2E;   --rust-tint:rgba(112,60,46,.10);
  --brown-tint:rgba(64,49,44,.08);
  --on-dark:#F7F7F2;
  --map:#2E2420;
  --r:6px; --r-sm:4px;
  --tabbar-h:72px;
  --font-display:"BR Futura","Barlow Condensed","Pretendard Variable","Arial Narrow",sans-serif;
  --font-body:"BR Avenir","Pretendard Variable",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --font-ko:"Pretendard Variable","BR Avenir",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{background:var(--frame)}
body{margin:0;color:var(--ink);font-family:var(--font-body);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
html[lang="ko"]{--font-body:var(--font-ko)}
html[lang="ja"]{--font-body:"BR Avenir","Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;--font-display:"BR Futura","Barlow Condensed","Noto Sans JP","Hiragino Sans",sans-serif}
html[lang="zh-Hans"]{--font-body:"BR Avenir","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;--font-display:"BR Futura","Barlow Condensed","Noto Sans SC","PingFang SC",sans-serif}
html[lang="ko"] body{word-break:keep-all}
html[lang="ja"] body,html[lang="zh-Hans"] body{line-break:strict}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--bg)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit}
a{color:inherit;text-decoration:none}
img{max-width:100%}
:focus-visible{outline:2px solid var(--rust);outline-offset:2px}
svg.i{display:block;flex:none;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}

#app{position:relative;max-width:470px;margin:0 auto;min-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));background:var(--bg);box-shadow:0 0 0 1px rgba(64,49,44,.06)}
.gx{padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px))}
.tabpage{padding-bottom:calc(var(--tabbar-h) + 14px)}
.screen{animation:enter .22s cubic-bezier(.2,.8,.2,1) both}
@keyframes enter{from{opacity:.0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* 글자 역할 */
.disp{font-family:var(--font-display);font-weight:500}
.up{text-transform:uppercase}
.eyebrow{font-family:var(--font-display);font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.eyebrow.wide{letter-spacing:.52em}
.meta{display:flex;align-items:center;flex-wrap:wrap;gap:9px;font-family:var(--font-display);font-weight:500;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.dot{width:3px;height:3px;border-radius:9px;background:var(--soft);flex:none}
.sec-title{font-family:var(--font-display);font-weight:500;font-size:20px;letter-spacing:.04em;line-height:1.05;text-transform:uppercase;color:var(--ink);margin:0 0 13px}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r)}
.badge{font-family:var(--font-display);font-weight:500;font-size:10px;letter-spacing:.12em;line-height:1;color:var(--rust);border:1px solid var(--rust);border-radius:99px;padding:3px 7px 2px;white-space:nowrap;text-transform:uppercase;flex:none}
.press{transition:transform .14s cubic-bezier(.2,.8,.2,1)}
.press:active{transform:scale(.985)}

/* 상단 바 — 롱위켄드 STICKY_TOP_BAR 와 같은 자리 */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:15;display:flex;align-items:center;gap:12px;min-height:64px;padding-top:14px;padding-bottom:8px;background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.iconbtn{width:36px;height:36px;margin-left:-8px;border-radius:99px;display:grid;place-items:center;color:var(--ink);flex:none}
.bar-title{font-family:var(--font-display);font-weight:500;font-size:22px;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.sp{flex:1}
.mark{display:grid;place-items:center;width:40px;height:40px;color:var(--ink)}

/* 언어 — birdroom.kr 의 다크 브라운 알약 + 동그라미 */
.lang{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 13px 0 11px;border-radius:99px;background:var(--ink);color:rgba(247,247,242,.9);font-family:var(--font-display);font-weight:500;font-size:13px;letter-spacing:.08em;flex:none}
.lang i{width:8px;height:8px;border-radius:99px;border:1.5px solid currentColor;opacity:.85}
.lang--light{background:rgba(48,37,33,.42);border:1px solid rgba(255,255,255,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff}

/* ── 웰컴 ── */
.welcome{height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));min-height:660px;display:flex;flex-direction:column}
.w-hero{position:relative;flex:1 1 0;min-height:230px;overflow:hidden;background:#2A211E}
.w-hero img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.w-fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,23,20,.36) 0%,rgba(30,23,20,0) 26%,rgba(247,247,242,0) 50%,var(--bg) 100%)}
.w-mark{position:absolute;top:22px;left:max(22px,env(safe-area-inset-left,0px));color:#fff;filter:drop-shadow(0 1px 4px rgba(0,0,0,.35))}
.w-lang{position:absolute;top:27px;right:max(18px,env(safe-area-inset-right,0px))}
.w-body{flex:none;padding-top:6px;padding-bottom:16px;display:flex;flex-direction:column}
.w-prop{color:var(--ink);margin-bottom:14px}
.w-h{font-family:var(--font-display);font-weight:500;font-size:clamp(40px,11.6vw,48px);line-height:.96;letter-spacing:.01em;text-transform:uppercase;margin:0 0 12px;text-wrap:balance}
.w-gap{height:26px}
.w-cards{display:flex;flex-direction:column;gap:11px}
.pcard{display:flex;align-items:center;gap:16px;padding:18px}
.pc-ic{width:46px;height:46px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--tbg);color:var(--tfg);flex:none}
.pc-t{display:block;font-family:var(--font-display);font-weight:500;font-size:21px;letter-spacing:.04em;line-height:1.05;text-transform:uppercase}
.pc-s{display:block;font-size:12.5px;font-weight:300;color:var(--ink-3);margin-top:4px}
.pc-go{margin-left:auto;color:var(--soft)}

/* ── 투숙 허브 ── */
.greet{font-family:var(--font-display);font-weight:500;font-size:44px;line-height:.96;letter-spacing:.005em;text-transform:uppercase;margin:0;text-wrap:balance}
.hub-head{padding-top:10px}
.hub-prop{color:var(--ink-3);margin:15px 0 9px}
.blk{padding-top:18px}
.ticket{position:relative;overflow:hidden}
.tk-top{display:flex;align-items:flex-start;padding:20px 20px 18px}
.tk-leg{flex:none;min-width:98px}
.tk-leg.r{text-align:right}
.tk-lab{font-family:var(--font-display);font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.tk-day{font-family:var(--font-display);font-weight:500;font-size:30px;line-height:1;letter-spacing:.02em;text-transform:uppercase;margin-bottom:7px;white-space:nowrap}
.tk-time{font-family:var(--font-display);font-weight:500;font-size:13px;letter-spacing:.08em;color:var(--ink-2);text-transform:uppercase}
.tk-mid{flex:1;min-width:30px;align-self:center;display:flex;flex-direction:column;align-items:center;gap:7px;padding:0 8px;margin-top:4px}
.tk-line{width:100%;height:1px;background:repeating-linear-gradient(90deg,var(--rule-strong) 0 4px,transparent 4px 9px)}
.tk-n{font-family:var(--font-display);font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--rust);white-space:nowrap}
.tk-perf{position:relative;height:0;margin:0 20px;border-top:1px dashed var(--rule-strong)}
.tk-perf i{position:absolute;top:-9px;width:18px;height:18px;border-radius:99px;background:var(--bg)}
.tk-perf i:first-child{left:-30px}.tk-perf i:last-child{right:-30px}
.tk-stub{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 20px 16px;font-family:var(--font-display);font-weight:500;font-size:12px;letter-spacing:.16em;color:var(--ink-2);text-transform:uppercase}
.util{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:hidden}
.u-cell{display:flex;flex-direction:column;align-items:center;gap:7px;padding:15px 6px 14px;text-align:center;min-width:0;color:var(--rust)}
.u-cell+.u-cell{border-left:1px solid var(--rule)}
.u-lab{font-family:var(--font-display);font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.u-val{display:block;font-family:var(--font-display);font-weight:500;font-size:13.5px;letter-spacing:.04em;color:var(--ink);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
html:not([lang="en"]) .u-val.t{font-family:var(--font-body);font-size:13px;letter-spacing:0}
.u-val2{color:var(--ink-3);margin-top:2px;letter-spacing:.12em}
.door{position:relative;background:var(--ink);color:var(--on-dark);border-radius:var(--r);padding:18px 20px 16px;overflow:hidden}
.door-top{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(247,247,242,.62)}
.door-sym{position:absolute;top:17px;right:19px;color:rgba(247,247,242,.9)}
.door-body{font-family:var(--font-display);font-weight:500;font-size:19px;line-height:1.16;letter-spacing:.01em;margin:11px 0 0;max-width:260px}
html:not([lang="en"]) .door-body{font-family:var(--font-body);font-size:15px;line-height:1.5}
.door-rule{height:1px;background:rgba(247,247,242,.16);margin:15px 0 12px}
.door-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.door-code{font-family:var(--font-display);font-weight:500;font-size:24px;line-height:1;letter-spacing:.34em;margin-right:-.34em}
.door-note{font-size:11.5px;color:rgba(247,247,242,.6);line-height:1.4}
.banner{position:relative;display:block;height:204px;border-radius:var(--r);overflow:hidden;background:#1D1714}
.banner img,.tile-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,23,20,0) 42%,rgba(30,23,20,.62) 100%)}
.banner .cap{position:absolute;left:18px;bottom:15px;font-family:var(--font-display);font-weight:500;font-size:12px;letter-spacing:.22em;color:rgba(247,247,242,.9);text-transform:uppercase}
.event{position:relative;overflow:hidden;display:flex;align-items:center;gap:11px;margin-top:12px;padding:13px 14px;border:1px solid var(--rule);border-radius:var(--r);background:linear-gradient(120deg,#FFFFFF 0%,#F8F5F0 100%)}
.event .shim{position:absolute;top:0;bottom:0;left:0;width:38%;background:linear-gradient(90deg,transparent,rgba(112,60,46,.08),rgba(255,255,255,.7),rgba(112,60,46,.08),transparent);animation:shim 3.4s ease-in-out infinite;pointer-events:none}
@keyframes shim{0%{transform:translateX(-160%) skewX(-18deg)}60%,100%{transform:translateX(320%) skewX(-18deg)}}
.ev-t{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500;color:var(--rust)}
.ev-s{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.sec{padding-top:30px}
.tgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.tile{position:relative;display:flex;flex-direction:column;gap:18px;padding:15px 15px 16px;min-width:0}
.t-ic{width:40px;height:40px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--tbg);color:var(--tfg)}
.t-name{display:block;font-size:14.5px;font-weight:500;color:var(--ink);line-height:1.3}
.t-sub{display:block;font-size:11.5px;font-weight:300;color:var(--ink-3);margin-top:3px}
.t-arrow{position:absolute;top:15px;right:14px;color:var(--soft)}
.tile-photo{grid-column:1/-1;position:relative;display:block;height:104px;border-radius:var(--r);overflow:hidden;background:var(--map)}
.tile-photo .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(40,31,27,.72) 0%,rgba(40,31,27,.28) 55%,rgba(40,31,27,.04) 100%)}
.tp-name{position:absolute;left:16px;bottom:31px;font-family:var(--font-display);font-weight:500;font-size:22px;letter-spacing:.05em;line-height:1;color:var(--on-dark);text-transform:uppercase}
.tp-sub{position:absolute;left:16px;bottom:13px;font-size:11px;font-weight:300;color:rgba(247,247,242,.78)}
.tile-photo .t-arrow{color:rgba(247,247,242,.85)}
.phase{overflow:hidden}
.phase-in{padding:18px 20px 16px}
.phase h2{font-family:var(--font-display);font-weight:500;font-size:26px;letter-spacing:.03em;line-height:1.05;text-transform:uppercase;margin:9px 0 8px}
.phase p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.6}
.ph-row{display:flex;gap:10px;align-items:flex-start;margin-top:12px;color:var(--ink-2);font-size:13.5px;line-height:1.55}
.ph-row svg{color:var(--rust);margin-top:2px}
.ph-cta{display:flex;align-items:center;gap:9px;padding:13px 20px;border-top:1px solid var(--rule);background:#FBFBF8;font-weight:500;font-size:13.5px}
.ph-cta svg:first-child{color:var(--rust)}
.ph-cta svg:last-child{margin-left:auto;color:var(--ink-3)}
.rows{padding-top:26px}
.row{display:flex;align-items:center;gap:10px;width:100%;padding:16px 2px;border-bottom:1px solid var(--rule);font-size:13.5px;font-weight:500;color:var(--ink)}
.row:first-child{border-top:1px solid var(--rule)}
.row .go{margin-left:auto;color:var(--soft)}
.row.dim{color:var(--ink-3);font-weight:400}
.foot{text-align:center;padding:30px 0 8px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,sans-serif;color:var(--ink-3)}
.foot b{display:block;font-size:11px;font-weight:600;letter-spacing:.03em}
.foot span{display:block;font-size:10.5px;opacity:.75;margin-top:2px}

/* ── 하단 탭 ── */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:center;pointer-events:none}
.tabbar-in{width:100%;max-width:470px;display:flex;pointer-events:auto;background:color-mix(in srgb,var(--surface) 94%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--rule);padding:9px max(10px,env(safe-area-inset-right,0px)) calc(11px + env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px))}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 0;color:var(--soft);font-family:var(--font-display);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;transition:color .18s}
.tab.on{color:var(--ink)}

/* ── 도착 · 예약 확인 ── */
.a-h{font-family:var(--font-display);font-weight:500;font-size:46px;line-height:.95;letter-spacing:.01em;text-transform:uppercase;margin:8px 0 22px}
.alist{border-top:1px solid var(--rule)}
.arow{border-bottom:1px solid var(--rule)}
.arow-h{display:grid;grid-template-columns:34px 1fr 20px;align-items:center;gap:4px;width:100%;padding:18px 0}
.a-num{font-family:var(--font-display);font-weight:500;font-size:13px;letter-spacing:.06em;color:var(--ink-3)}
.a-t{display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px;font-family:var(--font-display);font-weight:500;font-size:22px;letter-spacing:.04em;line-height:1.1;text-transform:uppercase}
.a-s{display:block;font-size:12.5px;font-weight:300;color:var(--ink-3);margin-top:5px}
.a-chev{color:var(--soft);transition:transform .2s}
.arow.open .a-chev{transform:rotate(90deg)}
.a-body{display:none;padding:0 0 20px 38px;font-size:14px;line-height:1.65;color:var(--ink-2)}
.arow.open .a-body{display:block}
.addr{margin:12px 0 0;padding:14px 16px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r)}
.addr-ko{font-family:var(--font-ko);font-size:17px;font-weight:500;color:var(--ink);letter-spacing:-.01em}
.addr-en{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 15px;border-radius:99px;border:1px solid var(--rule-strong);background:var(--surface);font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap}
.btn.primary{background:var(--rust);border-color:var(--rust);color:var(--on-dark)}
.btn.block{display:flex;width:100%;height:50px;font-size:15px;border-radius:var(--r)}
.st-list{margin:10px 0 0;padding:0;list-style:none}
.st-list li{display:flex;gap:8px;align-items:baseline;padding:3px 0}
.line{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;padding:0 5px;border-radius:99px;font-family:var(--font-display);font-weight:500;font-size:11px;letter-spacing:.04em;color:#fff}
.v-h{font-family:var(--font-display);font-weight:500;font-size:38px;line-height:1;letter-spacing:.02em;text-transform:uppercase;margin:6px 0 10px}
.v-sub{margin:0 0 22px;color:var(--ink-3);font-weight:300;font-size:14.5px;line-height:1.6}
.fld{display:block;margin-bottom:16px}
.fld span{display:block;font-size:13px;font-weight:500;margin-bottom:7px}
.fld input{display:block;width:100%;height:48px;padding:0 15px;border:1px solid var(--rule-strong);border-radius:var(--r);background:var(--surface);font:inherit;font-size:16px;color:var(--ink);outline:none}
.fld input:focus{border-color:var(--ink)}
.demo-note{display:flex;gap:8px;align-items:center;margin-top:14px;font-size:12px;color:var(--ink-3)}

/* ── Discover(지도) ── */
.disc,.chat{height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - var(--tabbar-h));min-height:520px;display:flex;flex-direction:column}
.disc .bar,.chat .bar{position:relative;top:auto}
.chips{display:flex;gap:8px;overflow-x:auto;padding-top:2px;padding-bottom:12px;scrollbar-width:none;flex:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;height:34px;padding:0 14px;border-radius:99px;border:1px solid var(--rule-strong);background:var(--surface);font-size:13px;color:var(--ink);white-space:nowrap}
.chip b{font-weight:400;color:var(--ink-3);margin-left:4px}
.chip.on{background:var(--rust);border-color:var(--rust);color:var(--on-dark)}
.chip.on b{color:rgba(247,247,242,.7)}
.map-wrap{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--map)}
.map-scroll{position:absolute;inset:0;overflow:auto;scrollbar-width:none;overscroll-behavior:contain;cursor:grab}
.map-scroll::-webkit-scrollbar{display:none}
.map-scroll.drag{cursor:grabbing}
.map-inner{position:relative}
.map-inner img{display:block;width:100%;height:auto;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;pointer-events:none}
.pin{position:absolute;transform:translate(-50%,-50%);width:25px;height:25px;border-radius:99px;background:var(--bg);color:var(--ink);font-family:var(--font-display);font-weight:500;font-size:12px;letter-spacing:.02em;display:grid;place-items:center;box-shadow:0 0 0 2px rgba(46,36,32,.92),0 3px 8px rgba(0,0,0,.4);transition:transform .16s,opacity .16s,background .16s}
.pin.off{opacity:.22;pointer-events:none}
.pin.sel{background:var(--rust);color:var(--on-dark);transform:translate(-50%,-50%) scale(1.22);z-index:3}
.home{position:absolute;transform:translate(-50%,-50%);border-radius:99px;border:1.5px solid rgba(247,247,242,.6);pointer-events:none;animation:homepulse 2.6s ease-out infinite}
@keyframes homepulse{0%{box-shadow:0 0 0 0 rgba(247,247,242,.35)}70%{box-shadow:0 0 0 14px rgba(247,247,242,0)}100%{box-shadow:0 0 0 0 rgba(247,247,242,0)}}
.map-zoom{position:absolute;top:12px;right:max(14px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r);overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.map-zoom button{width:38px;height:38px;display:grid;place-items:center;color:var(--ink)}
.map-zoom button+button{border-top:1px solid var(--rule)}
.fab{position:absolute;right:max(14px,env(safe-area-inset-right,0px));bottom:78px;display:flex;align-items:center;gap:7px;height:40px;padding:0 16px 0 13px;border-radius:99px;background:var(--surface);color:var(--rust);font-family:var(--font-display);font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 6px 18px rgba(0,0,0,.35);z-index:4}
.fab.on{background:var(--rust);color:var(--on-dark)}
.fab.on svg{fill:currentColor}
.pfloat{position:absolute;left:12px;right:12px;bottom:76px;z-index:6;background:var(--surface);border-radius:var(--r);box-shadow:0 12px 32px rgba(0,0,0,.38);padding:15px 16px 14px}
.pf-top{display:flex;align-items:flex-start;gap:11px}
.pf-x{margin-left:auto;margin-top:-4px;margin-right:-6px;width:32px;height:32px;display:grid;place-items:center;color:var(--ink-3);flex:none}
.sheet{position:absolute;left:0;right:0;bottom:0;height:64px;background:var(--surface);border-radius:12px 12px 0 0;box-shadow:0 -6px 24px rgba(0,0,0,.24);transition:height .28s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;overflow:hidden;z-index:5}
.sheet.open{height:74%}
.sh-handle{display:flex;flex-direction:column;align-items:center;gap:9px;width:100%;padding:9px 0 12px;flex:none}
.sh-handle i{width:38px;height:4px;border-radius:9px;background:var(--rule-strong)}
.sh-handle span{font-family:var(--font-display);font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.sh-list{flex:1;overflow-y:auto;padding:0 max(18px,env(safe-area-inset-right,0px)) 18px max(18px,env(safe-area-inset-left,0px))}
.pl{display:flex;gap:12px;width:100%;padding:14px 0;border-top:1px solid var(--rule)}
.pl-n{flex:none;width:26px;height:26px;border-radius:99px;background:var(--ink);color:var(--on-dark);font-family:var(--font-display);font-weight:500;font-size:12px;display:grid;place-items:center}
.pl-n.none{background:transparent;border:1px dashed var(--rule-strong);color:var(--ink-3)}
.pl-main{flex:1;min-width:0}
.pl-name{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;font-size:15px;font-weight:500;color:var(--ink);line-height:1.3}
.pl-meta{font-size:12px;color:var(--ink-3);margin-top:2px}
.pl-ko{display:block;font-family:var(--font-ko);font-size:12px;color:var(--ink-3);margin-top:1px}
.pl-desc{font-size:13px;color:var(--ink-2);margin-top:6px;line-height:1.5}
.pl-tip{display:flex;gap:6px;font-size:12.5px;color:var(--olive);margin-top:7px;line-height:1.45}
.pl-tip svg{margin-top:2px}
.pick{display:inline-flex;align-items:center;gap:3px;font-family:var(--font-display);font-weight:500;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--olive)}
.pick svg{fill:currentColor}
.pl-link{display:inline-flex;align-items:center;gap:4px;margin-top:9px;font-size:12.5px;font-weight:500;color:var(--ink);border-bottom:1px solid var(--rule-strong);padding-bottom:1px}

/* ── Guide ── */
.g-hero{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r);background:#2A211E}
.g-h{font-family:var(--font-display);font-weight:500;font-size:42px;line-height:.96;letter-spacing:.01em;text-transform:uppercase;margin:24px 0 12px}
.g-intro{font-size:16px;line-height:1.62;color:var(--ink-2);font-weight:300;margin:0 0 30px;max-width:60ch}
.g-sec{padding-top:6px}
.g-sec + .g-sec{padding-top:34px}
.g-list{margin-top:12px;border-top:1px solid var(--rule)}
.g-item{display:grid;grid-template-columns:34px minmax(0,1fr);padding:18px 0 22px;border-bottom:1px solid var(--rule);scroll-margin-top:84px}
.g-num{font-family:var(--font-display);font-weight:500;font-size:13px;letter-spacing:.06em;color:var(--ink-3);padding-top:5px}
.g-title{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:500;font-size:22px;letter-spacing:.04em;line-height:1.1;text-transform:uppercase;margin:0}
.g-title svg{margin-left:auto;color:var(--soft)}
.g-body{font-size:14px;line-height:1.68;color:var(--ink-2);margin-top:9px}
.g-body p{margin:0 0 8px}
.g-body b{font-weight:500;color:var(--ink)}
.plan{margin-top:14px;padding:14px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r)}
.plan img{display:block;width:100%;height:auto}
.spaces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 16px;margin-top:14px}
.sp-n{font-family:var(--font-display);font-weight:500;font-size:12.5px;letter-spacing:.12em;color:var(--ink);text-transform:uppercase}
.sp-d{font-size:12.5px;color:var(--ink-3);line-height:1.45;margin-top:2px}
.wifi-card{display:flex;align-items:center;gap:14px;margin-top:12px;padding:14px 16px;background:var(--ink);color:var(--on-dark);border-radius:var(--r)}
.wifi-card .k{font-family:var(--font-display);font-weight:500;font-size:11px;letter-spacing:.18em;color:rgba(247,247,242,.6);text-transform:uppercase}
.wifi-card .v{font-family:var(--font-display);font-weight:500;font-size:16px;letter-spacing:.06em}
.wifi-card .sym{margin-left:auto;color:rgba(247,247,242,.85)}
.rules{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--rule)}
.rules li{display:grid;grid-template-columns:20px minmax(0,1fr);padding:12px 0;border-bottom:1px solid var(--rule);font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.rules li::before{content:"–";color:var(--ink-3)}
.story{margin-top:14px;overflow:hidden}
.story img{display:block;width:100%;aspect-ratio:12/11;object-fit:cover}
.story-in{padding:20px 20px 22px}
.story h3{font-family:var(--font-display);font-weight:500;font-size:26px;letter-spacing:.03em;line-height:1.05;text-transform:uppercase;margin:0 0 12px}
.story p{margin:0;font-size:14px;line-height:1.7;color:var(--ink-2)}
.story .sig{display:flex;align-items:center;gap:10px;margin-top:18px;color:var(--ink)}

/* ── Messages ── */
.chat-head h1{font-family:var(--font-display);font-weight:500;font-size:24px;letter-spacing:.06em;line-height:1;text-transform:uppercase;margin:0}
.chat-sub{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3);margin-top:5px}
.chat-sub i{width:6px;height:6px;border-radius:9px;background:var(--olive)}
.chat-log{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding-top:6px;padding-bottom:12px}
.day{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:500;font-size:11px;letter-spacing:.18em;color:var(--ink-3);text-transform:uppercase}
.day::before,.day::after{content:"";flex:1;height:1px;background:var(--rule)}
.msg{display:flex;flex-direction:column;align-items:flex-start;max-width:84%}
.msg.me{align-self:flex-end;align-items:flex-end}
.who{display:flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:500;font-size:11px;letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase;margin-bottom:5px}
.bub{padding:10px 14px;font-size:15px;line-height:1.48;border-radius:16px 16px 16px 4px;background:var(--surface);border:1px solid var(--rule);white-space:pre-wrap;overflow-wrap:anywhere}
.me .bub{background:var(--ink);border-color:var(--ink);color:var(--on-dark);border-radius:16px 16px 4px 16px}
.msg time{font-size:10.5px;color:var(--ink-3);margin-top:4px;font-variant-numeric:tabular-nums}
.cplace{display:flex;gap:12px;align-items:center;margin-top:6px;padding:12px 14px;width:100%;min-width:250px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);text-align:left}
.cplace .pl-n{background:var(--rust)}
.typing{display:inline-flex;gap:4px;padding:13px 15px;border-radius:16px 16px 16px 4px;background:var(--surface);border:1px solid var(--rule)}
.typing i{width:6px;height:6px;border-radius:9px;background:var(--soft);animation:blink 1.1s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}
.quick{display:flex;gap:8px;overflow-x:auto;padding-top:6px;padding-bottom:10px;scrollbar-width:none;flex:none}
.quick::-webkit-scrollbar{display:none}
.qchip{flex:none;min-height:40px;padding:0 15px;border-radius:99px;border:1px solid var(--rule-strong);background:var(--surface);font-size:13.5px;white-space:nowrap}
.composer{display:flex;align-items:flex-end;gap:8px;padding-top:8px;padding-bottom:12px;border-top:1px solid var(--rule);background:var(--bg);flex:none}
.attach{width:44px;height:44px;border-radius:99px;background:var(--surface);border:1px solid var(--rule);display:grid;place-items:center;color:var(--ink-2);flex:none}
.field{flex:1;min-width:0;display:flex;align-items:flex-end;border-radius:22px;background:rgba(64,49,44,.06);border:1px solid transparent}
.field:focus-within{border-color:var(--rule-strong);background:var(--surface)}
.field textarea{flex:1;min-width:0;display:block;border:0;background:transparent;resize:none;font:inherit;font-size:16px;line-height:22px;padding:11px 4px 11px 16px;max-height:120px;color:var(--ink);outline:none}
.send{width:44px;height:44px;display:grid;place-items:center;flex:none}
.send span{width:32px;height:32px;border-radius:99px;display:grid;place-items:center;background:var(--soft);color:#fff;transition:background .15s}
.send.can span{background:var(--rust)}
.gate{margin:auto 0;padding:26px 24px}
.gate .pc-ic{margin-bottom:16px}
.gate h2{font-family:var(--font-display);font-weight:500;font-size:24px;letter-spacing:.03em;line-height:1.1;text-transform:uppercase;margin:0 0 10px}
.gate p{margin:0 0 20px;color:var(--ink-2);font-size:14.5px;line-height:1.65}
.gate small{display:block;text-align:center;margin-top:14px;font-size:12.5px;color:var(--ink-3)}

/* ── 시트 · 토스트 ── */
.scrim{position:fixed;inset:0;z-index:50;background:rgba(30,23,20,.42);display:flex;align-items:flex-end;justify-content:center;animation:fade .18s both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.bsheet{width:100%;max-width:470px;background:var(--bg);border-radius:14px 14px 0 0;padding:10px max(22px,env(safe-area-inset-right,0px)) calc(26px + env(safe-area-inset-bottom,0px)) max(22px,env(safe-area-inset-left,0px));animation:up .24s cubic-bezier(.2,.8,.2,1) both}
@keyframes up{from{transform:translateY(30px);opacity:.4}to{transform:none;opacity:1}}
.bs-grab{width:38px;height:4px;border-radius:9px;background:var(--rule-strong);margin:0 auto 16px}
.bs-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.bs-head h2{font-family:var(--font-display);font-weight:500;font-size:22px;letter-spacing:.05em;line-height:1.1;text-transform:uppercase;margin:0}
.langs{display:flex;flex-wrap:wrap;gap:8px}
.lpill{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 13px;border-radius:99px;background:var(--ink);color:rgba(247,247,242,.92);font-family:var(--font-display);font-weight:500;font-size:15px;letter-spacing:.08em}
.lpill i{width:9px;height:9px;border-radius:99px;border:1.5px solid currentColor}
.lpill.on i{background:currentColor}
.lpill[disabled]{background:rgba(64,49,44,.28);cursor:default}
.lpill small{font-family:var(--font-body);font-size:10.5px;letter-spacing:0;opacity:.8}
.bs-note{font-size:12.5px;color:var(--ink-3);margin:14px 0 0}
.driver{padding:22px 20px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r)}
.driver .ko{font-family:var(--font-ko);font-size:27px;font-weight:600;line-height:1.3;letter-spacing:-.02em;color:var(--ink)}
.driver .ko2{font-family:var(--font-ko);font-size:17px;font-weight:500;color:var(--ink-2);margin-top:6px}
.driver .en{font-size:12.5px;color:var(--ink-3);margin-top:12px;padding-top:12px;border-top:1px solid var(--rule)}
.toast{position:fixed;left:50%;bottom:calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;background:var(--ink);color:var(--on-dark);padding:9px 16px;border-radius:99px;font-size:12.5px;font-weight:500;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.2);animation:up .2s both;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis}

@media (prefers-reduced-motion:reduce){
  .screen,.scrim,.bsheet,.toast{animation:none}
  .event .shim,.home,.typing i{animation:none}
  .sheet{transition:none}
}