:root { --ok:#2f5a45; --ok-bg:#e8eee9; --warn:#7a6440; --warn-bg:#f1ece2; --no:#9b2c2c; --no-bg:#fde8e8; }

.draftbar { background:#000; color:#fff; font-size:.8125rem; text-align:center; padding:8px 16px; line-height:1.4; }
.draftbar b { font-weight:600; }

.logo__mark { width:26px; height:26px; border-radius:8px; background:#000; color:#fff; display:grid; place-items:center; font-size:.6875rem; font-weight:600; letter-spacing:.02em; }

.photo { position:relative; overflow:hidden; border-radius:var(--radius-3xl); background:var(--solid-4); }
.photo img { width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out-expo); }
.photo:hover img { transform:scale(1.03); }
.photo--hero { aspect-ratio:21/9; }
@media (max-width:767px){ .photo--hero { aspect-ratio:4/3; } }
.photo__cap { position:absolute; left:16px; bottom:16px; background:#fffe; backdrop-filter:blur(8px); border-radius:999px; padding:8px 14px; font-size:.8125rem; font-weight:500; }
.photo--tall { aspect-ratio:4/5; }
.photo--wide { aspect-ratio:16/10; }

.finder { display:grid; grid-template-columns:1.1fr .9fr; gap:0; border:1px solid var(--fg-12); border-radius:var(--radius-3xl); background:#fff; overflow:hidden; box-shadow:0 2px 4px #0000000f, 0 30px 70px -30px #00000040; }
@media (max-width:899px){ .finder { grid-template-columns:1fr; } }
.finder__l { padding:28px; display:grid; gap:22px; align-content:start; }
.finder__r { padding:28px; background:var(--solid-4); display:grid; gap:14px; align-content:start; }
.field-label { font-size:.8125rem; font-weight:500; color:var(--fg-60); display:flex; justify-content:space-between; }
.seg { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.seg button { padding:9px 14px; border-radius:999px; border:1px solid var(--fg-12); font-size:.875rem; transition:all var(--dur-fast) var(--ease-c); }
.seg button:hover { border-color:var(--fg-44); }
.seg button[aria-pressed="true"] { background:#000; color:#fff; border-color:#000; }
input[type="range"] { width:100%; accent-color:#000; margin-top:10px; }
.big-n { font-size:clamp(2.2rem,1.6rem + 2vw,3.2rem); font-weight:500; letter-spacing:-.03em; line-height:1; }
.line { display:flex; justify-content:space-between; font-size:.9375rem; padding:10px 0; border-top:1px solid var(--fg-12); }
.line span:first-child { color:var(--fg-60); }

.plan { display:grid; gap:18px; }
.plan__floor { display:grid; grid-template-columns:90px 1fr; gap:14px; align-items:center; }
@media (max-width:599px){ .plan__floor { grid-template-columns:1fr; } }
.plan__label { font-size:.8125rem; font-weight:500; color:var(--fg-60); }
.plan__cells { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:6px; }
@media (max-width:599px){ .plan__cells { grid-template-columns:repeat(6,minmax(0,1fr)); } }
.cell { aspect-ratio:1; border-radius:10px; border:1px solid var(--fg-12); font-size:.75rem; font-weight:500; display:grid; place-items:center; transition:transform var(--dur-fast) var(--ease-c), background var(--dur-fast); position:relative; }
.cell:hover { transform:translateY(-2px); border-color:#000; }
.cell.available { background:var(--ok-bg); color:var(--ok); }
.cell.reserved { background:var(--warn-bg); color:var(--warn); }
.cell.occupied, .cell.repair { background:var(--solid-4); color:var(--fg-44); }
.cell.pair-l { margin-right:-3px; } .cell.pair-r { margin-left:-3px; }
.legend { display:flex; gap:16px; flex-wrap:wrap; font-size:.8125rem; color:var(--fg-60); }
.legend i { display:inline-block; width:12px; height:12px; border-radius:4px; margin-right:6px; vertical-align:-1px; }

.filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.filters .count { margin-left:auto; font-size:.875rem; color:var(--fg-60); }
.rooms { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:20px; }
.room { border:1px solid var(--fg-12); border-radius:var(--radius-lg); overflow:hidden; background:#fff; display:flex; flex-direction:column; cursor:pointer; transition:border-color var(--dur-med) var(--ease-c), transform var(--dur-med) var(--ease-c), opacity .35s; text-align:left; }
.room:hover { border-color:var(--fg-44); transform:translateY(-3px); }
.room.is-hiding { opacity:0; transform:scale(.97); }
.room__ph { aspect-ratio:4/3; overflow:hidden; position:relative; background:var(--solid-4); }
.room__ph img { width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease-c); }
.room:hover .room__ph img { transform:scale(1.05); }
.room__body { padding:18px; display:grid; gap:6px; }
.room__top { display:flex; justify-content:space-between; align-items:center; }
.room__name { font-size:1.0625rem; font-weight:500; }
.room__meta { font-size:.875rem; color:var(--fg-60); }
.room__price { font-weight:500; margin-top:6px; }
.status { font-size:.75rem; font-weight:600; border-radius:999px; padding:4px 10px; }
.status.available { background:var(--ok-bg); color:var(--ok); }
.status.reserved { background:var(--warn-bg); color:var(--warn); }
.status.occupied, .status.repair { background:var(--solid-4); color:var(--fg-44); }
.pill-abs { position:absolute; top:12px; left:12px; }

.drawer { position:fixed; inset:0; z-index:90; display:flex; justify-content:flex-end; pointer-events:none; }
.drawer__bg { position:absolute; inset:0; background:#0006; opacity:0; transition:opacity var(--dur-med) var(--ease-c); }
.drawer__panel { position:relative; width:min(520px,100%); height:100%; background:#fff; overflow-y:auto; transform:translateX(100%); transition:transform var(--dur-med) var(--ease-out-expo); display:flex; flex-direction:column; }
.drawer.is-open { pointer-events:auto; }
.drawer.is-open .drawer__bg { opacity:1; }
.drawer.is-open .drawer__panel { transform:none; }
.drawer__img { aspect-ratio:4/3; }
.drawer__img img { width:100%; height:100%; object-fit:cover; }
.drawer__body { padding:28px; display:grid; gap:16px; }
.drawer__close { position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:999px; background:#fff; display:grid; place-items:center; z-index:2; box-shadow:0 2px 10px #0002; }

.form-wrap { display:grid; grid-template-columns:1.4fr .8fr; gap:32px; align-items:start; }
@media (max-width:959px){ .form-wrap { grid-template-columns:1fr; } }
.form { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:639px){ .form { grid-template-columns:1fr; } }
.form .full { grid-column:1/-1; }
.form fieldset { border:0; grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:18px; padding-top:8px; }
@media (max-width:639px){ .form fieldset { grid-template-columns:1fr; } }
.form legend { font-size:.8125rem; font-weight:500; color:var(--fg-44); text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; grid-column:1/-1; }
html[lang="ko"] .form legend { text-transform:none; letter-spacing:.02em; }
.form label { display:grid; gap:8px; font-size:.875rem; font-weight:500; }
.form .opt { color:var(--fg-44); font-weight:400; }
.form input, .form select, .form textarea { font:inherit; font-size:1rem; padding:13px 14px; border:1px solid var(--fg-12); border-radius:12px; background:#fff; width:100%; transition:border-color var(--dur-fast); }
.form input:focus, .form select:focus, .form textarea:focus { outline:none; border-color:#000; }
.form .check { display:flex; gap:10px; align-items:flex-start; font-weight:400; color:var(--fg-60); }
.form .check input { width:auto; margin-top:5px; }
.summary { position:sticky; top:calc(var(--header-h) + 20px); border:1px solid var(--fg-12); border-radius:var(--radius-3xl); padding:24px; display:grid; gap:4px; background:#fff; }
.msg { border-radius:12px; padding:14px 16px; font-size:.9375rem; }
.msg.ok { background:var(--ok-bg); color:var(--ok); }
.msg.err { background:var(--no-bg); color:var(--no); }
.hp { position:absolute; left:-9999px; }

.map { border-radius:var(--radius-3xl); overflow:hidden; border:1px solid var(--fg-12); aspect-ratio:16/10; background:var(--solid-4); }
.map iframe { width:100%; height:100%; border:0; }
.route { display:grid; gap:0; }
.route li { display:grid; grid-template-columns:44px 1fr; gap:14px; padding:18px 0; border-top:1px solid var(--fg-12); }
.route li:last-child { border-bottom:1px solid var(--fg-12); }
.route .ic { width:44px; height:44px; border-radius:12px; background:var(--solid-4); display:grid; place-items:center; font-size:.75rem; font-weight:600; }

.fcard { border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--fg-12); background:#fff; display:flex; flex-direction:column; }
.fcard__ph { aspect-ratio:4/3; overflow:hidden; background:var(--solid-4); }
.fcard__ph img { width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease-c); }
.fcard:hover .fcard__ph img { transform:scale(1.05); }
.fcard__body { padding:20px; display:grid; gap:6px; }

.timeline li { display:grid; grid-template-columns:120px 1fr; gap:20px; padding:22px 0; border-top:1px solid var(--fg-12); }
.timeline li:last-child { border-bottom:1px solid var(--fg-12); }
.timeline .y { font-family:var(--font-mono); font-size:.875rem; color:var(--fg-44); padding-top:3px; }
@media (max-width:599px){ .timeline li { grid-template-columns:1fr; gap:4px; } }

.pagehead { padding-top:clamp(48px,6vw,96px); padding-bottom:clamp(24px,3vw,48px); }
.crumbs { font-size:.8125rem; color:var(--fg-44); }
.credit { font-size:.75rem; color:var(--fg-44); line-height:1.6; }
.credit a { text-decoration:underline; }
.nav a.is-cta { display:none; }
.mobile-cta { position:fixed; left:16px; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:50; display:none; }
@media (max-width:767px){ .mobile-cta { display:flex; } .footer { padding-bottom:110px; } }
.mobile-cta .btn { width:100%; padding:16px; box-shadow:0 10px 30px #0004; }

/* drawn room tile and room plan (no stock photos; 2026-09-28) */
.rtile { width:100%; height:100%; display:grid; place-content:center; justify-items:center; gap:10px; background:var(--surface,#f5f3f1); color:var(--fg-60,#44403b); }
.rtile span { font-family:var(--font-mono); font-size:.8125rem; letter-spacing:.08em; }
.drawer__img .rtile svg { width:96px; height:60px; }
.roomplan { background:#f5f3f1; }
.photo.roomplan img { object-fit:contain; filter:none; }
.story__media img[src$=".svg"], .story__step img.m[src$=".svg"] { filter:none; background:#f5f3f1; }