/* Consumer navigation over the existing town. The map and its artwork stay intact. */
:root { --ink:#151515; --mute:#626262; --paper:#f4f4f4; --paper-2:#e9e9e9; --white:#fff; --coral:#242424; --coral-deep:#000; --line:rgba(0,0,0,.13); --shadow:0 12px 35px rgba(0,0,0,.06); }
body { font-family:Pretendard,"Apple SD Gothic Neo",sans-serif; }
#title { height:100dvh; overflow:auto; background:#f4f4f4; padding:32px 20px; }
.title-card { width:min(760px,100%); padding:32px; gap:20px; margin:auto; border-radius:24px; }
.title-card>img { width:90px; height:105px; filter:none; }
.title-card .entry-eyebrow { font-size:11px; letter-spacing:.16em; color:#555; font-weight:700; }
.title-card h1 { font-size:clamp(32px,5.5vw,48px); line-height:1.2; word-break:keep-all; }
.title-card h1 em { color:#151515; }
.title-card>p { max-width:48ch; font-size:16px; }
.entry-links { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; width:100%; margin:8px 0; }
.entry-links a { display:flex; flex-direction:column; gap:9px; min-height:110px; justify-content:center; padding:18px 12px; border:1px solid #d6d6d6; border-radius:12px; text-decoration:none; color:#151515; background:#fafafa; }
.entry-links a:hover { border-color:#151515; background:#f0f0f0; }
.entry-links b { font-size:17px; }
.entry-links span { font-size:12px; line-height:1.4; color:#626262; }
.entry-auth { width:100%; border-top:1px solid #e5e5e5; padding-top:20px; }
.entry-auth summary { cursor:pointer; font-size:14px; color:#555; }
.entry-auth .auth-form { padding-top:22px; }
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid #526be9; outline-offset:3px; }
.panel { width:min(620px,100vw); }
.panel-body { padding:24px; }
.panel-head { background:#fff; }
.panel-head>.x { flex-shrink:0; white-space:nowrap; }
.card { border-radius:14px; background:#fff; }
.card h3 { word-break:keep-all; line-height:1.4; }
.card .row { align-items:center; gap:12px; }
.card .catalog-note,.catalog-note { font-size:12px; line-height:1.7; color:#666; font-weight:400; margin-bottom:14px; }
.catalog-link { color:#333; font-size:13px; text-underline-offset:4px; line-height:1.6; }
.path .catalog-link { display:block; margin:0 0 16px; }
.hub-intro { padding:4px 0 24px; }
.hub-intro h3 { font-size:23px; margin:12px 0 8px; }
.hub-intro p { font-size:14px; color:#626262; line-height:1.7; }
.library-controls { margin-bottom:24px; }
.library-controls label { font-size:14px; display:block; margin-bottom:10px; font-weight:600; }
#library-search { width:100%; font-size:16px; border:1px solid #bbb; padding:14px 16px; border-radius:10px; background:#fff; color:#151515; }
.catalog-filters { display:flex; flex-wrap:wrap; gap:8px; padding:16px 0; }
.catalog-filters button { padding:9px 12px; border:1px solid #d4d4d4; border-radius:20px; background:#fff; font-size:13px; min-height:38px; }
.catalog-filters button[aria-pressed="true"] { background:#222; color:#fff; border-color:#222; }
#library-count { font-size:13px; color:#555; }
.resource-key { color:#666; font-size:12px; }
.empty-state { padding:28px 20px; }
.ws-nav { background:#fafafa; border-color:#ddd; }
.ws-nav button,.ws-nav a { color:#333; }
.ws-nav button.on,.ws-nav button:hover { background:#222; }
.ws-nav button.on,.ws-nav button:hover,.ws-nav .x { color:#fff; }
.ws-nav button.path-on:not(.on) { background:#eee; color:#222; border-color:#999; }
.ws-nav .x { background:#222; }
.ws-main.frame { display:grid; grid-template-rows:auto minmax(0,1fr) auto; min-width:0; min-height:0; }
.ws-context { padding:14px 20px; font-size:13px; line-height:1.6; background:#fff; border-bottom:1px solid #ddd; color:#555; }
#ws-frame { width:100%; height:100%; min-height:0; border:0; }
.ws-offer { position:static; width:auto; max-width:none; padding:12px 20px; background:#fff; border-top:1px solid #ddd; box-shadow:none; border-radius:0; }
.lab-product { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; }
.lab-product p { font-size:12px; color:#626262; line-height:1.5; margin-bottom:3px; }
.lab-product b { font-size:14px; }
.lab-product .btn { font-size:12px; min-height:38px; padding:9px 14px; }
.ws-mine[hidden] { display:none!important; }
@media(max-width:600px) {
  .hud { padding:8px 12px; }
  .hud-left,.hud-right { gap:8px; }
  .hud-left .xp,.hud-right>div.chip { display:none; }
  .hud-left { flex:1; }
  .face { flex:none; width:32px; height:32px; }
  .who { white-space:nowrap; overflow:hidden; }
  .who b { overflow:hidden; text-overflow:ellipsis; }
  .hud-right { flex:none; white-space:nowrap; }
  .hud-right button { flex:none; min-width:44px; }
  #title { padding:20px 14px; }
  .title-card { padding:24px 18px; gap:16px; }
  .title-card>img { width:64px; height:74px; }
  .title-card>p { font-size:14px; }
  .entry-links { grid-template-columns:1fr; gap:8px; }
  .entry-links a { min-height:68px; padding:14px 18px; text-align:left; gap:5px; }
  .entry-links b { font-size:16px; }
  .panel-body { padding:20px 16px; }
  .panel-head { padding:18px 16px; }
  .ws-context { padding:10px 14px; font-size:12px; }
  .ws-offer { padding:10px 14px; }
  .ws-nav { max-height:160px; }
}