/* 다낭 야전사령부 공개 웹.
   CSP: style-src 'self' / img-src 'self' — 인라인 스타일, data: 이미지, 외부 폰트를 쓰지 않는다. */

/* ── Tokens ─────────────────────────────────────────────── */
:root{
  color-scheme:dark;
  --bg:#0b0f11;
  --surface:#12181c;
  --surface-2:#171d22;
  --surface-3:#1e272d;
  --ink:#e9ecee;
  --ink-soft:#c3ccd2;
  --muted:#82909b;
  --line:#242b31;
  --line-soft:#1a2126;
  --line-strong:#35414a;
  --accent:#b84944;
  --accent-top:#bf4e48;
  --accent-bottom:#ab423e;
  --accent-ring:#e7a49e;
  --gold:#f4c95d;
  --radius-s:8px;
  --radius-m:12px;
  --radius-l:16px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Noto Sans KR","Malgun Gothic",sans-serif;
  background:var(--bg);
  color:var(--ink);
  scrollbar-color:#2c363d var(--bg);
  scroll-padding-top:72px;
  -webkit-text-size-adjust:100%;
}

/* ── Base ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
img{-webkit-user-drag:none}
::selection{background:#b8494470;color:#fff}
:where(a,button,input,summary):focus-visible{outline:2px solid var(--accent-ring);outline-offset:3px}
[hidden]{display:none!important}

.shell{width:min(1420px,calc(100% - 72px));margin:auto}

/* ── Buttons (공통 강조 버튼) ────────────────────────────── */
.inquiry,.card-inquiry,.community-enter,.fixed-inquiry button,.fixed-inquiry a,.signup-submit,.member-login:not(:disabled){
  border:0;
  background:linear-gradient(180deg,var(--accent-top),var(--accent-bottom));
  color:#fff;
  box-shadow:inset 0 1px 0 #ffffff24,inset 0 -1px 0 #0000002e,0 1px 2px #00000059;
  transition:filter .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
.inquiry:active,.card-inquiry:active,.community-enter:active,.fixed-inquiry button:active,.fixed-inquiry a:active,.signup-submit:active,.member-login:not(:disabled):active{
  transform:translateY(0) scale(.985);
  filter:brightness(.96);
  transition-duration:.06s;
}
@media(hover:hover){
  .inquiry:hover,.card-inquiry:hover,.community-enter:hover,.fixed-inquiry button:hover,.fixed-inquiry a:hover,.signup-submit:hover,.member-login:not(:disabled):hover{
    filter:brightness(1.1);
    transform:translateY(-1px);
    box-shadow:inset 0 1px 0 #ffffff2e,inset 0 -1px 0 #0000002e,0 8px 18px -8px #b84944b3;
  }
}

/* ── Header ─────────────────────────────────────────────── */
.header{min-height:110px;display:flex;align-items:center;gap:30px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:14px;white-space:nowrap;font-size:23px;letter-spacing:-1px;border-radius:6px;transition:opacity .2s var(--ease)}
.brand img{width:54px;height:54px;border-radius:9px;object-fit:cover}
@media(hover:hover){.brand:hover{opacity:.86}}

.header form{position:relative;display:flex;align-items:center;max-width:560px;flex:1;background:var(--surface-2);border:1px solid transparent;border-radius:10px;padding:3px 5px 3px 40px;transition:background-color .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
.header form::before{content:"";position:absolute;left:15px;top:50%;width:13px;height:13px;margin-top:-8px;border:1.6px solid var(--muted);border-radius:50%;transition:border-color .2s var(--ease);pointer-events:none}
.header form::after{content:"";position:absolute;left:26px;top:50%;width:6px;height:1.6px;margin-top:3px;border-radius:1px;background:var(--muted);transform:rotate(45deg);transform-origin:left center;transition:background-color .2s var(--ease);pointer-events:none}
@media(hover:hover){.header form:hover{background:#1a2127}}
.header form:focus-within{background:#141a1f;border-color:#4a5964;box-shadow:0 0 0 4px #82909b1f}
.header form:focus-within::before{border-color:var(--ink-soft)}
.header form:focus-within::after{background:var(--ink-soft)}
.header input{width:100%;background:transparent;color:var(--ink);border:0;min-width:0;padding:13px 6px;outline:none;font-size:13px}
.header input::placeholder{color:#6f7d88;opacity:1}
.header form button{white-space:nowrap;flex-shrink:0;border:0;background:none;color:var(--muted);font-size:13px;padding:8px 12px;border-radius:7px;transition:background-color .2s var(--ease),color .2s var(--ease)}
.header form button:active{background:var(--surface-3);color:var(--ink)}
@media(hover:hover){.header form button:hover{background:var(--surface-3);color:var(--ink)}}

.inquiry{margin-left:auto;flex-shrink:0;border-radius:var(--radius-s);padding:12px 16px;font-size:13px;font-weight:700;white-space:nowrap}

/* ── Channel banner ─────────────────────────────────────── */
.channel-banner{position:relative;display:block;width:100%;aspect-ratio:10/1;margin-top:18px;border:1px solid #c5b98444;border-radius:var(--radius-m);overflow:hidden;background:#202a1c;isolation:isolate;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.channel-banner img{position:absolute;top:50%;left:0;display:block;width:100%;height:auto;transform:translateY(-50%);transition:transform .7s var(--ease-out),filter .3s var(--ease)}
.channel-banner::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(105deg,transparent 38%,#ffffff26 50%,transparent 62%);transform:translateX(-120%);pointer-events:none}
.channel-banner:active img{filter:brightness(.94)}
@media(hover:hover){
  .channel-banner:hover{border-color:#c5b98488;box-shadow:0 14px 34px -18px #000000e6}
  .channel-banner:hover img{transform:translateY(-50%) scale(1.02);filter:brightness(1.07)}
  .channel-banner:hover::after{transform:translateX(120%);transition:transform .95s var(--ease)}
}

/* ── Categories (스크롤 시 상단 고정) ─────────────────────── */
.categories{position:sticky;top:0;z-index:30;display:flex;gap:24px;overflow:auto;white-space:nowrap;border-bottom:1px solid var(--line);background:var(--bg);box-shadow:0 0 0 100vmax var(--bg);clip-path:inset(0 -100vmax);scrollbar-width:none;overscroll-behavior-x:contain}
.categories::-webkit-scrollbar{display:none}
.categories a,.categories .category-entry{flex-shrink:0;padding:20px 0 17px;border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);font-size:13px;transition:color .2s var(--ease),border-color .25s var(--ease)}
.categories a:focus-visible,.categories .category-entry:focus-visible{outline-offset:-3px;border-radius:5px}
.categories a:active,.categories .category-entry:active{color:var(--ink)}
@media(hover:hover){
  .categories a:hover,.categories .category-entry:hover{color:var(--ink-soft);border-bottom-color:#35414a}
}
.categories a.active{color:var(--ink);font-weight:600;border-bottom-color:#c75c51}

/* ── Layout ─────────────────────────────────────────────── */
.page-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:28px;align-items:start}
.main-content{min-width:0}
.right-column{min-width:0;padding:40px 0;display:flex;flex-direction:column;gap:18px}
@media(min-width:901px) and (min-height:680px){.right-column{position:sticky;top:30px}}

/* ── Listing ────────────────────────────────────────────── */
.listing{margin:40px 0 48px}
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:19px}
.section-heading h1,.section-heading h2{font-size:20px;margin:0;letter-spacing:-.6px;line-height:1.3;word-break:keep-all}
.section-heading h1::before,.section-heading h2::before{content:"";display:inline-block;width:3px;height:.9em;margin-right:10px;border-radius:2px;background:linear-gradient(180deg,#d2645b,var(--accent));vertical-align:-.08em}
.section-heading small{font-size:12px;color:var(--muted);font-weight:400;margin-left:9px;letter-spacing:0;font-variant-numeric:tabular-nums}
.section-heading a{flex-shrink:0;margin-right:-10px;padding:7px 10px;border-radius:999px;font-size:12px;color:var(--muted);transition:color .2s var(--ease),background-color .2s var(--ease)}
.section-heading a:active{background:var(--surface-2);color:var(--ink)}
@media(hover:hover){.section-heading a:hover{background:var(--surface-2);color:var(--ink)}}

.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}

/* ── Card ───────────────────────────────────────────────── */
.card{display:flex;flex-direction:column;min-width:0}
.card-detail{display:block;flex:1;border-radius:var(--radius-m);outline:none}
.card-media{position:relative;height:225px;border-radius:var(--radius-m);background:linear-gradient(140deg,#1b2328,#141a1e);overflow:hidden;isolation:isolate;transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.card-media::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px #ffffff12;pointer-events:none;transition:box-shadow .3s var(--ease)}
.card .card-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.card h3{font-size:15px;line-height:1.6;margin:10px 0 4px;letter-spacing:-.2px;word-break:keep-all;overflow-wrap:anywhere;transition:color .2s var(--ease)}
.card p{font-size:11px;color:var(--muted);margin:0;line-height:1.5;overflow-wrap:anywhere}
.card .rating-summary{line-height:1.6;margin:2px 0 3px;font-variant-numeric:tabular-nums}
.card-detail:focus-visible .card-media{outline:2px solid var(--accent-ring);outline-offset:3px}
.card-detail:active .card-media{transform:scale(.985)}
@media(hover:hover){
  .card-detail:hover .card-media{transform:translateY(-3px);box-shadow:0 18px 32px -18px #000000f2}
  .card-detail:hover .card-media::after{box-shadow:inset 0 0 0 1px #ffffff2b}
  .card-detail:hover .card-media img{transform:scale(1.045)}
  .card-detail:hover h3{color:#fff}
}
.card-inquiry{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:12px;padding:10px 14px;border-radius:var(--radius-s);font-size:13px;font-weight:700}
.card-inquiry:focus-visible{outline:2px solid #fff;outline-offset:3px}

.rating-score{color:var(--gold);font-size:13px;font-weight:700}
.rating-scale,.rating-reviews{color:var(--muted);font-weight:400}

.empty{padding:65px 0;color:var(--muted);text-align:center;font-size:14px;line-height:1.7;word-break:keep-all}

/* ── Sidebar ────────────────────────────────────────────── */
.sidebar-box{border:1px solid #2a333a;border-radius:var(--radius-m);background:var(--surface);overflow:hidden;box-shadow:0 1px 0 #ffffff08 inset}
.sidebar-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 17px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#1a2329,#161e24)}
.sidebar-heading h2{margin:0;font-size:15px;font-weight:700;letter-spacing:-.3px}
.preparing-label{font-size:11px;color:#a6b3bc;border:1px solid #3a474f;border-radius:3px;padding:3px 5px}

.login-fields{display:grid;grid-template-columns:minmax(0,1fr) 66px;grid-template-rows:38px 38px;gap:6px;padding:17px 17px 0}
.login-fields>label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.login-fields input{grid-column:1;width:100%;min-width:0;padding:9px 10px;border:1px solid var(--line-strong);border-radius:6px;background:#0d1419;color:#c3cdd4;font-size:12px;opacity:1;-webkit-text-fill-color:#aebbc5;outline:none;transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease)}
.login-fields input::placeholder{color:#93a2ad;opacity:1}
.login-fields input:not(:disabled):focus-visible{border-color:#c0635c;box-shadow:0 0 0 3px #b8494433;background:#0b1115;-webkit-text-fill-color:var(--ink)}
@media(hover:hover){.login-fields input:not(:disabled):hover{border-color:#47565f}}
.member-login{grid-column:2;grid-row:1/3;border:1px solid #99433f;border-radius:6px;background:#783c38;color:#edd9d7;font-size:13px;font-weight:700}
.member-login:disabled{cursor:default}
.member-options{padding:11px 17px;font-size:11px;color:#91a1ad}
.member-options label{display:flex;align-items:center;gap:5px;width:fit-content}
.member-options input{margin:0;accent-color:var(--accent)}
.member-links{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 17px;border-top:1px solid var(--line);font-size:11px;color:#9caab5}
.member-links [aria-disabled],.latest-more{cursor:default}
.member-links button{padding:0;border:0;background:none;color:#c8d0d5;font-size:11px;border-radius:3px;transition:color .2s var(--ease)}
.member-links button:disabled{color:#7f8f99;cursor:default}
@media(hover:hover){.member-links button:not(:disabled):hover{color:#fff;text-decoration:underline;text-underline-offset:3px}}
.member-status{font-size:11px;color:#9eb1a2}
.member-notice{margin:0;padding:0 17px 15px;font-size:11px;color:#82929e;line-height:1.6;word-break:keep-all}
.member-notice:empty{display:none}
.member-profile{display:flex;flex-direction:column;gap:8px;padding:20px 17px 15px;overflow-wrap:anywhere}
.member-profile strong{font-size:15px;letter-spacing:-.2px}
.member-profile span{font-size:12px;color:var(--muted)}
.member-logout{display:block;width:calc(100% - 34px);margin:0 17px 17px;padding:10px;border:1px solid #3b4853;border-radius:6px;background:#1d2931;color:var(--ink);font-size:12px;transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.member-logout:not(:disabled):active{background:#17222a}
@media(hover:hover){.member-logout:not(:disabled):hover{background:#24333d;border-color:#4a5a66}}

.latest-more{font-size:11px;color:#93a1ac;white-space:nowrap}
.latest-empty{padding:23px 15px 27px;text-align:center}
.latest-empty-icon{display:block;font-size:28px;color:#50616d;line-height:1;margin-bottom:10px}
.latest-empty p{margin:0 0 7px;font-size:12px;color:#a8b5be}
.latest-empty small{font-size:11px;color:#7f909c;line-height:1.7}

/* ── Detail ─────────────────────────────────────────────── */
.detail{max-width:850px;margin:28px auto 60px}
.back{display:inline-block;margin:0 0 18px -10px;padding:6px 10px;border-radius:999px;font-size:14px;color:var(--muted);transition:color .2s var(--ease),background-color .2s var(--ease),transform .2s var(--ease)}
.back:active{background:var(--surface-2);color:var(--ink)}
@media(hover:hover){.back:hover{background:var(--surface-2);color:var(--ink);transform:translateX(-2px)}}
.gallery{display:flex;overflow:auto;scroll-snap-type:x mandatory;gap:16px;border-radius:14px;scrollbar-width:thin;scrollbar-color:#35414a transparent;overscroll-behavior-x:contain}
.gallery a{flex:0 0 100%;scroll-snap-align:start;border-radius:14px}
.gallery a:focus-visible{outline-offset:-3px}
.gallery img{display:block;width:100%;max-height:580px;object-fit:contain;background:#13181b;border-radius:14px}
.muted{color:var(--muted);font-size:13px;margin-top:30px}
.detail h1{font-size:28px;line-height:1.3;letter-spacing:-.7px;margin:12px 0 30px;word-break:keep-all;overflow-wrap:anywhere}
.fields{display:grid;gap:0}
.field{display:flex;align-items:baseline;gap:8px;padding:11px 0;border-top:1px solid var(--line-soft);line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere}
.field:first-child{border-top:0;padding-top:0}
.field a{text-decoration:underline;text-decoration-color:#82909b99;text-underline-offset:4px;transition:color .2s var(--ease),text-decoration-color .2s var(--ease)}
@media(hover:hover){.field a:hover{color:#fff;text-decoration-color:currentColor}}

.emoji-pending{width:15px;height:15px;display:inline-block;flex-shrink:0;border:2px solid #34414a;border-top-color:#a0b3be;border-radius:50%;animation:spin 1s linear infinite}
.inline-emoji{display:inline-flex;width:1.25em;height:1.25em;min-width:1.25em;align-items:center;justify-content:center;vertical-align:-.2em;border:0;animation:none}
.inline-emoji img{width:100%;height:100%;object-fit:contain}
.inline-emoji.pending{border:2px solid #a2ac9c55;border-top-color:currentColor;border-radius:50%;animation:emoji-turn 1s linear infinite}
.inline-emoji.failed{opacity:.55}
.inline-emoji.ready{border:0;animation:none}

.visitor-reviews{margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.visitor-reviews h2{font-size:21px;letter-spacing:-.5px}
.visitor-reviews h2 small{font-size:13px;color:var(--muted);font-weight:400;letter-spacing:0;font-variant-numeric:tabular-nums}
.visitor-review{padding:22px 0;border-bottom:1px solid var(--line)}
.visitor-review:last-child{border-bottom:0}
.visitor-review header{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.visitor-review .rating-score{margin:8px 0 0;font-variant-numeric:tabular-nums}
.visitor-review .review-body{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.9;margin:10px 0 12px}
.visitor-review small{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.sample-label{border:1px solid #665c39;color:#e9ca7b;border-radius:5px;padding:4px 7px;font-size:11px}

.fixed-inquiry{position:fixed;z-index:40;bottom:0;left:0;right:0;background:#0f161bd9;-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border-top:1px solid #ffffff14;padding:12px max(20px,calc((100% - 810px)/2));padding-bottom:max(12px,env(safe-area-inset-bottom))}
.fixed-inquiry a,.fixed-inquiry button{display:block;width:100%;text-align:center;padding:15px;border-radius:10px;font-weight:700}
.has-detail{padding-bottom:90px}

/* ── Footer ─────────────────────────────────────────────── */
.footer{border-top:1px solid var(--line);padding:30px 0 38px;font-size:13px;color:var(--muted);letter-spacing:-.1px}

/* ── Dialogs ────────────────────────────────────────────── */
.community-open,.member-dialog-open{overflow:hidden}
.community-dialog,.member-dialog{width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;background:#151c22;color:var(--ink);overflow:auto;overscroll-behavior:contain;box-shadow:0 0 0 1px #ffffff0a inset,0 30px 90px -10px #000000cc;scrollbar-width:thin;scrollbar-color:#35414a transparent}
.community-dialog{position:fixed;border:1px solid #2c363e;border-radius:var(--radius-l)}
.member-dialog{border:1px solid #3b4853;border-radius:14px}
.community-dialog::backdrop,.member-dialog::backdrop{background:#000000bf;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.community-dialog:not([open]),.member-dialog:not([open]){pointer-events:none}

.community-dismiss{position:absolute;z-index:1;top:10px;right:10px;width:44px;height:44px;display:grid;place-items:center;border:1px solid #ffffff3d;border-radius:50%;background:#10171ecc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:26px;line-height:1;transition:background-color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.community-dismiss:active{transform:scale(.94)}
@media(hover:hover){.community-dismiss:hover{background:#1c2730f2;border-color:#ffffff73}}
.community-poster{display:block;width:100%;height:auto;max-height:57dvh;object-fit:contain;background:#0b0f11}
.community-copy{padding:28px 24px 24px}
.community-dialog:not(:has(.community-poster:not([hidden]))) .community-copy{padding-top:64px}
.community-venue{margin:0 0 8px;color:#c5cdd3;font-size:13px;overflow-wrap:anywhere}
.community-copy h2{font-size:23px;margin:0 0 12px;letter-spacing:-.5px;line-height:1.3}
.community-copy>p:last-of-type{margin:0;color:#b6c2cb;font-size:14px;line-height:1.7;word-break:keep-all}
.community-actions{display:flex;gap:10px;margin-top:22px}
.community-enter,.community-close{min-height:46px;display:flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:var(--radius-s);font-size:14px;font-weight:700}
.community-enter{flex:1}
.community-close,.signup-close{border:1px solid #3b4853;background:transparent;color:var(--ink);transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.community-close:active,.signup-close:not(:disabled):active{background:#ffffff0f}
@media(hover:hover){.community-close:hover,.signup-close:not(:disabled):hover{background:#ffffff0d;border-color:#51616d}}

.signup-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line)}
.signup-heading h2{font-size:21px;margin:0;letter-spacing:-.5px}
.signup-dismiss{width:38px;height:38px;border:0;border-radius:8px;background:transparent;color:var(--ink);font-size:27px;line-height:1;transition:background-color .2s var(--ease)}
.signup-dismiss:active{background:#ffffff14}
@media(hover:hover){.signup-dismiss:hover{background:#ffffff12}}
.member-dialog form{display:flex;flex-direction:column;padding:22px;gap:8px}
.member-dialog label{margin-top:10px;font-size:13px;font-weight:600}
.member-dialog label:first-child{margin-top:0}
.member-dialog input{width:100%;min-height:42px;padding:10px 12px;border:1px solid #40505c;border-radius:7px;background:#0d1419;color:var(--ink);font:inherit;font-size:14px;outline:none;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.member-dialog input:focus-visible{border-color:#c0635c;box-shadow:0 0 0 3px #b8494433}
@media(hover:hover){.member-dialog input:not(:disabled):hover{border-color:#566875}}
.member-dialog small{color:#93a4b0;font-size:11px;line-height:1.6}
.signup-feedback{margin:6px 0 0;color:#eeaaa5;font-size:12px;line-height:1.7}
.signup-feedback:empty{display:none}
.signup-actions{display:flex;gap:10px;margin-top:15px}
.signup-actions button{min-height:44px;border-radius:var(--radius-s);padding:11px 18px;font-size:14px}
.signup-submit{flex:1;font-weight:700}
.member-dialog button:disabled,.member-logout:disabled{opacity:.6;cursor:wait}

/* ── Motion ─────────────────────────────────────────────── */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes emoji-turn{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
@keyframes fade{from{opacity:0}}
@keyframes dock{from{opacity:0;transform:translateY(100%)}}

@media(prefers-reduced-motion:no-preference){
  /* 첫 표시에서만 재생한다. 목록은 주기적으로 다시 그려지므로 app.js가 .settled를 붙인 뒤에는 멈춘다. */
  :root:not(.settled) .section-heading,
  :root:not(.settled) .detail,
  :root:not(.settled) .empty{animation:fade .5s var(--ease) both}
  :root:not(.settled) .card{animation:rise .6s var(--ease-out) both}
  :root:not(.settled) .card:nth-child(2){animation-delay:.05s}
  :root:not(.settled) .card:nth-child(3){animation-delay:.1s}
  :root:not(.settled) .card:nth-child(4){animation-delay:.15s}
  :root:not(.settled) .card:nth-child(5){animation-delay:.2s}
  :root:not(.settled) .card:nth-child(6){animation-delay:.25s}
  :root:not(.settled) .card:nth-child(7){animation-delay:.3s}
  :root:not(.settled) .card:nth-child(n+8){animation-delay:.35s}
  :root:not(.settled) .fixed-inquiry{animation:dock .5s var(--ease-out) .15s both}

  /* 대화상자 열림·닫힘. 미지원 브라우저에서는 즉시 표시된다. */
  .community-dialog,.member-dialog{opacity:0;transform:translateY(14px) scale(.975);transition:opacity .22s var(--ease),transform .3s var(--ease-out),overlay .3s allow-discrete,display .3s allow-discrete}
  .community-dialog[open],.member-dialog[open]{opacity:1;transform:none}
  .community-dialog::backdrop,.member-dialog::backdrop{opacity:0;transition:opacity .25s var(--ease),overlay .3s allow-discrete,display .3s allow-discrete}
  .community-dialog[open]::backdrop,.member-dialog[open]::backdrop{opacity:1}
  @starting-style{
    .community-dialog[open],.member-dialog[open]{opacity:0;transform:translateY(14px) scale(.975)}
    .community-dialog[open]::backdrop,.member-dialog[open]::backdrop{opacity:0}
  }
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .inline-emoji.pending{border-style:dotted}
}

/* ── Responsive ─────────────────────────────────────────── */
@media(max-width:1200px) and (min-width:901px){
  .page-layout{gap:22px;grid-template-columns:minmax(0,1fr) 260px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .shell{width:calc(100% - 42px)}
  .header{min-height:96px;gap:16px}
  .brand{font-size:17px;gap:9px}
  .brand img{width:38px;height:38px}
  .inquiry{padding:10px;font-size:12px}
  .page-layout{grid-template-columns:minmax(0,1fr);gap:0}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .card-media{height:200px}
  .right-column{padding-top:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
}
@media(max-width:600px){
  .shell{width:calc(100% - 32px)}
  .header{flex-wrap:wrap;padding:18px 0 14px;gap:14px}
  .brand{flex:1}
  .header form{order:3;flex-basis:100%;max-width:none}
  .header input,.login-fields input,.member-dialog input{font-size:16px}
  .login-fields{grid-template-rows:44px 44px}
  .channel-banner{aspect-ratio:5/1;margin-top:14px;border-radius:10px}
  .categories{gap:22px}
  .categories a,.categories .category-entry{font-size:12px;padding:17px 0 14px}
  .listing{margin-top:29px}
  .section-heading h1,.section-heading h2{font-size:18px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
  .card-media{height:185px}
  .card h3{font-size:14px}
  .card-inquiry{padding:10px;font-size:12px}
  .right-column{grid-template-columns:minmax(0,1fr);padding-bottom:28px}
  .detail h1{font-size:24px}
  .field{font-size:14px}
  .gallery img{max-height:430px}
  .community-copy{padding:22px 18px 18px}
  .community-copy h2{font-size:21px}
  .community-actions{margin-top:18px}
}