/* Forest Studio HQ｜可探索的總部平面圖 V1 */
#forestAboutPanelHq {
    --hq-ink: #2f4435;
    --hq-muted: #6d796b;
    --hq-line: #dce2d8;
    --hq-gold: #a78135;
    max-width: 1120px;
    margin: 0 auto;
    padding: 26px 20px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--hq-ink);
    font-family: "Iowan Old Style", Georgia, "Noto Serif TC", "PMingLiU", serif;
}
#forestAboutPanelHq .hq-plan-heading { margin-bottom: 26px; text-align: center; }
#forestAboutPanelHq .hq-plan-eyebrow { margin: 0 0 12px; color: var(--hq-gold); font-size: 10px; letter-spacing: .16em; }
#forestAboutPanelHq .hq-plan-heading h1 { margin: 0 0 12px; color: var(--hq-ink); font-size: clamp(30px, 4.5vw, 52px); font-weight: 500; line-height: 1.25; }
#forestAboutPanelHq .hq-plan-heading > p:last-child { margin: 0; color: var(--hq-muted); font-size: 16px; line-height: 1.8; }
#forestAboutPanelHq .hq-plan-map { position: relative; width: 100%; }
#forestAboutPanelHq .hq-plan-art { display: block; width: 100%; height: auto; }
#forestAboutPanelHq .hq-map-room {
    position: absolute;
    left: var(--room-x);
    top: var(--room-y);
    width: var(--room-w);
    height: var(--room-h);
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 9px 4px;
    border: 2px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: #243529;
    font-family: inherit;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease;
}
#forestAboutPanelHq .hq-map-room > span { position: absolute; top: 8%; left: 5%; right: 5%; display: block; padding: 4px 6px; border-radius: 3px; background: rgba(255,255,249,.88); color: #263b2e; font-size: clamp(10px, 1.35vw, 15px); line-height: 1.35; text-align: center; }
#forestAboutPanelHq .hq-map-room small { position: absolute; bottom: 8%; right: 7%; padding: 4px 8px; border-radius: 999px; background: #b39654; color: #fffdf8; font-size: 10px; }
#forestAboutPanelHq .hq-map-room:hover { background: rgba(255,255,255,.12); border-color: #c9b170; }
#forestAboutPanelHq .hq-map-room[aria-pressed="true"] { border-color: #b48b30; box-shadow: inset 0 0 0 1px rgba(255,251,232,.8); background: rgba(235,210,123,.1); }
#forestAboutPanelHq .hq-map-room:focus-visible { outline: 3px solid #6e8068; outline-offset: 2px; }
#forestAboutPanelHq .hq-map-caption { position: absolute; left: 3%; display: flex; align-items: center; gap: 7px; color: #364837; font-size: clamp(10px, 1.4vw, 16px); line-height: 1.4; padding: 2px 5px; background: rgba(255,254,247,.9); pointer-events: none; }
#forestAboutPanelHq .hq-map-caption.is-core { top: 0; }
#forestAboutPanelHq .hq-map-caption.is-work { top: 33%; }
#forestAboutPanelHq .hq-map-caption.is-public { top: 61%; }
#forestAboutPanelHq .hq-map-caption i,
#forestAboutPanelHq .hq-zone-controls i { width: 12px; height: 12px; border-radius: 50%; background: #bdacca; flex: 0 0 auto; }
#forestAboutPanelHq .is-work i,
#forestAboutPanelHq .hq-zone-controls i.is-work { background: #aebd98; }
#forestAboutPanelHq .is-public i,
#forestAboutPanelHq .hq-zone-controls i.is-public { background: #e0c990; }
#forestAboutPanelHq .hq-zone-controls { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin: 20px 0 0; }
#forestAboutPanelHq .hq-zone-controls button { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 44px; margin: 0; padding: 6px 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--hq-ink); font-family: inherit; font-size: 15px; cursor: pointer; }
#forestAboutPanelHq .hq-zone-controls button[aria-pressed="true"] { border-color: var(--hq-line); background: rgba(126,145,117,.05); }
#forestAboutPanelHq .hq-zone-controls button:focus-visible { outline: 2px solid var(--hq-gold); outline-offset: 3px; }
#forestAboutPanelHq .hq-zone-controls span { color: var(--hq-muted); font-size: 11px; }
#forestAboutPanelHq .hq-plan-instruction { display: flex; align-items: center; gap: 20px; margin: 22px 0; color: var(--hq-muted); text-align: center; font-size: 14px; }
#forestAboutPanelHq .hq-plan-instruction::before,
#forestAboutPanelHq .hq-plan-instruction::after { content: ""; height: 1px; flex: 1; background: var(--hq-line); }
#forestAboutPanelHq .hq-mobile-rooms { display: none; }
#forestAboutPanelHq .hq-room-detail { margin: 0; padding: 24px 10% 30px; border-top: 1px solid var(--hq-line); }
#forestAboutPanelHq .hq-detail-eyebrow { margin: 0 0 12px; color: var(--hq-gold); font-size: 11px; letter-spacing: .1em; }
#forestAboutPanelHq .hq-room-detail h2 { margin: 0 0 16px; color: var(--hq-ink); font-size: clamp(28px, 3.7vw, 40px); line-height: 1.5; font-weight: 500; }
#forestAboutPanelHq .hq-room-detail > p:not(.hq-detail-eyebrow) { margin: 8px 0; color: var(--hq-muted); font-size: 17px; line-height: 1.9; }
#forestAboutPanelHq .hq-room-detail > p.hq-room-status { margin-top: 14px; color: var(--hq-gold); font-size: 13px; }
#forestAboutPanelHq .hq-archive-action { margin: 16px 0 0; padding: 10px 16px; border: 1px solid var(--hq-line); border-radius: 999px; background: transparent; color: var(--hq-ink); font: inherit; font-size: 14px; cursor: pointer; }
#forestAboutPanelHq .hq-archive-action[hidden] { display: none; }
#forestAboutPanelHq .hq-plan-footer { padding: 18px 0; border-top: 1px solid var(--hq-line); color: var(--hq-muted); text-align: center; font-size: 12px; letter-spacing: .08em; }
body.night-mode #forestAboutPanelHq { --hq-ink: #e5e9df; --hq-muted: #b1bba9; --hq-line: #42503c; --hq-gold: #ceb478; background: transparent; }
body.night-mode #forestAboutPanelHq .hq-plan-art { filter: brightness(.75) saturate(.75); }
body.night-mode #forestAboutPanelHq .hq-map-room > span,
body.night-mode #forestAboutPanelHq .hq-map-caption { background: rgba(32,41,30,.92); color: #edf0e4; }
body.night-mode #forestAboutPanelHq .hq-map-room[aria-pressed="true"] { border-color: #f1c763; }
@media (max-width: 700px) {
    #forestAboutPanelHq { padding: 20px 4px 0; }
    #forestAboutPanelHq .hq-plan-heading { margin-bottom: 20px; }
    #forestAboutPanelHq .hq-plan-heading > p:last-child { font-size: 14px; }
    #forestAboutPanelHq .hq-map-room { padding: 0; }
    #forestAboutPanelHq .hq-map-room > span,
    #forestAboutPanelHq .hq-map-room small { display: none; }
    #forestAboutPanelHq .hq-map-caption { font-size: 9px; gap: 4px; }
    #forestAboutPanelHq .hq-map-caption i { width: 7px; height: 7px; }
    #forestAboutPanelHq .hq-zone-controls { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 14px; }
    #forestAboutPanelHq .hq-zone-controls button { justify-content: center; padding: 8px 3px; font-size: 13px; }
    #forestAboutPanelHq .hq-zone-controls span { display: none; }
    #forestAboutPanelHq .hq-mobile-rooms { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-bottom: 20px; }
    #forestAboutPanelHq .hq-mobile-rooms button { min-height: 48px; margin: 0; padding: 8px 10px; border: 1px solid var(--hq-line); border-radius: 8px; background: transparent; color: var(--hq-muted); font: inherit; font-size: 13px; line-height: 1.4; cursor: pointer; }
    #forestAboutPanelHq .hq-mobile-rooms button[aria-pressed="true"] { border-color: var(--hq-gold); color: var(--hq-ink); background: rgba(165,131,59,.09); }
    #forestAboutPanelHq .hq-plan-instruction { gap: 10px; margin: 16px 0; font-size: 12px; }
    #forestAboutPanelHq .hq-room-detail { padding: 22px 4px; }
    #forestAboutPanelHq .hq-room-detail > p:not(.hq-detail-eyebrow) { font-size: 15px; }
    #forestAboutPanelHq .hq-room-detail > p.hq-room-status { font-size: 12px; }
}