/* N0058 */

.wrap.wide { max-width: 70rem; }

.adm-head { padding: 2rem 0 1.25rem; border-bottom: 2px solid var(--border-strong); margin-bottom: 1.5rem; }
.adm-head h1 { font-size: 1.5rem; margin: 0 0 .4rem; }
.adm-head p { margin: 0; color: var(--muted); font-size: .92rem; }
.adm-stamp { margin-top: .6rem; font-size: .8rem; color: var(--faint); }
.adm-stamp b { font-weight: 600; color: var(--muted); }

/* N0059 */
.adm-tabs {
  display: flex; gap: .25rem; margin: 0 0 1.25rem;
  overflow-x: auto; scrollbar-width: thin;
  border-bottom: 1px solid var(--border);
  /* 굴림 막대가 탭 글자를 가리지 않게 아래를 조금 띄운다. */
  padding-bottom: .1rem;
}
.adm-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem .8rem; border-radius: 8px 8px 0 0;
  font-size: .88rem; font-weight: 600; color: var(--muted);
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; border-bottom: none;
  margin-bottom: -1px;
}
.adm-tab:hover { background: var(--surface-2); color: var(--ink); }
.adm-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* N0060 */
.adm-tab[aria-selected="true"] {
  color: var(--accent); background: var(--surface);
  border-color: var(--border); border-bottom: 1px solid var(--surface);
}
.adm-tab i {
  font-style: normal; font-size: .72rem; font-weight: 600;
  padding: .05rem .32rem; border-radius: 999px;
  background: var(--surface-2); color: var(--faint);
}
.adm-tab[aria-selected="true"] i { background: var(--accent-soft); color: var(--accent); }

/* 카드 — 접힌 상태가 '제목 / 간략 내용' */
.adm-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  margin-bottom: .6rem; overflow: hidden; }
.adm-card > summary {
  list-style: none; cursor: pointer; padding: .95rem 1.1rem;
  display: grid; grid-template-columns: 2.2rem 1fr auto; gap: .1rem .75rem; align-items: baseline;
}
.adm-card > summary::-webkit-details-marker { display: none; }
.adm-card > summary:hover { background: var(--surface-2); }
.adm-card > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.adm-n { grid-row: span 2; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .82rem; color: var(--faint); padding-top: .15rem; }
.adm-t { font-weight: 700; font-size: 1rem; }
.adm-s { grid-column: 2; color: var(--muted); font-size: .88rem; line-height: 1.55; margin-top: .2rem; }
.adm-more { grid-row: span 2; font-size: .78rem; color: var(--accent); white-space: nowrap; }
.adm-card[open] > summary { background: var(--surface-2); border-bottom: 1px solid var(--border); }
.adm-card[open] .adm-more::after { content: " ▴"; }
.adm-card:not([open]) .adm-more::after { content: " ▾"; }

.adm-body { padding: 1.1rem 1.1rem 1.35rem; font-size: .92rem; line-height: 1.75; }
.adm-body > *:first-child { margin-top: 0; }
.adm-body h4 { margin: 1.25rem 0 .4rem; font-size: .95rem; }
.adm-body p { margin: .5rem 0; }
.adm-body ul, .adm-body ol { margin: .5rem 0; padding-left: 1.2rem; }
.adm-body li { margin: .25rem 0; }
.adm-body code, .adm-body .mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .86em;
  background: var(--surface-2); padding: .05rem .3rem; border-radius: 4px;
}
.adm-body pre { margin: .6rem 0; padding: .7rem .85rem; border-radius: 8px;
  background: var(--surface-2); overflow-x: auto; font-size: .82rem; line-height: 1.6; }
.adm-body pre code { background: none; padding: 0; }
.adm-body table { width: 100%; border-collapse: collapse; margin: .6rem 0; font-size: .85rem; }
.adm-body th, .adm-body td { padding: .4rem .55rem; text-align: left;
  border-bottom: 1px solid var(--border); vertical-align: top; }
.adm-body thead th { color: var(--faint); font-weight: 600; white-space: nowrap; }
.adm-body td.num, .adm-body th.num { text-align: right; white-space: nowrap;
  font-family: "IBM Plex Mono", ui-monospace, monospace; }
.adm-scroll { overflow-x: auto; }

.adm-note { margin: .7rem 0; padding: .6rem .8rem; border-radius: 8px; font-size: .87rem;
  background: var(--accent-soft); border-left: 3px solid var(--accent); }
.adm-warn { background: var(--warn-soft); border-left-color: var(--warn); }
.adm-block { background: var(--block-soft); border-left-color: var(--block); }
.adm-ok { background: var(--ok-soft); border-left-color: var(--ok); }

/* 숫자 몇 개를 나란히 */
.adm-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: .5rem; margin: .7rem 0; }
.adm-kpi div { padding: .6rem .7rem; border-radius: 8px; background: var(--surface-2); }
.adm-kpi b { display: block; font-size: 1.15rem; line-height: 1.3; }
.adm-kpi span { font-size: .78rem; color: var(--muted); }

.adm-miss { color: var(--faint); font-style: normal; }
/* 최소 표본을 못 넘은 칸. 없는 것(—)과 다르다 — 있지만 못 쓰는 것이다. */
.adm-thin { color: var(--warn); font-style: normal; }

@media (max-width: 34rem) {
  .adm-tabs { margin-left: -.9rem; margin-right: -.9rem; padding-left: .9rem;
    padding-right: .9rem; }
  .adm-tab { padding: .45rem .6rem; font-size: .82rem; }
  .adm-card > summary { grid-template-columns: 1.6rem 1fr; padding: .8rem .85rem; }
  .adm-more { display: none; }
  .adm-body { padding: .9rem .85rem 1.1rem; }
}

/* N0061 */
.lnk-form{display:grid;gap:10px;margin:8px 0 18px}
@media (min-width:640px){ .lnk-form{grid-template-columns:1fr 1fr} }
.lnk-form label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:700;color:var(--muted)}
.lnk-form input,.lnk-form select{
  font:inherit;font-weight:400;padding:9px 10px;border-radius:8px;
  border:1px solid var(--border-strong);background:var(--surface);color:var(--ink)
}
.lnk-form .btn{grid-column:1/-1;justify-self:start}
.lnk-msg{grid-column:1/-1;margin:0;font-size:13px;min-height:1.2em;word-break:break-all}
.lnk-msg.ok{color:var(--accent)}
.lnk-msg.bad{color:var(--danger,#B3261E)}
.lnk-copy{
  font:inherit;font-size:11px;padding:2px 7px;margin-left:4px;cursor:pointer;
  border-radius:6px;border:1px solid var(--border-strong);
  background:var(--surface-2);color:var(--muted)
}
.lnk-copy:hover{color:var(--ink)}
.adm-kpi{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));
  gap:8px;margin:10px 0 16px;text-align:center
}
.adm-kpi b{display:block;font-size:20px;font-weight:800;letter-spacing:-.02em}
.adm-kpi span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}

/* N0062 */
/* 기간 칩 */
.pd-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0 14px}
.pd{
  font:inherit;font-size:13px;font-weight:700;padding:5px 13px;cursor:pointer;
  border-radius:999px;border:1px solid var(--border-strong);
  background:var(--surface);color:var(--muted)
}
.pd:hover{color:var(--ink)}
.pd.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.pd.busy{opacity:.5}
.pd-note{font-size:12px;color:var(--faint);margin-left:4px}

/* 채널 고르기 — 여러 개 */
.ch-grid{grid-column:1/-1;display:grid;gap:8px}
@media (min-width:560px){ .ch-grid{grid-template-columns:1fr 1fr} }
.ch-box{
  display:flex;align-items:flex-start;gap:9px;padding:10px 12px;cursor:pointer;
  border:1px solid var(--border);border-radius:10px;background:var(--surface);
  font-weight:400
}
.ch-box:hover{border-color:var(--border-strong)}
.ch-box:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.ch-box input{margin-top:3px;flex:none;accent-color:var(--accent)}
.ch-box b{display:block;font-size:14px;font-weight:700;color:var(--ink)}
.ch-box i{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:1px}

.adm-hint{font-size:12px;font-weight:400;color:var(--faint)}
.adm-sub{font-style:normal;font-size:11.5px;color:var(--faint)}

/* N0063 */
.bc{margin:0 0 18px;border:1px solid var(--border);border-radius:var(--radius,12px);
    padding:12px 14px 8px;background:var(--surface)}
.bc figcaption{font-size:13px;font-weight:700;margin-bottom:10px}
.bc figcaption span{font-weight:400;color:var(--muted);font-size:12px}
.bc-plot{
  display:flex;align-items:flex-end;gap:2px;
  height:120px;padding-top:16px;box-sizing:border-box   /* 위 16px 은 값 이름표 자리 */
}
.bc-col{flex:1 1 0;min-width:0;height:100%;display:flex;align-items:flex-end}
/* 막대는 위만 둥글다 — 아래는 기준선에 붙는다 */
.bc-col i{display:block;width:100%;position:relative;font-style:normal;background:var(--accent);border-radius:4px 4px 0 0}
.bc-col:hover i{background:var(--brand-warm,var(--accent))}
/* N0064 */
.bc-col i b{
  position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  font-size:11px;font-weight:700;color:var(--ink);line-height:1;
  margin-bottom:3px;white-space:nowrap
}
.bc-x{display:flex;justify-content:space-between;font-size:11px;color:var(--faint);margin-top:4px}

/* 표 안의 크기 비교 막대 */
.cmp{display:block;height:8px;min-width:2px;width:var(--w);
     background:var(--accent);border-radius:4px}

.lnk-table{overflow-x:auto}

/* N0065 */
.fn{display:grid;gap:6px;margin:8px 0 6px}
.fn-row{display:grid;grid-template-columns:minmax(0,1fr) 40% auto;gap:10px;align-items:center}
@media (max-width:520px){ .fn-row{grid-template-columns:minmax(0,1fr) auto} .fn-bar{display:none} }
.fn-nm{font-size:13px;font-weight:700;min-width:0}
.fn-nm code{font-weight:400;font-size:11px;color:var(--faint)}
.fn-bar{height:10px;background:var(--surface-2);border-radius:5px;overflow:hidden}
.fn-bar i{display:block;height:100%;background:var(--accent);border-radius:5px}
.fn-n{font-size:13px;font-weight:700;text-align:right;white-space:nowrap;
      font-variant-numeric:tabular-nums}
.fn-n i{display:block;font-style:normal;font-size:11px;font-weight:400;color:var(--muted)}
.fn-n i.up{color:var(--accent)}

/* N0066 */
.lnk-qr{
  font:inherit;font-size:11px;padding:2px 7px;margin-left:4px;cursor:pointer;
  border-radius:6px;border:1px solid var(--border-strong);
  background:var(--surface-2);color:var(--muted)
}
.lnk-qr:hover{color:var(--ink)}
.qr-box{
  position:fixed;inset:0;z-index:900;display:grid;place-items:center;
  background:rgba(0,0,0,.45);padding:20px
}
.qr-card{
  position:relative;background:var(--surface);border-radius:var(--radius,14px);
  padding:22px;max-width:320px;text-align:center;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.5)
}
/* QR 은 흰 바탕 검은 무늬여야 읽힌다 — 어두운 테마에서도 반전하지 않는다 */
.qr-card svg{display:block;margin:0 auto 12px;border-radius:6px}
.qr-close{
  position:absolute;top:8px;right:10px;font:inherit;font-size:20px;line-height:1;
  border:0;background:none;color:var(--muted);cursor:pointer
}
.qr-url{margin:0 0 8px;font-size:12px;word-break:break-all;color:var(--muted)}
.qr-hint{margin:0 0 14px;font-size:12px;color:var(--faint);line-height:1.6}

/* N0747 */
.notes-list{display:grid;gap:.6rem;max-height:60vh;overflow:auto}
.note-row{border:1px solid var(--border);border-radius:8px;padding:.6rem .7rem;background:var(--surface)}
.note-h{display:flex;gap:.6rem;align-items:baseline;font-size:.82rem;margin-bottom:.35rem}
.note-h b{font-family:"IBM Plex Mono",monospace;color:var(--accent)}
.note-h span{color:var(--muted);font-family:"IBM Plex Mono",monospace;word-break:break-all}
.note-row pre{margin:0;white-space:pre-wrap;word-break:break-word;font:inherit;font-size:.88rem;line-height:1.65;color:var(--ink)}
/* N9023 */
.note-fix{margin-top:.5rem!important;padding-left:.7rem;border-left:2px solid var(--accent);color:var(--muted)!important}
.note-h b{flex:0 1 auto}