/* Private inquiry sheet, admin 문의 tab and the small pieces around them (docs/support_hub.md). Loaded after refine.css.
   docs/support_reference.png gives the structure only (grip, title + one line, fields, counter, full-width submit); the
   look is this site's: serif headings, hairline rules, field tokens and pill buttons, in both colour modes.
   Phones: a sheet rising from the bottom edge. Wider screens: a 560px sheet low in the middle. */

/* ---------- the sheet inside #dialog */
#dialog.support-dialog{position:fixed;inset:auto 0 0;width:min(560px,100vw);max-width:100vw;height:auto;max-height:88vh;max-height:88dvh;margin:0 auto;padding:0;border:0;border-radius:var(--r-l) var(--r-l) 0 0;background:var(--paper);color:var(--ink);box-shadow:0 -24px 64px -36px #18243a80;overflow:hidden}
#dialog.support-dialog[open]{display:flex;flex-direction:column}
#dialog.support-dialog #close-dialog{display:none}
#dialog.support-dialog #dialog-body{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
@media(min-width:701px){#dialog.support-dialog{inset:auto 0 4vh;border-radius:var(--r-l);box-shadow:0 40px 90px -30px #18243a80}}
.support-sheet{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.support-grip{flex:none;width:40px;height:4px;margin:10px auto 0;border-radius:2px;background:var(--line-2)}
.support-head{flex:none;display:grid;grid-template-columns:auto minmax(0,1fr) 44px;align-items:start;gap:4px;padding:6px 12px 12px;border-bottom:var(--rule)}
.support-heading{min-width:0;padding-top:8px}
.support-heading h2{margin:0;font-family:var(--serif-ko);font-size:20px;font-weight:400;letter-spacing:-.01em}
.support-heading h2:focus{outline:0}
.support-heading h2:focus-visible{outline:2px solid var(--brand-ink);outline-offset:4px}
.support-heading p{margin:4px 0 0;font-size:12px;line-height:1.6;color:var(--muted)}
.support-icon{display:grid;place-items:center;width:44px;height:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:50%;background:none;color:var(--ink-2)}
.support-icon:hover{background:var(--mist);color:var(--ink)}
.support-icon:active{transform:none}
.support-icon .icon{width:18px;height:18px}
.support-icon.is-empty{width:12px;min-height:0}
.support-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 24px 20px;scrollbar-width:thin}
.support-foot{flex:none;padding:12px 24px calc(14px + env(safe-area-inset-bottom));border-top:var(--rule);background:var(--paper)}
.support-foot .primary{width:100%;min-height:52px;margin:0;border-radius:999px;font-size:15px;font-weight:600}
.support-foot .primary[aria-disabled=true]{opacity:.7;cursor:progress}

/* status in words and colour */
.support-status{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;border:1px solid transparent;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.support-status.is-pending{background:var(--mist);color:var(--ink-2)}
.support-status.is-answered{background:var(--ink);color:var(--on-ink)}

/* states */
.support-note{margin:8px 0;font-size:13px;color:var(--muted)}
.support-problem{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;margin:0 0 12px;font-size:13px;color:var(--danger)}
.support-problem p{margin:0}
.support-empty,.support-guest{padding:28px 0 12px;text-align:center}
.support-empty p,.support-guest p{margin:0 0 6px;font-family:var(--serif-ko);font-size:17px;color:var(--ink-2)}
.support-empty small,.support-guest small{display:block;max-width:30em;margin:0 auto;font-size:12px;line-height:1.7}
.support-flash{margin:0 0 12px;font-size:13px;font-weight:600;color:var(--brand-ink)}
.support-flash:empty,.support-form-error:empty,.admin-inquiry-message:empty{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* my inquiries */
.support-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.support-item{display:grid;grid-template-columns:auto minmax(0,1fr) 16px;grid-template-areas:"status title icon" ". meta icon";align-items:center;gap:2px 12px;width:100%;min-height:64px;margin:0;padding:12px 2px;border:0;border-bottom:var(--rule);border-radius:0;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.support-item:hover{background:var(--wash)}
.support-item:active{transform:none}
.support-item>.support-status{grid-area:status}
.support-item-title{grid-area:title;min-width:0;overflow:hidden;font-family:var(--serif-ko);font-size:16px;text-overflow:ellipsis;white-space:nowrap}
.support-item>small{grid-area:meta;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.support-item>.icon{grid-area:icon;width:16px;height:16px;color:var(--brand-ink)}

/* new inquiry */
.support-form{display:grid;gap:6px;max-width:none;margin:0;padding:0;background:none}
.support-form>label{display:block;margin:12px 0 0;font-size:12px;font-weight:600;color:var(--ink-2)}
.support-form>label:first-child{margin-top:0}
.support-form :is(input,select,textarea){display:block;width:100%;max-width:none;min-height:48px;margin:0;font:inherit;font-size:16px;box-sizing:border-box}
.support-form textarea{min-height:168px;resize:vertical;line-height:1.7}
.support-form [aria-invalid=true],.admin-inquiry-detail [aria-invalid=true]{border-color:var(--danger)}
.support-sheet .field-error,.admin-inquiry-detail .field-error{margin:2px 0 0;font-size:12px;color:var(--danger)}
.support-meta{display:flex;align-items:flex-start;gap:12px}
.support-count{margin-left:auto;padding-top:2px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.support-hint{margin:10px 0 0;font-size:12px;line-height:1.6;color:var(--muted)}
.support-form-error{margin:6px 0 0;font-size:13px;font-weight:600;color:var(--danger)}

/* one inquiry: text only (pre-wrap), never HTML */
.support-detail h3{margin:10px 0 4px;font-family:var(--serif-ko);font-size:20px;font-weight:400;line-height:1.4;overflow-wrap:anywhere}
.support-detail-meta,.admin-inquiry-meta{margin:0;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.support-text{margin:14px 0 0;font-size:14px;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere}
.support-reply{margin-top:22px;padding:14px 16px;border-left:2px solid var(--brand-ink);border-radius:0 var(--r-s) var(--r-s) 0;background:var(--wash)}
.support-reply h4{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0;font-size:13px;font-weight:700;color:var(--brand-ink)}
.support-reply h4 time{font-size:11px;font-weight:500;color:var(--muted)}
.support-reply .support-text{margin-top:8px}
.support-waiting{margin:22px 0 0;padding-top:16px;border-top:var(--rule);font-size:13px;color:var(--muted)}

@media(max-width:700px){.support-body{padding:14px 20px 18px}.support-foot{padding-left:20px;padding-right:20px}}
@media(prefers-reduced-motion:no-preference){
 body:not(.motion-paused) #dialog.support-dialog[open]{animation:sheet-up .32s var(--ease)}
}
@keyframes sheet-up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@media(forced-colors:active){.support-status{border-color:CanvasText}.support-reply{border-left-color:CanvasText}}

/* ---------- "문의하기" in the drawer list: a button styled like the links next to it */
.drawer-links button{display:grid;grid-template-columns:minmax(0,1fr) 18px;align-items:center;gap:0 12px;width:100%;min-height:56px;margin:0;padding:8px 0;border:0;border-radius:0;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:color .2s}
.drawer-links button>span{font-family:var(--serif-ko);font-size:16px}
.drawer-links button>small{grid-column:1;font-size:12px;color:var(--muted)}
.drawer-links button>.icon{grid-column:2;grid-row:1/3;width:16px;height:16px;color:var(--brand-ink);transition:transform .25s var(--ease)}
.drawer-links button:hover{background:none;color:var(--brand-ink)}
.drawer-links button:hover>.icon{transform:translateX(2px)}
.drawer-links button:active{transform:none}

/* ---------- #about / #games: the way back to the hub, and #about's contact line */
.back-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:0 0 6px;color:var(--brand-ink);font-size:13px;font-weight:600}
.back-link:hover{color:var(--ink)}
.back-link .icon{width:16px;height:16px;transition:transform .25s var(--ease)}
.back-link:hover .icon{transform:translateX(-2px)}

/* ---------- admin 문의 tab */
.admin-inquiry-filters{display:flex;flex-wrap:wrap;gap:0 22px;margin:14px 0 10px}
.admin-inquiry-filters>button{display:inline-flex;align-items:baseline;gap:4px;min-height:44px;margin:0;padding:0;border:0;border-bottom:1px solid transparent;border-radius:0;background:none;color:var(--muted);font-family:var(--serif-ko);font-size:16px}
.admin-inquiry-filters>button small{font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600;color:var(--brand-ink);font-variant-numeric:tabular-nums}
.admin-inquiry-filters>button:hover{background:none;color:var(--ink)}
.admin-inquiry-filters>button[aria-pressed=true]{border-bottom-color:var(--ink);color:var(--ink)}
.admin-inquiry-filters>button:active{transform:none}
.admin-inquiry-message{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--brand-ink)}
.admin-inquiry-list{margin:0 0 18px;padding:0;list-style:none;border-top:1px solid var(--ink)}
.admin-inquiry-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 12px;width:100%;min-height:60px;margin:0;padding:12px 2px;border:0;border-bottom:var(--rule);border-radius:0;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.admin-inquiry-row:hover,.admin-inquiry-row[aria-expanded=true]{background:var(--wash)}
.admin-inquiry-row:active{transform:none}
.admin-inquiry-title{min-width:0;overflow:hidden;font-family:var(--serif-ko);font-size:16px;text-overflow:ellipsis;white-space:nowrap}
.admin-inquiry-row>.admin-inquiry-meta{grid-column:2}
.admin-inquiry-detail h3{margin:10px 0 4px;font-family:var(--serif-ko);font-size:20px;font-weight:400;overflow-wrap:anywhere}
.admin-inquiry-detail h3:focus{outline:0}
.admin-inquiry-detail h3:focus-visible{outline:2px solid var(--brand-ink);outline-offset:4px}
.admin-inquiry-detail form{display:grid;gap:6px;max-width:none;margin:18px 0 0;padding:16px 0 0;border-top:var(--rule);background:none}
.admin-inquiry-detail label{font-size:12px;font-weight:600;color:var(--ink-2)}
.admin-inquiry-detail textarea{width:100%;max-width:none;min-height:150px;box-sizing:border-box;font:inherit;font-size:15px;line-height:1.7;resize:vertical}
.admin-inquiry-detail form>.primary{justify-self:start;min-height:44px;border-radius:999px}
.admin-inquiry-detail form>.primary[aria-disabled=true]{opacity:.7;cursor:progress}