/* AI Gate — devel.aigate.kr
 *
 * 2색 바는 AI Gate 원본을 따른다. 파랑 #1a1aff 는 흰 글자 대비 7.97 로 그대로 쓰고,
 * 마젠타는 원본 #d916d9 가 4.14 라 AA 에 걸려 같은 색조에서 명도만 낮춰 5.66 을 만들었다.
 */
:root{
  --bar1:#1a1aff; --bar2:#b415b4; --cursor:#b415b4;
  --bg:#f4f6f9; --card:#ffffff; --fg:#1c2430; --fg-dim:#55647a;
  --line:#dfe5ec; --badge:#eef1f6; --accent:#1a1ae0; --danger:#b3261e;
  --lift:rgba(255,255,255,.92); --drop:rgba(16,32,48,.12);
}
@media (prefers-color-scheme:dark){
  :root{
    --bar1:#14149c; --bar2:#8f1090;
    --bg:#0e1319; --card:#161c25; --fg:#dfe6ee; --fg-dim:#9aabbe;
    --line:#28313d; --badge:#1e2732; --accent:#7f9bff; --danger:#f2857c;
    --lift:rgba(255,255,255,.07); --drop:rgba(0,0,0,.45);
  }
}
*{box-sizing:border-box}
html,body{height:100%}
html{color-scheme:light dark}
body{margin:0;display:flex;flex-direction:column;overflow:hidden;
  background:var(--bg);color:var(--fg);
  font:15px/1.6 -apple-system,"Segoe UI","Apple SD Gothic Neo","Noto Sans KR",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--accent)}

/* ── 역할별 색 — A02 배너색상안 「신호등」 안 ────────────────
   상태의 뜻을 색으로 말한다. 파랑=중립, 초록=안전, 붉은색=주의.
   관리자 화면에서는 권한 강등·계정 차단·문서 덮어쓰기 같은 파괴적 동작을 하게 된다.
   화면 색이 「지금 위험한 자리에 있다」고 상시로 알려주는 편이 사고를 줄인다.

   색은 서버가 역할을 보고 정한다. 사용자가 바꿀 수 없다 —
   관리자 색이 보이면 실제로 관리자 권한이라는 뜻이어야 한다.

   대비는 전부 계산해서 맞췄다. 바 위 흰 글자 5.09~13.73,
   강조색은 흰 바탕과 사이드바 둘 다 4.5 이상, 흐린 글자도 4.5 이상.
   바탕을 더 진하게 하려면 --fg-dim 도 함께 내릴 것. */
body.role-user{
  --bar1:#093425; --bar2:#0e7c6e; --cursor:#0e7c6e;
  --accent:#0d7063; --side-bg:#dde3e0; --side-line:#c5cfcb; --side-guide:#b5c2be;
}
body.role-admin{
  --bar1:#5c1020; --bar2:#9d174d; --cursor:#9d174d;
  --accent:#9d174d; --side-bg:#e8dee0; --side-line:#d9c7cb; --side-guide:#ceb7bc;
}
@media (prefers-color-scheme:dark){
  body.role-user { --bar1:#06251a; --bar2:#0b5f55; --accent:#5fd3bd;
                   --side-bg:#12201c; --side-line:#263832; --side-guide:#2f443d}
  body.role-admin{ --bar1:#420b17; --bar2:#7a1240; --accent:#f0839f;
                   --side-bg:#20161a; --side-line:#3a2830; --side-guide:#46303a}
}

/* 컴포넌트로 흘려 넣는다. 컴포넌트가 갖고 있는 역할 색 규칙(chrome-admin 등)에
   지지 않도록 클래스를 하나 더 겹친다. */
.tp.chrome-aigate{--tp-bar1:var(--bar1); --tp-bar2:var(--bar2); --tp-cursor:var(--cursor)}
.tm{--tm-bar1:var(--bar1); --tm-bar2:var(--bar2); --tm-accent:var(--accent);
    --tm-bg:var(--side-bg,#d5e1ef); --tm-line:var(--side-line,#bfd0e4);
    --tm-guide:var(--side-guide,#aec1d8)}
.sidemenu{background:var(--side-bg,#d5e1ef)}

.stage{flex:1;min-height:0;display:flex}
.side-host{display:flex;min-height:0}
main.doc{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--card)}

.docbar{flex:none;display:flex;align-items:center;gap:9px;padding:9px 18px;
  border-bottom:1px solid var(--line);background:var(--bg);
  box-shadow:inset 0 -1px 0 var(--lift)}
.crumb{flex:1;min-width:0;display:flex;align-items:center;gap:7px;
  font-size:.8em;color:var(--fg-dim);white-space:nowrap;overflow:hidden}
.crumb i{font-style:normal;opacity:.45}
.crumb b{font-weight:700;color:var(--fg);overflow:hidden;text-overflow:ellipsis}
.crumb-ico{flex:none;display:inline-flex;align-items:center;font-size:13px;line-height:1}
.crumb-ico svg{width:15px;height:15px;display:block}

.btn{flex:none;font:inherit;font-size:.8em;font-weight:600;padding:6px 12px;border-radius:7px;
  cursor:pointer;text-decoration:none;border:1px solid var(--line);
  background:var(--card);color:var(--fg);
  box-shadow:0 1px 2px var(--drop),inset 0 1px 0 var(--lift)}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--bar2);border-color:var(--bar2);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px var(--drop)}
.btn.primary:hover{filter:brightness(1.08);color:#fff}
.btn.danger{color:var(--danger);border-color:var(--line)}
.btn.danger:hover{border-color:var(--danger)}

.pane{flex:1;min-height:0;overflow:auto;padding:30px 34px 70px}
.pane.narrow{max-width:900px}

h1.title{margin:0 0 4px;font-size:1.75em;font-weight:700;letter-spacing:-.015em;
  display:flex;align-items:center;gap:11px}
h1.title .ico svg{width:26px;height:26px;display:block}
.meta{color:var(--fg-dim);font-size:.82em;margin:0 0 24px}

/* 문서 본문 */
.body h1,.body h2,.body h3{line-height:1.35;margin:1.8em 0 .55em;font-weight:700}
.body h1{font-size:1.6em}
.body h2{font-size:1.32em;padding-bottom:.3em;border-bottom:1px solid var(--line)}
.body h3{font-size:1.12em}
.body p{margin:.85em 0}
.body ul,.body ol{padding-left:1.6em;margin:.7em 0}
.body li{margin:.25em 0}
.body code{background:var(--badge);padding:.15em .4em;border-radius:4px;font-size:.88em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.body pre{background:var(--badge);border:1px solid var(--line);border-radius:8px;
  padding:14px 16px;overflow-x:auto}
.body pre code{background:none;padding:0}
.body blockquote{margin:1em 0;padding:.2em 1em;border-left:3px solid var(--accent);
  color:var(--fg-dim);background:var(--badge);border-radius:0 6px 6px 0}
.body table{border-collapse:collapse;font-size:.92em;margin:1.1em 0}
.body th,.body td{border:1px solid var(--line);padding:7px 12px;text-align:left}
.body th{background:var(--badge);font-weight:600}
.body img{max-width:100%;height:auto}

/* 목록 · 카드 */
.cards{list-style:none;margin:0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.cards a{display:block;padding:14px 16px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);color:inherit;text-decoration:none;
  box-shadow:0 1px 2px var(--drop),inset 0 1px 0 var(--lift)}
.cards a:hover{border-color:var(--accent)}
.cards .t{font-weight:600;margin-bottom:5px;display:flex;align-items:center;gap:8px}
.cards .t svg{width:16px;height:16px;flex:none}
.cards .d{font-size:.82em;color:var(--fg-dim)}

h2.sec{margin:28px 0 12px;font-size:.76em;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-dim);border-bottom:1px solid var(--line);padding-bottom:7px;
  box-shadow:0 1px 0 var(--lift)}
h2.sec:first-child{margin-top:0}

table.grid{width:100%;border-collapse:collapse;font-size:.9em;background:var(--card);
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
table.grid th,table.grid td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left}
table.grid th{background:var(--badge);font-weight:700;font-size:.9em;color:var(--fg-dim)}
table.grid tr:last-child td{border-bottom:0}
.chip{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.8em;font-weight:700;
  background:var(--badge);color:var(--fg-dim)}
.chip.admin{background:color-mix(in srgb,var(--bar2) 18%,transparent);color:var(--bar2)}
.chip.off{background:color-mix(in srgb,var(--danger) 15%,transparent);color:var(--danger)}

.note{padding:12px 15px;border-radius:9px;margin:0 0 18px;font-size:.88em;
  border:1px solid var(--line);background:var(--card)}
.note.err{border-color:var(--danger);color:var(--danger)}
.note.ok{border-color:#0f7b4f;color:#0f7b4f}
@media (prefers-color-scheme:dark){ .note.ok{border-color:#54c48c;color:#54c48c} }

/* 입력 */
label.f{display:block;margin-bottom:14px;font-size:.86em;font-weight:600;color:var(--fg-dim)}
label.f input,label.f select,label.f textarea{display:block;width:100%;margin-top:6px;
  font:inherit;font-size:15px;color:var(--fg);background:var(--card);
  border:1px solid var(--line);border-radius:8px;padding:9px 11px;
  box-shadow:inset 0 1px 2px rgba(16,32,48,.06)}
label.f textarea{min-height:60vh;resize:vertical;line-height:1.7;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px}
label.f input:focus,label.f select:focus,label.f textarea:focus{outline:0;
  border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
form.row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
form.row label.f{margin-bottom:0;flex:1;min-width:160px}

/* ── 로그인 화면 ──────────────────────────────────────────
   본 사이트(파랑 #1a1aff · 마젠타 #b415b4)와 색을 다르게 쓴다.
   아직 안으로 들어오지 않았다는 것을 글자로 읽기 전에 색으로 알아채게 하려는 것이다.
   배너 진남색 #0d2b6b (흰 글자 13.33) · 메뉴바 강청색 #1857a4 (7.15).
   두 색이 서로도 다르고 본 사이트와도 다르다. */
body.gate{
  --gate1:#0d2b6b; --gate2:#475569;   /* 신호등 안의 비인증 — 남색 + 회색 */
  display:flex;flex-direction:column;min-height:100vh;overflow:auto;
  background:var(--bg)}
@media (prefers-color-scheme:dark){
  body.gate{--gate1:#0a2050; --gate2:#3a4657}
}
.gate-bar1{
  flex:none;color:#fff;padding:0 24px;height:76px;display:flex;align-items:center;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--gate1) 90%,#fff) 0%, var(--gate1) 60%,
    color-mix(in srgb,var(--gate1) 93%,#000) 100%)}
.gate-bar1 .in{display:flex;align-items:baseline;gap:12px;
  max-width:1000px;margin:0 auto;width:100%}
.gate-bar1 b{font-size:25px;font-weight:800;letter-spacing:-.02em;font-style:italic}
.gate-bar1 span{font-size:12px;opacity:.8;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.gate-bar2{
  flex:none;background:var(--gate2);color:#fff;
  border-top:2px solid rgba(255,255,255,.35);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.18)}
.gate-bar2 .in{max-width:1000px;margin:0 auto;padding:9px 24px;
  font-size:.8em;font-weight:700;letter-spacing:.03em}

.gate-body{flex:1;display:grid;place-items:center;padding:36px 20px 60px}
.gate-body .box{
  width:100%;max-width:400px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px;
  box-shadow:0 2px 4px var(--drop),inset 0 1px 0 var(--lift)}
.gate-body .full{width:100%;justify-content:center;padding:11px;font-size:.95em}
.gate-body .opt{display:flex;align-items:center;gap:7px;font-size:.85em;
  color:var(--fg-dim);margin:0 0 18px}
.gate-body .opt input{width:auto;margin:0}
.gate-body .foot{margin-top:16px;font-size:.78em;color:var(--fg-dim);text-align:center}

/* 오류 화면은 껍데기 없이 가운데 */
body.plain{display:grid;place-items:center;overflow:auto;background:var(--bg)}
.login{width:100%;max-width:400px;padding:30px}
.login .brand{display:flex;align-items:baseline;gap:9px;margin-bottom:6px}
.login .brand b{font-size:1.7em;font-weight:800;letter-spacing:-.02em;color:var(--bar1);
  font-style:italic}
.login .brand span{color:var(--fg-dim);font-size:.82em}
.login .box{margin-top:20px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:24px;box-shadow:0 2px 4px var(--drop),inset 0 1px 0 var(--lift)}
.login .full{width:100%;justify-content:center;padding:11px;font-size:.95em}
.foot{margin-top:18px;font-size:.78em;color:var(--fg-dim);text-align:center}

@media (max-width:820px){ .pane{padding:20px 16px 50px} }

/* ── 일반 사이드 메뉴 ─────────────────────────────────────
   관리처럼 메뉴가 몇 줄뿐인 구역에 쓴다. 트리가 아니다 —
   펼침·끌기·검색이 필요 없는데 트리를 쓰면 다루기만 번거로워진다.
   모양은 TreeMenu 와 맞춘다. 두 구역이 다른 제품처럼 보이면 안 된다. */
.sidemenu{
  flex:none;width:240px;display:flex;flex-direction:column;
  background:#d5e1ef;
  box-shadow:1px 0 0 #b6c7dd, 3px 0 12px rgba(16,32,48,.06);
  overflow:hidden}
@media (prefers-color-scheme:dark){
  .sidemenu{background:#151d29;box-shadow:1px 0 0 #2d3948, 3px 0 12px rgba(0,0,0,.3)}
}
.sm-head{
  flex:none;display:flex;align-items:center;gap:10px;height:52px;padding:0 12px;
  color:#fff;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--bar1) 90%,#fff) 0%, var(--bar1) 60%,
    color-mix(in srgb,var(--bar1) 93%,#000) 100%)}
.sm-logo{
  flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:6px;
  background:rgba(255,255,255,.16);font-size:13px;font-weight:800;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 1px 2px rgba(0,0,0,.25)}
.sm-title{min-width:0;display:flex;flex-direction:column;justify-content:center}
.sm-title b{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.sm-title span{font-size:11px;opacity:.72}

.sm-label{
  margin:14px 14px 8px;padding-bottom:7px;
  font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:#55647a;border-bottom:1px solid #bfd0e4;box-shadow:0 1px 0 rgba(255,255,255,.92)}
@media (prefers-color-scheme:dark){
  .sm-label{color:#9aabbe;border-bottom-color:#2d3948;box-shadow:0 1px 0 rgba(255,255,255,.07)}
}
.sm-list{list-style:none;margin:0;padding:0 8px;flex:1;min-height:0;overflow:auto}
.sm-list a,.sm-foot a{
  display:flex;align-items:center;gap:9px;
  padding:9px 10px;margin:1px 0;border-radius:7px;
  color:var(--fg);text-decoration:none;font-size:14px;line-height:1.4}
.sm-list a:hover,.sm-foot a:hover{
  background:#fff;box-shadow:0 1px 2px rgba(16,32,48,.13),inset 0 1px 0 rgba(255,255,255,.92)}
@media (prefers-color-scheme:dark){
  .sm-list a:hover,.sm-foot a:hover{background:#1e2733;
    box-shadow:0 1px 2px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.07)}
}
/* 지금 자리 — 흰 카드가 떠오르고 왼쪽에 굵은 표시선. 트리와 같은 규칙이다. */
.sm-list a.is-cur{
  background:#fff;color:var(--accent);font-weight:700;
  box-shadow:inset 3px 0 0 var(--accent),inset 0 1px 0 rgba(255,255,255,.92),
             0 1px 3px rgba(16,32,48,.13)}
@media (prefers-color-scheme:dark){
  .sm-list a.is-cur{background:#1e2733;
    box-shadow:inset 3px 0 0 var(--accent),inset 0 1px 0 rgba(255,255,255,.07),
               0 1px 3px rgba(0,0,0,.45)}
}
.sm-ico{flex:none;width:19px;display:grid;place-items:center}
.sm-ico svg{width:17px;height:17px;display:block}
.sm-foot{
  flex:none;padding:8px;border-top:1px solid #bfd0e4;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92)}
@media (prefers-color-scheme:dark){
  .sm-foot{border-top-color:#2d3948;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
}
.sm-foot a{color:var(--fg-dim);font-size:13.5px}

@media (max-width:820px){ .sidemenu{width:56px} .sm-title,.sm-label,.sm-list a span:not(.sm-ico),
  .sm-foot a span:not(.sm-ico){display:none} }

/* ── 비밀번호 칸의 눈동자 ─────────────────────────────────
   두 번 치게 하는 대신 눈으로 확인하게 한다. */
.pw-wrap{position:relative;display:block;margin-top:6px}
.pw-wrap input{margin-top:0 !important;padding-right:42px !important}
.pw-eye{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;padding:0;border:0;border-radius:7px;cursor:pointer;
  background:none;color:var(--fg-dim);display:grid;place-items:center}
.pw-eye svg{width:19px;height:19px;display:block}
.pw-eye:hover{background:var(--badge);color:var(--fg)}
.pw-eye[aria-pressed="true"]{color:var(--accent)}
.pw-eye:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* 표 안에서 바로 고치는 칸 */
.cell{width:100%;font:inherit;padding:6px 9px;border:1px solid var(--line);
  border-radius:7px;background:var(--card);color:var(--fg)}
.cell:focus{outline:0;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}

/* AI Gate 타이틀 줄 — 54px 에서 40% 키웠다.
   브랜드가 화면의 주인이라 좁으면 눌려 보인다. */
.tp-bar1{height:76px}
.tp-brand{font-size:25px}
.tp-brand img{height:26px}

/* ── 바닥글 ───────────────────────────────────────────────
   화면 맨 아래를 가로질러 깐다. 본문 칸 안에 두면 사이드바 폭만큼 잘려
   저작권이 화면 가운데서 시작하는 것처럼 보인다. */
.sitefoot{
  flex:none;display:flex;align-items:center;justify-content:center;
  gap:8px;flex-wrap:wrap;
  padding:11px 18px;
  border-top:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--lift);
  background:var(--bg);
  color:var(--fg-dim);font-size:12px}
.sitefoot .brandline{font-weight:800;letter-spacing:-.01em;color:var(--bar1);font-style:italic}
.sitefoot .brandline .dot{color:var(--bar2)}
.sitefoot .sep{opacity:.45}
.sitefoot .host{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;opacity:.8}
@media (max-width:700px){ .sitefoot .sep,.sitefoot .host{display:none} }

/* 로그인·오류 화면은 가운데 정렬이라 바닥글도 가운데로 */
body.gate .sitefoot,body.plain .sitefoot{justify-content:center;background:none;
  border-top:0;box-shadow:none}

/* 문서 주인 줄 — 관리자에게만 보인다 */
.ownerbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin:0 0 22px;padding:9px 13px;border:1px solid var(--line);border-radius:9px;
  background:var(--badge);font-size:.84em;color:var(--fg-dim)}
.ownerbar select{font:inherit;padding:5px 9px;border:1px solid var(--line);
  border-radius:7px;background:var(--card);color:var(--fg)}
.ownerbar .hint{opacity:.85}

/* ── 검색 결과 ────────────────────────────────────────────
   본문 자리에 늘어놓는다. 왼쪽 검색칸은 제목만 거르므로 본문까지 찾은 결과는
   읽을 자리가 따로 있어야 한다. */
.searchbig{display:flex;gap:9px;margin:0 0 22px}
.searchbig input{flex:1;min-width:0;font:inherit;font-size:16px;padding:11px 14px;
  border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--fg);
  box-shadow:inset 0 1px 2px rgba(16,32,48,.06)}
.searchbig input:focus{outline:0;border-color:var(--accent);
  box-shadow:inset 0 1px 2px rgba(16,32,48,.06),0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.searchbig button{flex:none;padding:0 20px}

ol.hits{list-style:none;margin:0;padding:0;display:grid;gap:20px}
ol.hits > li{padding-bottom:18px;border-bottom:1px solid var(--line)}
ol.hits > li:last-child{border-bottom:0}
.ht{display:flex;align-items:center;gap:9px;font-size:1.08em;font-weight:700;
  color:var(--accent);text-decoration:none;line-height:1.4}
.ht:hover{text-decoration:underline}
.ht .ico svg{width:18px;height:18px;display:block}
.hm{margin:4px 0 9px;font-size:.78em;color:var(--fg-dim)}
.hs{display:block;padding:8px 12px;margin:5px 0;border-radius:8px;
  background:var(--badge);color:var(--fg);text-decoration:none;
  font-size:.88em;line-height:1.7;border-left:3px solid transparent}
.hs:hover{border-left-color:var(--accent);text-decoration:none}
.hs mark,.ht mark{background:color-mix(in srgb,var(--accent) 26%,transparent);
  color:inherit;border-radius:3px;padding:0 2px;font-weight:700}
.ha{display:inline-block;margin-left:8px;font-size:.85em;color:var(--fg-dim);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ── 본문 확대 ────────────────────────────────────────────
   글자와 폭을 함께 키운다. 폭만 키우면 글자가 작아 보이고,
   글자만 키우면 그림이 그대로라 그림을 보려던 목적이 안 이뤄진다. */
:root{--zoom:1}
.pane.narrow{max-width:calc(900px * var(--zoom))}
.body{font-size:calc(1em * var(--zoom))}
.body img{max-width:100%;height:auto}

.zoomctl{flex:none;display:flex;align-items:center;
  border:1px solid var(--line);border-radius:8px;overflow:hidden;
  background:var(--card);box-shadow:0 1px 2px var(--drop),inset 0 1px 0 var(--lift)}
.zoomctl .zb,.zoomctl .zn{
  font:inherit;font-size:.8em;line-height:1;border:0;background:none;color:var(--fg);
  padding:6px 9px;cursor:pointer}
.zoomctl .zb{font-weight:700;font-size:.95em;width:30px}
.zoomctl .zn{min-width:48px;border-left:1px solid var(--line);
  border-right:1px solid var(--line);color:var(--fg-dim);font-size:.76em}
.zoomctl button:hover:not(:disabled){background:var(--badge);color:var(--accent)}
.zoomctl button:disabled{opacity:.35;cursor:default}

/* ── 그림 크게 보기 ──────────────────────────────────────── */
.lightbox{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  background:rgba(10,14,20,.86);padding:28px;overscroll-behavior:contain}
.lightbox img{
  max-width:96vw;max-height:92vh;display:block;
  transform-origin:center center;transition:transform .08s ease-out;
  background:#fff;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.5);
  -webkit-user-select:none;user-select:none;touch-action:none}
.lb-tools{
  position:fixed;top:18px;right:18px;display:flex;gap:2px;
  background:rgba(20,26,34,.9);border-radius:10px;padding:4px;
  box-shadow:0 4px 16px rgba(0,0,0,.4)}
.lb-b{font:inherit;font-size:15px;font-weight:700;line-height:1;
  min-width:36px;height:34px;padding:0 10px;border:0;border-radius:7px;
  background:none;color:#fff;cursor:pointer}
.lb-b:hover{background:rgba(255,255,255,.18)}
.lb-n{font-size:12px;font-weight:600;min-width:56px;opacity:.9}
.lb-x{background:rgba(255,255,255,.12)}
@media (prefers-reduced-motion:reduce){ .lightbox img{transition:none} }