:root {
        --bg: #070f24;
        --bg-1: #040a18;
        --surface: #0e1c3a;
        --surface-2: #15284d;
        --line: rgba(150, 180, 230, .12);
        --line-hot: rgba(255, 200, 70, .42);
        --line-blue: rgba(120, 170, 255, .26);
        --text: #e7edff;
        --muted: #aebdd8;
        --dim: #8494b4;
        --red: #cf982e;
        --red-2: #ffe487;
        --red-soft: #ffd97a;
        --blue: #aac7fe;
        --gold: #ffe487;
        --display: "Space Grotesk", "Noto Sans KR", system-ui, sans-serif;
        --mono: "JetBrains Mono", monospace;
        --body: "Noto Sans KR","Noto Sans JP","Noto Sans TC","Noto Sans Thai","Noto Sans",system-ui,sans-serif;
        color-scheme: dark;
      }
      * { box-sizing: border-box; }
      /* 운영자가 콘솔에서 글자 크기(--ui-scale)를 조절하면 전체가 함께 커진다 */
      html { scroll-behavior: smooth; font-size: calc(17px * var(--ui-scale, 1)); overflow-x: clip; }
      body {
        margin: 0; min-width: 240px;
        background: var(--bg); color: var(--text);
        font-family: var(--body); font-size: 1rem; line-height: 1.6;
        -webkit-font-smoothing: antialiased; overflow-x: clip;
      }
      .backdrop {
        position: fixed; inset: 0; z-index: -2; pointer-events: none;
        background:
          radial-gradient(1000px 600px at 75% -10%, rgba(255, 200, 70, .14), transparent 60%),
          radial-gradient(800px 500px at 10% 8%, rgba(80, 130, 240, .12), transparent 55%),
          var(--bg);
      }
      /* 소식 상단 격자무늬 제거 */
      a { color: inherit; text-decoration: none; }
      img { display: block; max-width: 100%; }
      .wrap { width: min(100% - clamp(2rem, 7vw, 8rem), 1320px); margin-inline: auto; }
      .mono { font-family: var(--mono); font-size: .92rem; letter-spacing: .14em; text-transform: uppercase; color: var(--red-soft); }
      .eyebrow { font-family: var(--mono); font-size: .95rem; letter-spacing: .14em; text-transform: uppercase; color: var(--red-soft); margin: 0 0 .7rem; }

      /* utility bar */
      .utility {
        border-bottom: 1px solid var(--line);
        background: var(--bg-1);
        font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
      }
      .utility-inner { display: flex; align-items: center; gap: 1rem; height: 36px; color: var(--dim); }
      .utility a, .utility button { color: var(--muted); background: none; border: 0; cursor: pointer; font: inherit; padding: 0; transition: color .15s; }
      .utility a:hover, .utility button:hover { color: var(--red); }
      .utility .sp { margin-left: auto; }
      #userLabel { color: var(--blue); }

      /* header */
      header.site { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); background: rgba(7, 9, 15, .78); backdrop-filter: blur(18px); }
      .site-inner { display: flex; align-items: center; gap: 1.25rem; height: 64px; }
      .brand { display: flex; align-items: center; gap: .6rem; font-family: var(--display); font-weight: 700; letter-spacing: .22em; font-size: 1.05rem; }
      .brand .mk { color: var(--red); }
      nav.main { margin-left: 1rem; display: flex; gap: .1rem; flex-wrap: wrap; }
      nav.main a {
        font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
        color: var(--muted); padding: .5rem .65rem; border: 1px solid transparent;
        transition: color .18s, border-color .18s, background .18s;
      }
      nav.main a:hover { color: var(--text); border-color: var(--line-hot); background: rgba(255, 200, 70, .06); }
      nav.main a.back { color: var(--dim); }
      .hdr-right { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
      #notifybox { position: relative; }
      .notif-btn { position: relative; background: none; border: 0; color: var(--text); font-size: 1.2rem; cursor: pointer; line-height: 1; padding: .2rem; }
      .notif-badge { position: absolute; top: -2px; right: -4px; background: #ff5b5b; color: #fff; font-family: var(--mono); font-size: .58rem; font-weight: 700; border-radius: 999px; padding: .05rem .3rem; min-width: 1.1em; text-align: center; }
      .notif-pop { position: absolute; right: 0; top: 140%; width: min(22rem, calc(100vw - 2rem)); max-height: 70vh; overflow: auto; background: var(--surface); border: 1px solid var(--line-hot); border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.6); z-index: 60; }
      .notif-item { display: grid; gap: .2rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
      .notif-item:hover { background: rgba(255,255,255,.04); }
      .notif-item.unread { background: rgba(255,200,70,.08); }
      .ni-line { font-size: .86rem; color: var(--text); }
      .ni-sub { font-size: .74rem; color: var(--dim); }
      .notif-empty { padding: 1.2rem; color: var(--dim); font-size: .86rem; text-align: center; }
      .burger { display: none; margin-left: .4rem; width: 42px; height: 42px; border: 1px solid var(--line); background: transparent; color: var(--text); font-size: 1.15rem; cursor: pointer; }

      /* buttons / inputs */
      .btn {
        font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
        padding: .85rem 1.4rem; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer;
        transition: border-color .18s, background .18s, box-shadow .18s, transform .12s;
      }
      .btn.primary { background: linear-gradient(180deg, var(--red-2), var(--red)); border-color: var(--red); color: #161200; box-shadow: 0 6px 22px rgba(255, 200, 70, .3); }
      .btn.primary:hover { box-shadow: 0 10px 34px rgba(255, 200, 70, .5); }
      .btn:hover { border-color: var(--red-soft); }
      .btn:active { transform: translateY(1px); }
      input, textarea {
        width: 100%; border: 1px solid var(--line); background: #0a0d14; color: var(--text);
        padding: .8rem .9rem; font: inherit; border-radius: 0;
      }
      input:focus, textarea:focus { outline: none; border-color: var(--red); box-shadow: inset 0 0 0 1px rgba(255,200,70,.3); }
      textarea { resize: vertical; }
      label { display: grid; gap: .45rem; color: var(--muted); font-size: .9rem; }

      /* masthead with background media (운영자 설정 영상/GIF가 배경으로 재생) */
      /* 처음처럼: 영상을 전체 폭 배경으로(테두리 없음). 높이만 큰 화면에서 더 크게. */
      .masthead { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; min-height: clamp(720px, 112vh, 1320px); padding: clamp(4rem, 9vw, 8rem) 0; }
      .hero-bg { position: absolute; inset: 0; z-index: 0; }
      .hero-bg video, .hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
      .hero-bg.empty { background: transparent; }
      .hero-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none;
        background:
          linear-gradient(90deg, rgba(4,10,24,.94) 0%, rgba(4,10,24,.72) 42%, rgba(4,10,24,.30) 100%),
          linear-gradient(0deg, var(--bg) 1%, transparent 42%); }
      .masthead .mast-grid { position: relative; z-index: 2; }
      .mast-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: end; }
      .mast-chip { display: inline-flex; align-items: center; gap: .6rem; border: 1px solid var(--line-hot); background: rgba(255, 200, 70, .07); padding: .42rem .8rem; margin-bottom: 1.4rem; }
      .mast-chip .dot { width: 7px; height: 7px; background: var(--red); animation: pulse 2s infinite; }
      @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,200,70,.6);} 70% { box-shadow: 0 0 0 9px rgba(255,200,70,0);} 100% { box-shadow: 0 0 0 0 rgba(255,200,70,0);} }
      h1.mast-title { font-family: var(--display); font-weight: 700; font-size: clamp(3.2rem, 11vw, 8rem); line-height: .9; letter-spacing: -.04em; margin: 0 0 1.2rem; }
      .mast-lead { max-width: 36rem; color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.14rem); margin: 0 0 1.8rem; }
      .mast-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
      .spec-panel { border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface), var(--bg-1)); padding: 1.5rem; }
      .spec-panel::before { content: ""; display: block; height: 2px; background: var(--red); margin: -1.5rem -1.5rem 1.3rem; }
      .spec-row { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
      .spec-row:last-child { border-bottom: 0; }
      .spec-row dt { font-family: var(--mono); font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin: 0; }
      .spec-row dd { margin: 0; color: var(--text); text-align: right; font-size: 1.08rem; font-weight: 500; }
      #seasonLabel, #supportEmail { color: var(--blue); }

      /* quick menu */
      .quickmenu { display: grid; grid-template-columns: repeat(6, 1fr); gap: .7rem; padding-bottom: clamp(1.5rem, 4vw, 3rem); }
      .quickmenu a { border: 1px solid var(--line); background: var(--surface); padding: 1.1rem 1rem; min-height: 5.5rem; display: grid; align-content: start; gap: .35rem; transition: border-color .2s, transform .2s, background .2s; }
      .quickmenu a:hover { border-color: var(--line-hot); background: var(--surface-2); transform: translateY(-3px); }
      .quickmenu strong { font-family: var(--mono); font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; color: var(--red-soft); }
      .quickmenu span { color: var(--muted); font-size: .95rem; }

      /* 스토어 배지 */
      .store-badges { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
      .store-badge { display: inline-flex; align-items: center; gap: .6rem; padding: .55rem 1.1rem; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(7,12,26,.6); color: var(--text); transition: border-color .15s, transform .12s, background .15s; }
      .store-badge:hover { border-color: var(--line-hot); transform: translateY(-2px); background: rgba(20,30,60,.7); }
      .store-badge svg { color: var(--gold); flex: none; }
      .store-badge span { display: grid; line-height: 1.15; font-family: var(--display); font-weight: 700; font-size: 1rem; }
      .store-badge small { font-family: var(--mono); font-weight: 500; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }

      /* showcase (cookierun식 게임소개/캐릭터/세계관/미디어) */
      .imgslot { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(120% 130% at 75% -10%, rgba(255,200,70,.16), transparent 60%), linear-gradient(160deg, var(--surface-2), var(--bg-1)); display: grid; place-items: center; }
      .imgslot img, .imgslot video { width: 100%; height: 100%; object-fit: cover; display: block; }
      .slot-label { font-family: var(--mono); font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: var(--dim); border: 1px dashed var(--line-hot); padding: .5rem .9rem; border-radius: 999px; }
      .imgslot.filled .slot-label { display: none; }
      .intro-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; }
      .intro-tabs button { font-family: var(--mono); font-size: .8rem; letter-spacing: .04em; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: .55rem 1.1rem; cursor: pointer; transition: all .15s; }
      .intro-tabs button:hover { color: var(--text); border-color: var(--line-hot); }
      .intro-tabs button.on { background: linear-gradient(180deg, var(--red-2), var(--red)); border-color: var(--red); color: #161200; font-weight: 700; }
      .intro-panel { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(1.2rem,3vw,2.4rem); align-items: stretch; }
      .intro-media { aspect-ratio: 16/9; min-height: 14rem; }
      .intro-text { align-self: center; }
      .intro-text h3 { font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem,3vw,2rem); margin: 0 0 .8rem; }
      .intro-text p { color: var(--muted); font-size: 1.05rem; line-height: 1.8; margin: 0; }
      .char-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
      .char-card { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, var(--surface), var(--bg-1)); transition: transform .2s, border-color .2s; }
      .char-card:hover { transform: translateY(-5px); border-color: var(--line-hot); }
      .char-card .ph { aspect-ratio: 3/4; }
      .char-card .cb { padding: 1rem 1.1rem 1.3rem; }
      .char-card h3 { font-family: var(--display); font-weight: 700; font-size: 1.3rem; margin: 0 0 .3rem; }
      .char-card p { color: var(--muted); font-size: .9rem; margin: 0; }
      .world-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem,3vw,2.4rem); align-items: center; }
      .world-media { aspect-ratio: 16/10; min-height: 14rem; }
      .world-text p { color: var(--muted); font-size: 1.08rem; line-height: 1.9; margin: 0 0 1.4rem; }
      .media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
      .media-grid .mitem { position: relative; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #000; }
      .media-grid .mitem img, .media-grid .mitem video { width: 100%; height: 100%; object-fit: cover; }
      .media-grid .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: .5rem .7rem; font-size: .8rem; background: linear-gradient(0deg, rgba(0,0,0,.7), transparent); }
      @media (max-width: 900px) { .intro-panel, .world-wrap { grid-template-columns: 1fr; } .char-grid { grid-template-columns: repeat(2, 1fr); } .media-grid { grid-template-columns: repeat(2, 1fr); } }
      @media (max-width: 560px) { .char-grid { grid-template-columns: 1fr 1fr; } .media-grid { grid-template-columns: 1fr; } }

      /* section */
      section.block { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
      .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.8rem; flex-wrap: wrap; }
      .sec-head h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.7rem, 3.6vw, 2.6rem); letter-spacing: -.02em; line-height: 1.05; margin: .4rem 0 0; }
      .sec-head .actions { display: flex; gap: .6rem; flex-wrap: wrap; }
      .sec-head .actions a { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: .55rem .85rem; border: 1px solid var(--line); transition: color .15s, border-color .15s; }
      .sec-head .actions a:hover { color: var(--red); border-color: var(--line-hot); }

      /* portal layout (news + sidebar) */
      .portal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem); gap: 1.1rem; align-items: start; }
      .panel { border: 1px solid var(--line); background: var(--surface); }
      .side-box { border: 1px solid var(--line); background: var(--surface); padding: 1.4rem; }
      .side-box .eyebrow { margin-bottom: .3rem; }
      .side-box h2 { font-family: var(--display); font-weight: 600; font-size: 1.35rem; margin: 0 0 1rem; }
      .sidebar-stack { display: grid; gap: 1.1rem; }

      /* list items (rendered by JS) */
      .list-item { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 1rem; align-items: start; padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--line); }
      .list-item:last-child { border-bottom: 0; }
      .badge { align-self: start; font-family: var(--mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--red-soft); border: 1px solid var(--line-hot); background: rgba(255,200,70,.08); padding: .34rem .6rem; white-space: nowrap; }
      .list-item strong { display: block; color: var(--text); font-size: 1.2rem; font-weight: 600; margin-bottom: .3rem; }
      .list-item.is-click { cursor: pointer; transition: background .15s; }
      .list-item.is-click:hover { background: rgba(255,200,70,.06); }
      .post-dialog { width: min(52rem, calc(100vw - 2rem)); max-height: 88vh; overflow: auto; border: 1px solid var(--line-hot); background: var(--surface); color: var(--text); border-radius: var(--r); padding: clamp(1.3rem, 3vw, 2rem); }
      .post-dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(4px); }
      .pd-head { display: flex; align-items: flex-start; gap: 1rem; }
      .pd-head h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -.02em; margin: 0; flex: 1; }
      .pd-head .btn { flex: none; }
      .pd-meta { font-family: var(--mono); font-size: .78rem; color: var(--dim); margin: .4rem 0 1.2rem; }
      .post-read { font-size: 1.05rem; line-height: 1.8; color: var(--text); }
      .post-read h1, .post-read h2, .post-read h3 { font-family: var(--display); font-weight: 600; margin: 1.2em 0 .5em; }
      .post-read p { margin: 0 0 1em; }
      .post-read a { color: var(--blue); text-decoration: underline; }
      .post-read img { max-width: 100%; border-radius: 10px; }
      .post-read iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 10px; }
      .post-read blockquote { margin: 0 0 1em; padding: .5em 1em; border-left: 3px solid var(--red); background: rgba(255,200,70,.06); color: var(--muted); }
      .post-read ul, .post-read ol { padding-left: 1.3em; margin: 0 0 1em; }
      .post-read pre { background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px; padding: 1em; overflow: auto; }
      .meta { color: var(--dim); font-size: .95rem; }
      .empty { color: var(--dim); padding: 1.3rem; font-size: .9rem; }
      .compact .list-item { grid-template-columns: auto minmax(0,1fr); padding: .9rem 0; }
      .compact .list-item time { display: none; }
      .compact { border: 0; }

      /* 썸네일 뉴스 목록 */
      .thumb-list { border: 1px solid var(--line); background: var(--surface); }
      .thumb-row { display: grid; grid-template-columns: 140px minmax(0,1fr) auto; gap: 1.1rem; align-items: center; padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .15s; }
      .thumb-row:last-child { border-bottom: 0; }
      .thumb-row:hover { background: rgba(255,200,70,.06); }
      .thumb-wrap { width: 140px; height: 84px; flex: none; border-radius: 6px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); }
      .thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
      .thumb-row:hover .thumb-img { transform: scale(1.05); }
      .thumb-ph { width: 100%; height: 100%; display: grid; place-items: center; color: var(--dim); }
      .thumb-body { display: grid; gap: .3rem; min-width: 0; justify-items: start; }
      .thumb-title { font-size: 1.05rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .thumb-date { font-family: var(--mono); font-size: .74rem; color: var(--dim); letter-spacing: .04em; }
      .thumb-stats { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; min-width: 3.5rem; }
      .ts-view, .ts-like { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--mono); font-size: .72rem; color: var(--dim); white-space: nowrap; }
      @media (max-width: 700px) { .thumb-stats { display: none; } }
      @media (max-width: 560px) {
        .thumb-row { grid-template-columns: 96px minmax(0,1fr); gap: .8rem; }
        .thumb-wrap { width: 96px; height: 58px; }
        .thumb-title { font-size: .95rem; }
      }

      /* coupon */
      .coupon-form { display: grid; gap: .9rem; }
      #couponMessage, #postMessage, #loginMessage { font-family: var(--mono); font-size: .76rem; color: var(--gold); min-height: 1em; margin: 0; }

      /* forum CTA */
      .forum-cta { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 14px; background: radial-gradient(120% 160% at 100% 0%, rgba(255,200,70,.14), transparent 55%), linear-gradient(180deg, var(--surface), var(--bg-1)); padding: clamp(1.5rem, 4vw, 2.4rem); transition: border-color .2s, transform .2s; }
      .forum-cta:hover { border-color: var(--line-hot); transform: translateY(-3px); }
      .forum-cta strong { font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -.02em; }
      .forum-cta p { color: var(--muted); margin: .6rem 0 0; max-width: 42rem; }
      .forum-cta-go { font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--red-soft); white-space: nowrap; }

      /* community */
      .tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
      .tabs button {
        font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
        padding: .6rem .9rem; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; transition: all .15s;
      }
      .tabs button:hover { color: var(--text); border-color: var(--line-hot); }
      .tabs button[aria-selected="true"] { background: var(--red); border-color: var(--red); color: #161200; font-weight: 700; }
      .community-grid { display: grid; grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
      .post-form { border: 1px solid var(--line); background: var(--surface); padding: 1.4rem; display: grid; gap: .9rem; }
      .post-list { display: grid; gap: .9rem; }
      .post-card { border: 1px solid var(--line); background: var(--surface); padding: 1.3rem; }
      .post-card h3 { font-family: var(--display); font-weight: 600; font-size: 1.15rem; margin: 0 0 .5rem; }
      .post-card p { color: var(--muted); margin: 0 0 .8rem; white-space: pre-wrap; }

      /* probability table */
      .table-wrap { border: 1px solid var(--line); background: var(--surface); overflow-x: auto; }
      table { width: 100%; border-collapse: collapse; min-width: 38rem; }
      th, td { text-align: left; padding: .95rem 1.2rem; border-bottom: 1px solid var(--line); }
      th { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--red-soft); background: var(--bg-1); }
      td { color: var(--muted); font-size: .92rem; }
      tr:last-child td { border-bottom: 0; }

      /* legal */
      .legal { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
      .legal article { border: 1px solid var(--line); background: var(--surface); padding: clamp(1.4rem, 3vw, 2rem); }
      .legal h2 { font-family: var(--display); font-weight: 600; font-size: 1.3rem; margin: 0 0 1rem; }
      .legal div { color: var(--muted); font-size: .94rem; line-height: 1.7; }

      /* dialog */
      dialog { width: min(30rem, calc(100vw - 2rem)); border: 1px solid var(--line-hot); background: var(--surface); color: var(--text); padding: 0; }
      dialog::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(4px); }
      .login-form { display: grid; gap: 1rem; padding: 1.8rem; }
      .login-form h2 { font-family: var(--display); font-weight: 600; font-size: 1.4rem; margin: 0; }
      .dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
      .dialog-actions .btn { padding: .7rem 1rem; }

      /* footer */
      footer.site { border-top: 1px solid var(--line); padding: clamp(2.5rem, 5vw, 3.5rem) 0 2.5rem; margin-top: clamp(2rem, 4vw, 3.5rem); }
      .foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; }
      .foot-brand .b { font-family: var(--display); font-weight: 700; letter-spacing: .2em; font-size: 1.1rem; margin-bottom: .8rem; }
      .foot-brand .b .mk { color: var(--red); }
      .foot-brand p { color: var(--dim); font-size: .88rem; max-width: 22rem; margin: 0; }
      .foot-col h5 { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin: 0 0 1rem; }
      .foot-col a { display: block; color: var(--muted); font-size: .9rem; padding: .28rem 0; transition: color .15s; }
      .foot-col a:hover { color: var(--red); }
      .foot-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2.4rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--dim); font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; }

      .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
      .reveal.in { opacity: 1; transform: none; }

      @media (max-width: 960px) {
        nav.main { display: none; }
        .burger { display: inline-flex; }
        nav.main.is-open { display: flex; flex-direction: column; gap: 0; position: absolute; top: 64px; left: 0; right: 0; background: rgba(7,9,15,.98); border-bottom: 1px solid var(--line); padding: .5rem; }
        nav.main.is-open a { padding: .9rem 1rem; }
        .mast-grid, .portal, .community-grid, .legal { grid-template-columns: 1fr; }
        .quickmenu { grid-template-columns: repeat(3, 1fr); }
        .foot-grid { grid-template-columns: 1fr 1fr; }
      }
      @media (max-width: 560px) {
        .quickmenu { grid-template-columns: repeat(2, 1fr); }
        .foot-grid { grid-template-columns: 1fr; }
        .list-item { grid-template-columns: auto 1fr; }
        .list-item time { grid-column: 2; }
      }
      @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } .reveal { opacity: 1; transform: none; } }
    .langwrap{display:inline-flex;} .langsel{background:var(--bg-1);color:var(--text);border:1px solid var(--line);border-radius:8px;font-family:var(--mono);font-size:.68rem;padding:.35rem .5rem;cursor:pointer;letter-spacing:.04em;} .langsel:focus{outline:none;border-color:var(--red);}
    #authbox{display:flex;align-items:center;gap:.5rem;}
    #authbox .btn{font-family:var(--mono);font-weight:700;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;padding:.45rem .85rem;border-radius:999px;cursor:pointer;border:1px solid var(--line-2,rgba(150,180,230,.2));background:rgba(255,255,255,.04);color:var(--text);min-height:auto;}
    #authbox .btn.primary{background:linear-gradient(180deg,var(--red-2),var(--red));border-color:var(--red);color:#161200;}
    #authbox .btn.ghost:hover{border-color:var(--red-soft);}
    #authbox .who{display:inline-flex;align-items:center;gap:.45rem;background:none;border:0;cursor:pointer;color:var(--text);font-family:inherit;font-size:.82rem;padding:.2rem;}
    .opname{color:#ff5b5b!important;font-weight:700;display:inline-flex;align-items:center;gap:.35rem;}
    .opname *{color:#ff5b5b!important;}
    .opbadge{font-family:var(--mono,monospace);font-size:.56rem;letter-spacing:.06em;background:#ff5b5b;color:#fff!important;border-radius:999px;padding:.1rem .4rem;font-weight:700;}
    #authbox .who:hover{color:var(--red-soft);}
    .avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;font-family:var(--display);font-weight:700;color:#161200;background:linear-gradient(145deg,var(--red-2),var(--red));font-size:.9rem;}
    .avatar.sm{width:24px;height:24px;font-size:.72rem;} .avatar.lg{width:84px;height:84px;font-size:2rem;}
    .avatar.has-img{background-size:cover;background-position:center;color:transparent;}
    .pf-row{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;} .pf-actions{display:flex;flex-direction:column;gap:.4rem;}
    input,textarea,select{color:var(--text);} ::placeholder{color:var(--dim);opacity:1;} input:-webkit-autofill,textarea:-webkit-autofill{-webkit-text-fill-color:var(--text)!important;-webkit-box-shadow:0 0 0 1000px var(--bg-1) inset!important;caret-color:var(--text);}