/* 툴 화면 토큰 — 구글 Material 3(material-web 공식 토큰, tokens/versions/v0_192)을 따른다(2026-10-28 담당자: SDS는 투박함, 머티리얼로).
   색은 쿨그레이(10-28 담당자 A안): 구글 material-color-utilities 로 색상 230, 회색 채도 4와 8로 만든 neutral 팔레트의 역할 색(primary, secondary-container, surface 단계, outline). 글꼴은 한글 때문에 Pretendard(머티리얼은 Roboto).
   글 상세(캔버스 안)는 사이트 모양(view/page.css)이라 이 값을 쓰지 않는다.
   부품: 버튼 40 끝까지 둥글게, 필터 칩 32 모서리 8, 탭 48과 표시 선 3, 메뉴 모서리 4와 항목 48, 창 모서리 28, 찾기 칸 56, 알림 모서리 4, 머리 64 */
:root {
  --ink: #191C1E;        /* on-surface */
  --ink-2: #40484C;      /* on-surface-variant */
  --ink-3: #2E3133;      /* inverse-surface */
  --gray-1: #585F64;     /* 보조 글자 */
  --gray-3: #9C9EA0;     /* 꺼진 글자(on-surface 38%) */
  --outline: #70787D;    /* outline */
  --gray-2: #C0C8CD;     /* outline-variant: 선 */
  --fill-2: #E7E8EA;     /* surface-container-high */
  --fill: #F2F4F6;       /* surface-container-low */
  --fill-c: #EDEEF0;     /* surface-container(메뉴) */
  --sec-c: #DCE3E9;      /* secondary-container: 고른 칩, 회색 버튼 */
  --bg: #FFFFFF;         /* surface-container-lowest */
  --surface: #F8F9FB;    /* surface */
  --brand: #191C1E;      /* primary(쿨그레이 tone 10) */
  --brand-hover: #323537;
  --on-brand: #FFFFFF;   /* on-primary */
  --inv: #2E3133;        /* inverse-surface(알림) */
  --on-inv: #F0F1F3;
  --danger: #BA1A1A;     /* error */
  --danger-bg: #FFDAD6;  /* error-container */
  --ok: #1E6B3A;
  --ok-bg: #D7F5DD;
  --head: 64px;          /* top app bar */
  --r-s: 4px;            /* corner-extra-small */
  --r: 8px;              /* corner-small */
  --r-m: 12px;           /* corner-medium */
  --r-xl: 28px;          /* corner-extra-large */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px 2px rgba(0, 0, 0, .15);   /* elevation level2: 메뉴 */
  --shadow-pop: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 8px 3px rgba(0, 0, 0, .15);  /* elevation level3: 창, 알림 */
  --hover: rgba(25, 28, 30, .08);   /* state layer hover 8% */
  --press: rgba(25, 28, 30, .12);   /* state layer pressed 12% */
  --ring: 0 0 0 3px var(--outline);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink); font-family: Pretendard, -apple-system, sans-serif; font-size: 14px; line-height: 1.5; }
.top { height: var(--head); display: flex; align-items: center; padding: 0 24px; border-bottom: 1px solid var(--gray-2); }
.top h1 { font-size: 16px; font-weight: 600; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 32px 24px; }
h2 { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.state { color: var(--gray-1); }
.posts { list-style: none; border-top: 1px solid var(--gray-2); }
.posts:empty { display: none; }
.posts li { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--gray-2); }
.posts .cat { width: 80px; color: var(--gray-1); font-size: 12px; }
.posts .date { margin-left: auto; color: var(--gray-1); font-size: 12px; }
.posts a { display: flex; gap: 16px; width: 100%; color: inherit; text-decoration: none; }
.posts a:hover .title { text-decoration: underline; }

/* 글 미리보기 */
.is-post { background: var(--fill); }
.is-post .top { position: sticky; top: 0; z-index: 2; gap: 16px; background: var(--bg); }
.top .back { color: var(--gray-1); text-decoration: none; font-size: 14px; white-space: nowrap; }
.top .back::before { content: "‹ "; }
.top .back:hover { color: var(--ink); }
.is-post .top h1 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.seg { display: flex; border: 1px solid var(--gray-2); border-radius: var(--r); overflow: hidden; }
.seg button { height: 32px; border: 0; background: var(--bg); color: var(--gray-1); font: inherit; font-size: 14px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--gray-2); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.stage { flex: 1; min-width: 0; padding: 24px; display: flex; flex-direction: column; align-items: center; }
.ed { display: flex; align-items: flex-start; }
.top .tools { display: flex; gap: 4px; }
.saved { color: var(--gray-1); font-size: 12px; white-space: nowrap; min-width: 72px; text-align: right; }
.txtBtn { height: 32px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; }
.txtBtn:disabled { color: var(--gray-3); cursor: default; }
.txtBtn:not(:disabled):hover { text-decoration: underline; }
[hidden] { display: none !important; }

/* 오른쪽 패널 */
.panel { position: sticky; top: var(--head); width: 320px; flex: none; height: calc(100vh - var(--head)); overflow-y: auto; background: var(--bg); border-left: 1px solid var(--gray-2); }
.psec { padding: 20px; border-bottom: 1px solid var(--gray-2); }
.psec h2 { margin-bottom: 12px; }
.pname { font-size: 16px; margin-bottom: 12px; }
.plab { margin: 16px 0 8px; color: var(--gray-1); font-size: 12px; }
.pnote { color: var(--gray-1); font-size: 12px; }
.prow { flex-wrap: wrap; }
.btnL { height: 32px; padding: 0 12px; border: 1px solid var(--gray-2); border-radius: var(--r); background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.btnL:hover:not(:disabled) { border-color: var(--ink); }
.btnL:disabled { color: var(--gray-3); cursor: default; }
.btnP { height: 32px; padding: 0 14px; border: 1px solid var(--ink); border-radius: var(--r); background: var(--ink); color: var(--bg); font: inherit; font-size: 14px; cursor: pointer; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips.sub { margin: 4px 0 8px 12px; }
.chip { border: 1px solid var(--gray-2); background: var(--bg); color: var(--ink); font: inherit; cursor: pointer; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.chip:disabled { border-color: var(--fill-2); color: var(--gray-3); cursor: default; }
.fld { display: block; margin-top: 16px; }
.fld > span { display: block; margin-bottom: 6px; color: var(--gray-1); font-size: 12px; }
.fld input, .fld select, .fld textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--gray-2); border-radius: var(--r); background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; }
.fld textarea { resize: vertical; line-height: 1.5; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--ink); }
.chk { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; cursor: pointer; }
.pthumb { display: block; width: 100%; max-height: 200px; object-fit: contain; background: var(--fill); margin-bottom: 10px; }
.drw { display: block; width: 100%; height: 36px; padding: 0 4px; border: 0; border-bottom: 1px solid var(--fill); background: none; color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.drw b { display: inline-block; width: 28px; color: var(--gray-1); font-weight: 400; font-size: 12px; }
.drw:hover { background: var(--fill); }

/* 서랍 */
.segS { margin-bottom: 12px; }
.segS button { flex: 1; }
.top .btnL { flex: none; }

/* 사용법 */
.help div { display: flex; border-top: 1px solid var(--gray-2); font-size: 14px; }
.help dt { flex: none; font-weight: 600; }
.help dd { color: var(--ink); }

/* 확인 창 */
.dlg { margin: auto; width: min(400px, calc(100% - 32px)); padding: 24px; border: 1px solid var(--gray-2); color: var(--ink); }
.dlg::backdrop { background: rgba(12, 12, 13, .4); }
.dlgT { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.dlgD { color: var(--gray-1); font-size: 14px; }
.dlgB { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.frame { position: relative; overflow: hidden; background: var(--bg); border: 1px solid var(--gray-2); }
.frame iframe { display: block; border: 0; transform-origin: 0 0; }

/* 검사 */
.csum { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.csum .cb { font-weight: 600; }
.csum .txtBtn { margin-left: auto; height: 24px; padding: 0; font-size: 12px; color: var(--gray-1); }
.pcheck .pnote { margin-top: 6px; }
.clist { list-style: none; margin-top: 10px; border-top: 1px solid var(--gray-2); }
.citem { display: flex; gap: 8px; width: 100%; padding: 8px 0; border: 0; border-bottom: 1px solid var(--fill); background: none; color: var(--ink); font: inherit; font-size: 12px; line-height: 1.45; text-align: left; cursor: pointer; }
.citem b { flex: none; width: 28px; color: var(--gray-1); font-weight: 400; }
.citem.is-block b { color: var(--ink); font-weight: 600; }
.citem:hover span { text-decoration: underline; }

/* 알림 */
.toast { position: fixed; left: 50%; top: calc(var(--head) + 12px); z-index: 20; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 10px 16px; border-radius: var(--r); background: var(--ink); color: var(--bg); font-size: 14px; }

/* 요청 */
.top #sendBtn, .top #regBtn { flex: none; }
.btnP:disabled { border-color: var(--gray-3); background: var(--gray-3); cursor: default; }
.banner { position: sticky; top: var(--head); z-index: 2; background: var(--fill); border-bottom: 1px solid var(--gray-2); }
.banner p { display: flex; align-items: center; gap: 12px; padding: 10px 24px; font-size: 14px; }
.banner p + p { border-top: 1px solid var(--gray-2); }
.banner .btnL { margin-left: auto; flex: none; }
.teamList { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

.pvBar { display: flex; gap: 8px; margin-bottom: 12px; }
.pvBox { max-height: calc(100vh - 140px); overflow-y: auto; border: 1px solid var(--gray-2); background: var(--fill); }
.pvBox .frame { border: 0; margin: 0 auto; }
.card { padding: 14px 0; border-top: 1px solid var(--gray-2); }
.cardT { margin-bottom: 8px; }
.cardT b { font-weight: 600; }
.diff { flex: 1; min-width: 0; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; white-space: pre-wrap; }
.diff del { background: var(--danger-bg); color: var(--danger); text-decoration: line-through; }
.diff ins { background: var(--ok-bg); color: var(--ok); text-decoration: none; }
.perm { margin-top: 12px; }
.permAdd { display: flex; gap: 8px; margin-top: 16px; }
.permAdd input { flex: 1; padding: 8px 10px; border: 1px solid var(--gray-2); border-radius: var(--r); font: inherit; font-size: 14px; }

/* 글 목록 위쪽 */
.top .link { margin-left: auto; color: var(--ink); font-size: 14px; text-decoration: none; }
.top .link:hover { text-decoration: underline; }
.posts .req { margin-left: 8px; padding: 0 6px; border: 1px solid var(--ink); border-radius: var(--r-s); font-size: 12px; line-height: 18px; }

/* 좁은 화면 */
.seg button { white-space: nowrap; }
.top > * { flex-shrink: 0; }
.top h1 { flex-shrink: 1; }
@media (max-width: 900px) {
  .is-post .top h1, .saved { display: none; }
  .top { gap: 8px !important; padding: 0 12px; }
}

/* 10-25 다듬기: 아이콘 버튼, 보낼 수 없는 까닭, 넣기 목록 */
.icoBtn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--r); background: none; color: var(--ink); cursor: pointer; }
.icoBtn svg { width: 20px; height: 20px; }
.sendWhy { color: var(--gray-1); font-size: 12px; }
.sendWhy:not(:disabled) { color: var(--ink); text-decoration: underline; }
.drwList { display: grid; }
.drwList .drw { height: 36px; padding: 0 10px; border: 1px solid var(--gray-2); border-radius: var(--r); font-size: 14px; cursor: grab; }
.drwList .drw:hover { border-color: var(--ink); background: var(--bg); }
.pcheck { border-top: 1px solid var(--gray-2); }

/* 넣기 썸네일(10-25 다시) */
.drwCard { display: block; width: 100%; border: 1px solid var(--gray-2); background: var(--bg); color: var(--ink); font: inherit; text-align: left; }
.drwLab { display: block; }
.drwTabs { border-bottom: 1px solid var(--gray-2); }
.drwTabs button { margin-bottom: -1px; padding: 0; border-bottom: 2px solid transparent; background: none; font: inherit; cursor: pointer; }
.drwTabs button[aria-selected="true"] { border-bottom-color: var(--ink); }
.drwList[hidden] { display: none; }

/* 글 목록(10-25 다시): 사진 카드, 카테고리 탭, 찾기, 상태 걸러 보기 */
.is-lib .top { position: sticky; top: 0; z-index: 3; gap: 16px; background: var(--bg); }
.is-lib .top h1 { flex: 1; }
.is-lib .top .link { margin-left: 0; }
.teamPick { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--gray-1); }
.teamPick select { height: 32px; padding: 0 8px; border: 1px solid var(--gray-2); border-radius: var(--r); background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; }
.lib { max-width: 1320px; margin: 0 auto; padding: 24px 24px 64px; }
.libBar { display: flex; align-items: flex-end; gap: 16px; border-bottom: 1px solid var(--gray-2); }
.tabs { display: flex; gap: 24px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tabs button { flex: none; height: 44px; padding: 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--gray-1); font: inherit; font-size: 16px; cursor: pointer; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.tabs .cnt { margin-left: 4px; font-size: 12px; font-weight: 400; color: var(--gray-1); }
.libBar input[type="search"] { width: 260px; height: 36px; margin-bottom: 6px; padding: 0 12px; border: 1px solid var(--gray-2); border-radius: var(--r); font: inherit; font-size: 14px; }
.libBar input[type="search"]:focus { outline: none; border-color: var(--ink); }
.viewSeg button { display: inline-flex; align-items: center; justify-content: center; width: 32px; padding: 0; }
.viewSeg svg { width: 16px; height: 16px; }
/* 목록 보기 — 한 줄에 글 하나: 작은 사진, 카테고리와 제목, 요약, 날짜와 표시(10-27 담당자).
   줄마다 선을 긋지 않고 여백으로 나누며, 마우스를 올린 줄만 옅은 회색 바탕(10-27 담당자: 구분선이 너무 많음) */
.cards.is-list { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; }
.cards.is-list .cardA { display: flex; align-items: center; gap: 20px; margin: 0 -12px; padding: 12px; border-radius: var(--r); }
.cards.is-list .cardA:hover { background: var(--fill); }
.cards.is-list .cardA:hover .cardT { text-decoration: none; }
.cards.is-list .cardImg { flex: none; width: 120px; border-radius: var(--r); }
.cards.is-list .cardTx { flex: 1; min-width: 0; padding-top: 0; }
.cards.is-list .cardT { margin-top: 4px; font-size: 16px; -webkit-line-clamp: 1; }
.libFilt { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.libFilt .chips { flex: 1; min-width: 0; }
.sortChip { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px; border: 0; border-radius: var(--r); background: var(--fill); color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.sortChip:hover { background: var(--fill-2); }
.sortChip svg { width: 14px; height: 14px; }
.libFilt .viewSeg { flex: none; margin: 0; }
.is-lib .state { margin-top: 24px; font-size: 14px; }
.cards { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 20px; margin-top: 24px; }
.cardA { display: block; color: inherit; text-decoration: none; }
.cardImg { aspect-ratio: 3 / 2; overflow: hidden; background: var(--fill); }
.cardImg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cardA:hover .cardT { text-decoration: underline; }
.cardTx { padding-top: 12px; }
.cardCat { color: #0B41CD; font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: 0; }  /* 실제 목록(dev0 /renew/archive .arl_*)과 같은 값, 10-26 */
.cardT { margin-top: 8px; font-size: 16px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cardS { margin-top: 4px; color: var(--ink-2); font-size: 14px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cardM { display: flex; gap: 8px; margin-top: 6px; color: var(--gray-1); font-size: 12px; line-height: 1.2; }
.cardFlag { color: var(--ink); font-weight: 600; }  /* 날짜 줄 끝 상태(저장 안 함, 어드민 수정 필요) */
@media (max-width: 1100px) { .cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) {
  .cards { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
  .libBar { flex-direction: column; align-items: stretch; gap: 8px; border-bottom: 0; }
  .tabs { border-bottom: 1px solid var(--gray-2); }
  .libBar input[type="search"] { width: 100%; margin: 0; }
  .teamPick span { display: none; }
}
@media (max-width: 520px) {
  .lib { padding: 16px 16px 48px; }
  .cards.is-list .cardA { gap: 12px; }
  .cards.is-list .cardImg { width: 88px; }
  .cards { grid-template-columns: 1fr; }
  .is-lib .top .link { font-size: 14px; }
}
.cards > li { min-width: 0; }  /* 한 줄 요약이 칸을 밀어 넓히지 않게 */

/* 모듈 관리 */
.is-mods { background: var(--bg); }
.is-mods .top { position: sticky; top: 0; z-index: 3; gap: 12px; background: var(--bg); }
.is-mods .top h1 { flex: 1; font-weight: 400; }
.is-mods .banner { position: static; }
.mods { display: flex; align-items: stretch; height: calc(100vh - var(--head)); }
.modList { width: 200px; flex: none; overflow-y: auto; padding: 12px 8px; border-right: 1px solid var(--gray-2); }
.modList button { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: var(--r); background: none; color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.modList button:hover { background: var(--fill); }
.modList button[aria-current="true"] { background: var(--ink); color: var(--bg); }
.modList button[aria-current="true"] .cnt { color: var(--gray-3); }
.modList .cnt { color: var(--gray-1); font-size: 12px; }
.modList button.is-changed > span:first-child::after { content: " 바뀜"; font-size: 12px; color: #2F6BFF; }
.modList button[aria-current="true"].is-changed > span:first-child::after { color: #9AB6FF; }
.modView { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--fill); }
.modView .pvBar { display: flex; gap: 12px; margin-bottom: 12px; }
.modPick { flex: 1; margin-top: 0; }
.modPick select { width: 100%; height: 32px; padding: 0 8px; border: 1px solid var(--gray-2); border-radius: var(--r); background: var(--bg); font: inherit; font-size: 14px; }
.modView .pvBox { flex: 1; max-height: none; overflow-y: auto; border: 1px solid var(--gray-2); background: var(--fill); }
.modView .frame { margin: 0 auto; border: 0; background: var(--bg); }
.modView .frame iframe { display: block; border: 0; transform-origin: 0 0; }
.modPanel { position: static; height: auto; overflow-y: auto; }
.pgrid { display: grid; grid-template-columns: minmax(0, 1fr) 64px 64px; align-items: center; }
.pgrid .phd { color: var(--gray-1); text-align: center; }
.pgrid .plabel { line-height: 1.35; }
.pgrid .plabel small { color: var(--gray-1); font-size: 12px; }
.pgrid .pspan2 { grid-column: span 2; }
.pgrid .pval { padding: 6px 0; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.mkv { margin: 0; }
.mkv > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 6px 0; font-size: 14px; }
.mkv dt { color: var(--ink); }
.mkv dd { margin: 0; color: var(--gray-1); text-align: right; }
.pgrid input, .frow input { width: 100%; border: 1px solid var(--gray-2); border-radius: var(--r); font: inherit; font-size: 14px; }
.pgrid input:focus, .frow input:focus { outline: none; border-color: var(--ink); }
.pgrid input:disabled, .modPanel input:disabled, .modPanel textarea:disabled { background: var(--fill); color: var(--gray-1); }
.frow { display: grid; grid-template-columns: minmax(0, 1fr) 80px; align-items: center; gap: 8px; margin-top: 10px; }
.frow > span { margin: 0 !important; font-size: 12px; color: var(--ink) !important; }
.modPanel .pnote { margin-top: 10px; }
.hrow { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-top: 1px solid var(--fill); font-size: 12px; }


/* 공통 머리 — 툴 이름, [새 글] 버튼, 계정(nav.js, 10-27 메뉴 구조 다시 짬) */
.top.gnb { position: sticky; top: 0; z-index: 3; gap: 40px; background: var(--bg); }
.brand { display: flex; align-items: baseline; gap: 8px; color: var(--ink); text-decoration: none; font-size: 16px; white-space: nowrap; }
.brand b { font-weight: 600; }
.subNav { display: flex; gap: 24px; }
.top.gnb .gnbR { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.top.gnb .gnbNew { display: inline-flex; align-items: center; text-decoration: none; }
.subNav a { display: flex; align-items: center; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--gray-1); font-size: 14px; text-decoration: none; white-space: nowrap; }
.subNav a:hover { color: var(--ink); }
.subNav a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.subNav { height: 44px; padding: 0 24px; border-bottom: 1px solid var(--gray-2); background: var(--bg); }
.acctBox { position: relative; }
.acct { color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; }
.acct::after { content: ""; display: inline-block; width: 5px; height: 5px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: translateY(-3px) rotate(45deg); }
.acct:hover { border-color: var(--ink); }
.acctPop { position: absolute; right: 0; z-index: 10; padding: 6px; border: 1px solid var(--gray-2); border-radius: var(--r); background: var(--bg); }
.acctPop[hidden] { display: none; }
.acctPop button { display: flex; width: 100%; border: 0; border-radius: var(--r-s); background: none; color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.acctPop button:hover { background: var(--fill); }
.acctPop button[aria-checked="true"] { font-weight: 600; }
.is-admin .mods { height: calc(100vh - 100px); }
.adm { max-width: 880px; margin: 0 auto; padding: 32px 24px 64px; }
.admHead { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.admHead h1 { flex: 1; }
.admHead h1 b { font-weight: 600; }
@media (max-width: 700px) {
  .top.gnb { gap: 16px !important; }
  .brand { font-size: 14px; }
  .brand span { display: none; }
  .subNav { padding: 0 12px; gap: 16px; overflow-x: auto; }
}
.subBar { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 24px; border-bottom: 1px solid var(--gray-2); background: var(--bg); }
.subBar .subNav { flex: 1; height: 100%; padding: 0; border: 0; }
.subBar .saved { margin-left: 0; }
.permT { width: 100%; font-size: 14px; }
.permT th, .permT td { height: 48px; padding: 0 12px; border-bottom: 1px solid var(--gray-2); text-align: center; }
.permT thead th { height: 40px; color: var(--gray-1); border-bottom-color: var(--ink); }
.permT th:first-child { text-align: left; padding-left: 0; font-weight: 400; }
.permT thead th:first-child { font-weight: 400; }
.permT input { width: 16px; height: 16px; accent-color: var(--ink); cursor: pointer; }
.adm .permAdd { max-width: 420px; margin-top: 20px; }
.adm .banner { position: static; margin-top: 16px; }
@media (max-width: 900px) and (min-width: 701px) { .top.gnb { gap: 28px !important; } }

/* ── 버튼과 입력 칸 기준(10-26 담당자: 여백 전면 검수) ──────────────
   높이: 머리와 도구 줄 32, 본문과 패널, 창 36. 한 줄에 놓이는 것은 같은 높이.
   좌우 여백: 입력 칸 12, 드롭다운 왼쪽 12 오른쪽 36(화살표 자리), 버튼 14, 글자 버튼 8. 모서리 4(태그와 뱃지만 2) */
:root { --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%231B1C1E' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
select { -webkit-appearance: none; appearance: none; padding: 0 36px 0 12px !important; background: var(--bg) var(--chev) no-repeat right 12px center / 12px 12px !important; cursor: pointer; }
select:disabled { cursor: default; opacity: .5; }
.fld input, .fld select, .permAdd input, .libBar input[type="search"], .modPick select { height: 36px; padding: 0 12px; }
.fld textarea { padding: 10px 12px; }
.btnL, .btnP { height: 36px; padding: 0 14px; }
.top .btnL, .top .btnP, .subBar .btnL, .subBar .btnP, .top select, .subBar select { height: 32px; }
.txtBtn { padding: 0 8px; }
.chip { height: 32px; padding: 0 12px; border-radius: var(--r); font-size: 14px; }
.pgrid input, .frow input { height: 32px; padding: 0 8px; }
.permAdd { align-items: center; }
.seg button { padding: 0 14px; }
.dlg { border-radius: var(--r); }  /* 기준: 정보 박스와 창은 4 */
.modPanel > .pname { margin: 0; padding: 20px 20px 4px; }  /* 모듈 이름이 패널 끝에 붙던 것 */
/* 계정 메뉴 — 머리 선에 걸치지 않게 선 아래 4px에, 항목은 버튼 기준(높이 36, 좌우 12) */
.acctPop { top: calc(100% + 16px); }
.acctPop button { height: 36px; padding: 0 12px; align-items: center; }
.acctPop button[aria-checked="true"]::after { content: ""; width: 12px; height: 12px; background: var(--chk) no-repeat center / 12px 12px; }
:root { --chk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5 9.5 3.5' fill='none' stroke='%231B1C1E' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* 글 편집 보기 타입 — PC/MO 나란히, PC, MO. 화면마다 따로 스크롤(10-26) */
body.is-post { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.is-post .ed { flex: 1; min-height: 0; align-items: stretch; }
.is-post .stage { height: 100%; padding: 12px 24px 0; align-items: stretch; overflow: hidden; }
.is-post .panel { position: static; height: auto; }
.panes { display: flex; gap: 24px; flex: 1; min-height: 0; }
.panes[hidden] { display: none; }
.pane { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.paneL { display: flex; justify-content: space-between; align-items: center; height: 28px; font-size: 12px; }
.paneS { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 24px; }
.paneS .frame { margin: 0 auto; border: 0; outline: 1px solid var(--gray-2); }

/* 글 편집 머리 왼쪽 — 뒤로 아이콘, 지금 화면이 편집기임을 알리는 '글 편집'과 글 제목(10-26) */
.backIco { flex: none; margin-left: -8px; text-decoration: none; }
.backIco:hover { background: var(--fill); }
#home.brand { flex: none; }  /* 툴 이름이 홈(글 목록) — 뒤로 바로 옆, 목록 머리와 같은 모양(10-28 담당자) */
.top #home + .edT { padding-left: 12px; border-left: 1px solid var(--gray-2); }
.top #home + .edT .edK, .is-post.is-view .top #home + .edT .edK::before { font-size: 14px; }
/* 한 줄: 화면 이름(글 편집, 미리보기면 미리보기)이 먼저이고 크게, 세로선 뒤 글 제목은 회색으로 작게(10-26 담당자: 화면 이름 위계를 제목보다 높게) */
.edT { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.edK { flex: none; color: var(--ink); font-size: 16px; font-weight: 600; white-space: nowrap; }
.edK::after { content: ""; display: inline-block; width: 1px; height: 14px; margin-left: 12px; background: var(--gray-2); vertical-align: -1px; }
.is-post .top .edT h1 { min-width: 0; color: var(--gray-1); font-size: 14px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.is-post.is-view .edK { font-size: 0; }
.is-post.is-view .edK::before { content: "미리보기"; font-size: 16px; }
.is-post.is-view .edK::after { vertical-align: -2px; }
@media (max-width: 900px) { .edT { flex: 0 0 auto; } .edK::after { display: none; } }  /* 좁으면 제목은 숨고 화면 이름만 */

/* 글 편집 머리 묶음(10-26 담당자): 보기(보기 타입, 미리보기) | 되돌리기(실행 취소, 다시 실행, 리셋) … 최종 수정, 사용법, 팀, 수정 요청 보내기 */
.pvBtn { display: inline-flex; align-items: center; gap: 6px; }
.pvBtn[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.pvBtn:disabled { color: var(--gray-3); }
.icoBtn:hover:not(:disabled) { background: var(--fill); }
.icoBtn:disabled { color: var(--gray-3); cursor: default; }
.is-post .saved { min-width: 0; margin-left: 8px; }

/* 오른쪽 패널 위계(10-26 담당자: 패널 위계와 묶음 점검)
   칸 이름 14/600 잉크 → 그 칸의 설명 12 회색 → 입력과 카드. 칸 사이는 1px 선과 20 여백.
   고른 모듈 이름은 칸 이름 옆 태그로, 요청 전 확인은 늘 보이게 패널 아래에 붙인다 */
.psecH { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; margin-bottom: 12px; }
.psecH h2 { margin: 0; font-size: 14px; font-weight: 600; }
.ptag { padding: 0 8px; border-radius: var(--r-s); background: var(--fill); color: var(--ink-2); font-size: 12px; font-weight: 500; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.psec > .pnote:first-of-type { margin-top: -4px; }
.psec .fld:first-of-type { margin-top: 0; }
.is-post .panel { display: flex; flex-direction: column; }
.is-post .panel .pcheck { position: sticky; bottom: 0; margin-top: auto; overflow-y: auto; border-bottom: 0; }
.is-post .panel > .psec { flex: none; }
.psec h2 { font-size: 14px; font-weight: 600; }  /* 모든 패널 칸 이름 같은 크기 */
/* 사용법 창 — 한 줄씩 짧게(10-26 담당자: 창이 너무 길어) */
.dlgHelp { width: min(560px, calc(100% - 32px)); max-height: calc(100vh - 64px); }
.help div { gap: 12px; padding: 8px 0; line-height: 1.5; }
.help dt { width: 64px; }

/* 모듈 관리 — 시안보기 '글 상세 모듈'처럼 왼쪽 미리보기, 오른쪽 종류 탭과 펼치는 모듈 목록(10-26) */
.modView .pvBar { align-items: center; }
.pvName { flex: 1; }
.mtabs button.is-changed::after, .mrow.is-changed .mname::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 6px; border-radius: 50%; background: #2F6BFF; vertical-align: 3px; }
.mlist { list-style: none; }
.mrow { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.mrow:hover { background: var(--fill); }
.mrow .mname { flex: 1; }
.mrow .cnt { color: var(--gray-1); font-size: 12px; }
.mrow::after { content: ""; width: 6px; height: 6px; margin-left: 4px; border-right: 1.4px solid var(--gray-1); border-bottom: 1.4px solid var(--gray-1); transform: translateY(-2px) rotate(45deg); }
.mlist li.is-open .mrow { font-weight: 600; }
.mlist li.is-open .mrow::after { transform: translateY(2px) rotate(-135deg); }
.mbody .fld:first-of-type { margin-top: 0; }
.mbody .fld { margin-top: 12px; }
.mbody input, .mbody select, .mbody textarea { background-color: var(--bg); }
.mbody .seg { background: var(--bg); }
#histList .hrow { padding: 10px 0; font-size: 14px; }
#histList .dlgD { margin-bottom: 8px; }
.mbody > .msub > select { width: 100%; height: 36px; border: 1px solid var(--gray-2); border-radius: var(--r); color: var(--ink); font: inherit; font-size: 14px; }
.mbody .seg button { flex: 1; }
/* 모듈 관리 값 칸 — 숫자는 가운데, 기본값과 다른 칸은 파란 선(10-26) */
.pgrid input, .frow input { text-align: center; }
.mbody input.is-chg, .mbody textarea.is-chg { border-color: #2F6BFF; box-shadow: inset 2px 0 0 #2F6BFF; }
/* 블록 목록 — 1단으로 미리보기를 크게(10-26 담당자) */

/* ── 글 편집 오른쪽 패널 v2(10-26 담당자: 투박함, 노션과 피그마 패널 참고) ─────────
   위계: 칸 이름 13/600 → 탭(작은 분할 버튼) → 칸 안내 12 회색 → 카드. 칸 사이는 1px 선, 좌우 여백 16.
   '등록 전 확인'은 회색 바탕의 따로인 칸으로 아래에 붙고 머리 줄만 늘 보인다 */
.is-post .panel { width: 320px; }
.is-post .panel .psec { padding: 16px 16px 20px; }
.is-post .panel .psecH { min-height: 20px; margin-bottom: 10px; }
.is-post .panel .psecH h2, .is-post .panel .psec h2 { font-size: 14px; font-weight: 600; }
.is-post .panel .ptag { line-height: 20px; font-size: 12px; }
.is-post .panel .pnote { font-size: 12px; line-height: 1.5; }
.is-post .panel .fld > span { font-size: 12px; }
/* 탭 — 피그마처럼 작은 분할 버튼 */
.drwTabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 0 0 8px; padding: 2px; border: 0; border-radius: var(--r); background: var(--fill); }
.drwTabs button { height: 28px; margin: 0; border: 1px solid transparent; border-radius: var(--r-s); color: var(--gray-1); font-size: 12px; font-weight: 500; }
.drwTabs button[aria-selected="true"] { border-color: var(--gray-2); background: var(--bg); color: var(--ink); font-weight: 600; }
.drwTabs button:hover:not([aria-selected="true"]) { color: var(--ink); }
.psec .drwTabs + .drwList, .psec .drwList { margin-top: 0; }
.psec > .pnote + .drwTabs { margin-top: 10px; }
/* 블록 카드 — 회색 바탕 위 흰 종이에 작게 그린 블록, 아래 이름 */
.drwList { grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
.drwCard { border-color: var(--gray-2); border-radius: var(--r); transition: border-color .12s; }
.drwCard:hover { border-color: var(--ink); }
.drwCard .thumb { border-bottom: 1px solid var(--gray-2); background: var(--fill); }
.drwLab { padding: 8px 12px; font-size: 14px; font-weight: 500; line-height: 1.3; }
/* 등록 전 확인 — 따로인 칸 */
.is-post .panel .pcheck { padding: 0; max-height: 45%; }
.pcHead { display: flex; align-items: center; gap: 6px; width: 100%; height: 48px; padding: 0 16px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.pcHead::after { content: ""; width: 6px; height: 6px; margin-left: auto; border-right: 1.4px solid var(--gray-1); border-bottom: 1.4px solid var(--gray-1); transform: translateY(1px) rotate(-135deg); }
.pcT { margin-right: 4px; font-size: 14px; font-weight: 600; }
.pcN { padding: 0 6px; border-radius: var(--r-s); background: var(--fill-2); color: var(--ink-2); font-size: 12px; font-weight: 500; line-height: 20px; white-space: nowrap; }
.pcN.is-block { background: var(--ink); color: var(--bg); }
.pcBody { padding: 0 16px 16px; }
.pcAll { height: 24px; margin-bottom: 4px; padding: 0; color: var(--gray-1); font-size: 12px; }
.pcBody .clist { border-top: 1px solid var(--gray-2); }
.pcBody .citem { padding: 9px 0; font-size: 12px; }
.pcBody .citem b { width: 32px; font-size: 12px; }

/* ── 패널 공통 v2(10-26 담당자: 오른쪽 패널 수준으로 나머지 화면도) ──────────────
   작은 분할 버튼(.segS): 회색 바탕, 고른 것만 흰 칸. 칸 이름 13/600, 칸 안 작은 이름 12/600 짙은 회색, 칸 좌우 여백 16 */
.seg.segS { gap: 2px; padding: 2px; border: 0; border-radius: var(--r); background: var(--fill); overflow: visible; }
.seg.segS button { height: 28px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--r-s); background: none; color: var(--gray-1); font-size: 12px; font-weight: 500; }
.seg.segS button + button { border-left: 1px solid transparent; }
.seg.segS button[aria-pressed="true"] { border-color: var(--gray-2); background: var(--bg); color: var(--ink); font-weight: 600; }
.seg.segS button:hover:not([aria-pressed="true"]) { color: var(--ink); }

/* 블록 관리 패널 */
.modPanel { width: 340px; padding: 16px 0 40px; }
.mtabs { margin: 0 16px 8px; }
.mrow { height: 40px; padding: 0 16px; font-size: 14px; }
.mrow .mname { font-weight: 500; }
.mlist li { border-bottom: 1px solid var(--fill); }
.mlist li.is-open { background: var(--fill); }
.mbody { padding: 4px 16px 16px; }
.msub + .msub { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--gray-2); }
.msubT { margin-bottom: 8px; color: var(--ink-2); font-size: 12px; font-weight: 600; }
.mbody .fld input, .mbody .fld select, .mbody > .msub > select { height: 32px; font-size: 14px; }
.mbody .fld textarea { padding: 8px 10px; font-size: 14px; }
.mbody .fld > span { font-size: 12px; color: var(--gray-1); }
.pgrid { gap: 6px 8px; }
.pgrid .plabel { font-size: 12px; color: var(--ink); }
.pgrid .phd { font-size: 12px; }
.pvName { font-size: 16px; font-weight: 600; }
.modView { padding: 16px 20px 0; }


/* 관리 화면(팀과 권한, 최종본 내보내기) */
.admHead h1 { font-size: 20px; font-weight: 600; }
.adm .state#sum { padding: 16px; border: 1px solid var(--gray-2); border-radius: var(--r); background: var(--fill); color: var(--ink); font-size: 14px; }
.permT { border: 1px solid var(--gray-2); border-radius: var(--r); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.permT thead th { background: var(--fill); border-bottom: 1px solid var(--gray-2); font-size: 12px; font-weight: 500; }
.permT th:first-child, .permT td:first-child { padding-left: 16px; }
.permT tbody tr:last-child th, .permT tbody tr:last-child td { border-bottom: 0; }
.permT tbody th { font-size: 14px; font-weight: 500; }
/* 패널 스크롤바 자리를 늘 비워 두어, 패널 내용이 바뀌어도 미리보기 칸 폭(과 PC 줄임 비율, 스크롤 자리)이 흔들리지 않게(10-26) */
.is-post .panel { overflow-y: auto; scrollbar-gutter: stable; }
/* 고르기 안내 글은 회색 */
select.is-ph { color: var(--gray-1); }
select.is-ph option { color: var(--ink); }
.paneS { scrollbar-gutter: stable; }  /* 스크롤바가 나중에 생겨도 폭이 그대로라 PC 줄임 비율이 바뀌지 않게 */
/* 고른 블록 칸 — 작은 '고른 블록' → 블록 이름 15/600과 '블록 바꾸기' → 선 아래 '설정' 줄(이름 왼쪽 12 회색, 값 오른쪽) */
.pEye { margin-bottom: 4px; color: var(--gray-1); font-size: 12px; font-weight: 500; }
.pblockH { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.is-post .panel .pblockH h2 { min-width: 0; margin: 0; overflow: hidden; font-size: 16px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.swapSel { flex: none; width: auto; max-width: 140px; height: 28px !important; border: 1px solid var(--gray-2); border-radius: var(--r); padding: 0 28px 0 10px !important; background-position: right 8px center !important; color: var(--ink); font: inherit; font-size: 12px; }
.swapSel:hover { border-color: var(--ink); }
.swapSel.is-ph { color: var(--ink); }
.psub { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--gray-2); }
.psubT { margin-bottom: 10px; color: var(--ink-2); font-size: 12px; font-weight: 600; }
.prow { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 8px; }
.prow + .prow { margin-top: 8px; }
.prowL { color: var(--gray-1); font-size: 12px; }
.prow select, .prow input { width: 100%; height: 32px; padding: 0 10px; border: 1px solid var(--gray-2); border-radius: var(--r); background-color: var(--bg); color: var(--ink); font: inherit; font-size: 14px; }
.prow select { padding-right: 32px !important; padding-left: 10px !important; background-position: right 10px center !important; }
.prow input:focus, .prow select:focus { outline: none; border-color: var(--ink); }
.prow .seg { width: 100%; }
.prow .seg button { flex: 1; }
.pwarn { margin-top: 8px; color: var(--ink); font-size: 12px; }
/* 아래 고정 칸(등록 전 확인) — 바탕을 한 단계 더 어둡게, 위 선도 진하게 해서 블록 목록과 경계를 뚜렷하게(10-26 담당자) */
.is-post .panel .pcheck { background: var(--fill); border-top: 1px solid var(--gray-2); }
.is-post .panel .pcheck .pcN:not(.is-block) { background: var(--gray-2); }
.is-post .panel .pcheck .pcBody .clist { border-top-color: var(--gray-2); }
.is-post .panel .pcheck .citem { border-bottom-color: var(--gray-2); }
/* 블록 카드 — 카드 전체가 누르는 버튼(추가). 블록을 고른 동안에는 그림 위에 '아래에 추가', '이걸로 바꾸기'(같은 블록이면 바꾸기는 숨김) */
.drwCard { position: relative; padding: 0; overflow: hidden; cursor: grab; }
.drwMain { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.drwActs { position: absolute; left: 0; right: 0; display: none; align-items: center; justify-content: center; gap: 6px; }
.drwActs button { height: 30px; padding: 0 12px; font-size: 12px; }
.can-swap .drwCard:hover .drwActs, .can-swap .drwCard:focus-within .drwActs { display: flex; }
.can-swap .drwCard.is-same .drwSwap { display: none; }
/* 글 편집 미리보기 — 흰 페이지는 실제 상세 페이지 높이 그대로, 페이지 테두리는 iframe 안 #wrap 에 그리고, 칸 아래에 회색 여유(240)를 두어
   끝까지 굴려도 넉넉하고 글 끝에서 연 입력 창은 그 회색 자리로 잠깐 늘어나 보인다(10-26 담당자) */
.is-post .paneS { padding-bottom: 120px; }  /* 10-26 담당자: 240은 많아 줄임. 입력 창(높이 약 170)이 페이지 끝에서 열려도 들어감 */
.is-post .paneS .frame { outline: none; background: transparent; }
.is-post .paneS .frame iframe { background: transparent; }
.drwActs button { min-width: 96px; }  /* 두 버튼은 같은 위계(흰 바탕 테두리), 같은 폭(10-26 담당자) */
/* 미리보기 페이지 뒤 바탕을 더 어둡게 해서 흰 페이지와 뚜렷이 나뉘게(10-26 담당자). 글 편집, 블록 관리 미리보기 모두 같은 색 */
.is-post .stage, .modView { background: var(--gray-2); }  /* 10-26 담당자: 한 번 더 어둡게(var(--fill-2) → var(--gray-2)) */
.paneL { color: var(--ink-2); }
.pcBody .clist { margin-top: 0; }
.citem.is-sel { box-shadow: inset 2px 0 0 #2F6BFF; padding-left: 8px; }  /* 고른 블록 항목 */
/* 아래에 붙은 칸이라 위로 펼쳐진다 — 접혀 있을 때 위 화살표(펼치기), 펼쳤을 때 아래 화살표(접기)(10-26 담당자) */
.pcheck .pcHead::after { transform: translateY(-2px) rotate(45deg); }
.pcheck:not(.is-open) .pcHead::after { transform: translateY(2px) rotate(-135deg); }
/* 등록 전 확인 — 머리 줄은 고정, 목록만 안에서 굴러간다. 위 블록 카드가 이 칸 위로 겹쳐 그려지지 않게 앞으로(10-26 담당자) */
.is-post .panel .pcheck { z-index: 3; display: flex; flex-direction: column; overflow: hidden; }
.pcheck .pcHead { flex: none; }
.pcheck .pcBody { flex: 1; min-height: 0; overflow-y: auto; }
/* 블록 카드 두 버튼 — 카드 전체를 검정 딤으로 덮고 두 버튼을 카드 가운데에(10-26 담당자) */
.drwActs { top: 0; bottom: 0; height: auto; border-radius: var(--r-s); }
.drwActs .btnL { border-color: var(--bg); }
/* 좁은 창에서는 MO 칸도 줄어들어 PC 칸이 0으로 밀려나지 않게(둘 다 최소 200) */
.panes.is-both .pane.is-mo { flex: 0 1 406px; min-width: 200px; }
.panes.is-both .pane.is-pc { min-width: 200px; }
/* 블록 카드 딤 — 흰색 딤에 검정 버튼 둘(같은 위계)(10-26 담당자) */
.drwActs { background: rgba(255, 255, 255, .8); }
.drwActs .btnL, .drwActs .btnL:hover { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.drwActs .btnL:hover { background: var(--ink-3); border-color: var(--ink-3); }
/* 창 오른쪽 위 닫기(X) */
.dlg { position: relative; }
.dlgX { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--r); background: none; color: var(--gray-1); cursor: pointer; }
.dlgX:hover { background: var(--fill); color: var(--ink); }
.dlgX svg { width: 18px; height: 18px; }
.dlgX[hidden] { display: none; }
/* 편집 화면 팀 이름 — 누를 수 없는 작은 글자(10-26 담당자: 팀 바꾸기는 글 목록 계정 메뉴에서만) */
.teamTag { flex: none; color: var(--gray-1); font-size: 12px; white-space: nowrap; }

/* 프로필 동그라미(피그마, 노션처럼, 10-26 담당자) — 팀 이름 첫 글자. 내 팀은 검정, 다른 팀은 회색 */
.av { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--gray-2); color: var(--ink-2); font-size: 12px; font-weight: 600; line-height: 1; }
.av.is-me { background: var(--ink); color: var(--bg); }
.acct { display: inline-flex; align-items: center; gap: 2px; height: 34px; padding: 0 8px 0 4px; border: 0; border-radius: 17px; background: none; }
.acct:hover { background: var(--fill); }
.acct::after { margin-left: 6px; }
.acctNo { font-size: 14px; padding-left: 6px; }
.acctPop { min-width: 240px; }
.acctPop button { justify-content: flex-start; gap: 10px; }
.acctPop button[aria-checked="true"]::after { margin-left: auto; }
.acctPop .av { width: 22px; height: 22px; font-size: 12px; }
/* 편집 화면 — 이 글을 고치는 팀 프로필(내 팀 맨 앞, 다른 팀은 겹쳐서). 누를 수 없음 */
.avs { display: inline-flex; align-items: center; flex: none; }
.avs .av { border: 2px solid var(--bg); width: 28px; height: 28px; }
.avs .av + .av { margin-left: -8px; }

/* 등록 전 확인 바로 위 칸은 아래선을 빼서 구분선이 1px 한 줄로만 보이게 (10-26 담당자: 끝까지 내리면 선이 두 줄로 겹쳐 두꺼움) */
.is-post .panel > .psec:has(+ .pcheck) { border-bottom: 0; }

/* 보기 타입(PC/MO, PC, MO)은 하나를 고르는 것이라 회색 바탕 분할 버튼, 미리보기는 켜고 끄는 행동이라 테두리 버튼. 높이는 둘 다 32 (10-26 담당자: 모양이 같은데 크기가 미묘하게 다름) */
.top .seg.segS button, .pvBar .seg.segS button { height: 28px; padding: 0 12px; font-size: 14px; }
.top .seg.segS, .pvBar .seg.segS { margin: 0; flex: none; }
.modView { overflow: hidden; }  /* 창이 좁을 때 PC 화면이 오른쪽 패널을 덮지 않게 */
.modView .panes { overflow-x: auto; overflow-y: hidden; }

/* 저장 상태 — 제목 옆 구름 아이콘, 올리면 마지막 저장 때 (10-26 담당자: 다른 서비스처럼 익숙하게. 구글 문서 방식) */
.pcHead .pcT, .pcHead .pcN { flex: none; white-space: nowrap; }
.is-post .top .edT h1 { flex: 0 1 auto; }
.saveIco { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: -6px; border-radius: var(--r); color: var(--gray-3); outline: none; }
.saveIco[hidden] { display: none; }
.saveIco svg { width: 18px; height: 18px; }
.saveIco:hover, .saveIco:focus-visible { color: var(--ink); background: var(--fill); }
.saveIco.is-busy svg { width: 14px; height: 14px; animation: saveSpin .8s linear infinite; }
.saveIco.is-fail { color: var(--ink); }
@keyframes saveSpin { to { transform: rotate(360deg); } }
.saveIco::after { content: attr(data-tip); position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; padding: 6px 8px; border-radius: var(--r); background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 400; line-height: 1.4; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s; }
.saveIco:hover::after, .saveIco:focus-visible::after { opacity: 1; }

/* 팀과 권한: NAS 계정 소속 칸 (10-26 사내 서버 준비) */
.permT td.permLabC, .permT thead th:nth-child(2) { text-align: left; }
.permT .permLab { width: 100%; max-width: 200px; cursor: text; accent-color: auto; height: 32px; padding: 0 10px; border: 1px solid var(--gray-2); border-radius: var(--r); font: inherit; font-size: 14px; color: var(--ink); background: var(--bg); }
.permT .permLab:focus { outline: none; border-color: var(--ink); }

/* 로그인 (10-26 사내 서버 준비: NAS 계정) */
.is-login { min-height: 100vh; background: var(--fill); }
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.loginBox { width: 100%; max-width: 360px; padding: 32px 28px; border: 1px solid var(--gray-2); border-radius: var(--r); background: var(--bg); display: flex; flex-direction: column; gap: 16px; }
.loginBox .brand { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.loginBox .brand b { font-weight: 600; }
.loginBox h1 { margin: 4px 0 8px; font-size: 20px; font-weight: 600; }
.loginF { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--gray-1); }
.loginF input { height: 40px; padding: 0 12px; border: 1px solid var(--gray-2); border-radius: var(--r); font: inherit; font-size: 14px; color: var(--ink); background: var(--bg); }
.loginF input:focus { outline: none; border-color: var(--ink); }
.loginErr { margin: 0; padding: 10px 12px; border-radius: var(--r); background: var(--fill); color: var(--ink); font-size: 14px; }  /* 툴의 다른 알림처럼 색 없이 */
.loginBox .btnP { height: 40px; margin-top: 4px; }
.loginSub { margin: -8px 0 4px; color: var(--gray-1); font-size: 14px; }
.loginTeams { display: flex; flex-direction: column; gap: 8px; }
.loginTeams button { height: 40px; }
.loginBox[hidden] { display: none; }
/* 프로필 메뉴(10-27 담당자: 노션, 구글처럼) — 맨 위 이름과 팀, 칸마다 1px 선으로 나눔, 항목은 아이콘과 이름 */
.acctHead { display: flex; align-items: center; gap: 12px; padding: 8px 10px 12px; }
.acctPop .acctHead .av { width: 36px; height: 36px; font-size: 16px; }
.acctWho { min-width: 0; }
.acctName { font-size: 14px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acctTeam { margin-top: 2px; color: var(--gray-1); font-size: 12px; }
.acctSec { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--gray-2); }
.acctLab { padding: 6px 10px 4px; color: var(--gray-1); font-size: 12px; }
.acctSec a, .acctPop .acctSec button { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--r); color: var(--ink); font-size: 14px; text-decoration: none; }
.acctSec a:hover { background: var(--fill); }
.acctSec a[aria-current="page"] { font-weight: 600; }
.acctIco { display: inline-flex; width: 22px; justify-content: center; color: var(--ink-2); }
.acctIco svg { width: 16px; height: 16px; }

/* ── 어드민 등록 화면(handoff) (10-27 담당자: 스튜디오에서 쓰고 어드민 칸을 채우게 돕는 복사) ── */

.is-hand .top { position: sticky; top: 0; z-index: 2; gap: 12px; background: var(--bg); }
.is-hand .top .edT { flex: 1; min-width: 0; }
.is-hand .top .edT h1 { min-width: 0; color: var(--gray-1); font-size: 14px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.is-hand .top .btnL { display: inline-flex; align-items: center; text-decoration: none; }
.is-hand .top .txtBtn { display: inline-flex; align-items: center; text-decoration: none; }
.hoMark { display: flex; align-items: center; gap: 8px; }
.hoDone { font-size: 14px; font-weight: 600; }
.hoOld { color: var(--gray-1); font-size: 12px; }
.hoRows { list-style: none; padding: 0 0 40px; }
/* 어드민에 옮기는 차례(10-27 담당자: 토스처럼 한 번에 한 단계) — 진행 막대, 끝난 단계(접힘), 지금 단계(펼침, 아래 큰 버튼), 남은 단계(흐린 이름) */
.hoProg { position: sticky; top: 0; z-index: 1; padding: 16px 20px 12px; background: var(--bg); }
.hoProgT { color: var(--gray-1); font-size: 14px; }
.hoProgT b { color: var(--ink); font-weight: 600; }
.hoBar { height: 4px; margin-top: 8px; border-radius: var(--r-s); background: var(--fill-2); overflow: hidden; }
.hoBar span { display: block; height: 100%; border-radius: var(--r-s); background: var(--ink); transition: width .25s ease; }
.hoDoneRow button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 20px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.hoDoneRow button:hover:not(:disabled) { background: var(--fill); }
.hoDoneRow button:disabled { cursor: default; }
.hoChk { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); -webkit-mask: none; position: relative; }
.hoChk::after { content: ""; position: absolute; inset: 4px; background: var(--bg); -webkit-mask: var(--chk) center / contain no-repeat; mask: var(--chk) center / contain no-repeat; }
.hoDn { flex: none; color: var(--gray-1); font-size: 14px; }
.hoDv { flex: 1; min-width: 0; color: var(--ink); font-size: 14px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hoNow { margin: 8px 12px; padding: 20px; border: 1px solid var(--ink); border-radius: var(--r); display: flex; flex-direction: column; gap: 12px; }
.hoNowK { color: var(--gray-1); font-size: 12px; font-weight: 600; }
.hoNowT { margin-top: -6px; font-size: 20px; font-weight: 600; line-height: 1.4; }
.hoNowB { display: flex; flex-direction: column; gap: 10px; }
.hoCta { width: 100%; height: 44px; font-size: 16px; }
.hoNow .btnL { display: inline-flex; align-items: center; height: 32px; font-size: 14px; text-decoration: none; }
.hoBig { padding: 4px 0; }
.hoBig .hoPill { font-size: 16px; line-height: 32px; padding: 0 12px; }
.hoOk { color: var(--ink); font-size: 14px; font-weight: 600; }
.hoLink { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.hoCode { max-height: 72px; overflow: hidden; font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--gray-1); }
.hoNext { display: flex; align-items: center; gap: 10px; padding: 10px 20px; color: var(--gray-3); font-size: 14px; }
.hoNextNo { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--gray-2); font-size: 12px; font-weight: 600; }
.hoFin { margin: 8px 12px; padding: 32px 20px; border-radius: var(--r); background: var(--fill); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.hoFinIco { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); position: relative; }
.hoFinIco::after { content: ""; position: absolute; inset: 12px; background: var(--bg); -webkit-mask: var(--chk) center / contain no-repeat; mask: var(--chk) center / contain no-repeat; }
.hoFinT { font-size: 20px; font-weight: 600; }
.hoTxt { color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.hoPill { display: inline-block; padding: 0 8px; border: 1px solid var(--gray-2); border-radius: var(--r); color: var(--ink); font-size: 12px; font-weight: 600; line-height: 22px; }
.hoLine { display: flex; align-items: center; gap: 8px; }
.hoVal { flex: 1; min-width: 0; padding: 8px 10px; border-radius: var(--r); background: var(--fill); color: var(--ink); font-size: 14px; line-height: 1.5; word-break: break-all; }
.hoCopy { flex: none; height: 32px; padding: 0 12px; font-size: 12px; }
.hoTip { color: var(--gray-1); font-size: 12px; }
.hoSub { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.hoSub li::marker { color: var(--gray-1); }
.hoSub li > .btnL + .hoTip { margin-left: 8px; }
.hoPaste { display: block; width: 100%; padding: 8px 10px; border: 1px solid var(--gray-2); border-radius: var(--r); font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); resize: vertical; }
.hoPaste:focus { outline: none; border-color: var(--ink); }
.hoStat { margin-top: 6px; color: var(--gray-1); font-size: 12px; }
.hoStat.is-bad { color: var(--ink); font-weight: 600; }
.hoKv { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.hoKv div { display: flex; gap: 12px; }
.hoKv dt { flex: none; width: 88px; color: var(--gray-1); }
.hoKv dd { flex: 1; min-width: 0; color: var(--ink); }
.hoBlock { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px 20px; }
.hoBlockT { font-size: 16px; font-weight: 600; }
.hoBlockL { display: flex; flex-direction: column; gap: 6px; padding-left: 16px; color: var(--gray-1); font-size: 14px; list-style: disc; }
.hoBlock .btnP { display: inline-flex; align-items: center; text-decoration: none; }
.is-hand > .state { padding: 40px 24px; }
.hand { display: flex; height: calc(100vh - var(--head)); }
.handView { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--gray-2); }
.handBar { display: flex; align-items: center; gap: 16px; padding: 12px 20px; }
.handBar .seg.segS { margin: 0; background: var(--fill-2); }
.handStage { flex: 1; min-height: 0; overflow-y: auto; padding: 0 20px 80px; display: flex; justify-content: center; align-items: flex-start; }
.handStage .frame { flex: none; background: var(--bg); outline: 1px solid var(--gray-2); overflow: hidden; }
.handStage iframe { display: block; border: 0; transform-origin: 0 0; }
.handPanel { flex: none; width: 400px; overflow-y: auto; border-left: 1px solid var(--gray-2); background: var(--bg); }
@media (max-width: 900px) { .hand { flex-direction: column; height: auto; } .handPanel { width: auto; border-left: 0; border-top: 1px solid var(--gray-2); } .handStage { min-height: 60vh; } }
.regBar .state#sum { padding: 0; border: 0; background: none; color: var(--gray-1); font-size: 14px; }
.admHead .btnL { display: inline-flex; align-items: center; text-decoration: none; }

/* ── 새 글 넣기 (10-27) ── */
.incList { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.incList:empty { display: none; }
/* 들어온 초안 한 줄 — 글 목록 목록형(.cards.is-list)과 같은 모양: 사진 120, 카테고리, 제목, 요약, 날짜. 선 없이 여백으로 */
.incRow { display: flex; align-items: center; gap: 20px; margin: 0 -12px; padding: 12px; border-radius: var(--r); }
.incRow .cardImg { flex: none; width: 120px; border-radius: var(--r); }
.incRow .cardTx { flex: 1; min-width: 0; padding-top: 0; }
.incRow .cardT { margin-top: 4px; font-size: 16px; -webkit-line-clamp: 1; }
.incMsgs { margin-top: 8px; font-size: 12px; }
.incMsgs summary { cursor: pointer; color: var(--ink); }
.incMsgs ul { margin: 6px 0 0; padding-left: 16px; color: var(--ink-2); line-height: 1.6; }
.incActs { flex: none; display: flex; align-items: center; gap: 8px; }
@media (max-width: 520px) { .incRow { flex-wrap: wrap; gap: 12px; } .incRow .cardImg { width: 88px; } .incActs { width: 100%; justify-content: flex-end; } }
.incPv { width: min(1100px, calc(100vw - 48px)); max-width: none; height: calc(100vh - 80px); padding: 0; display: flex; flex-direction: column; }
.incPv:not([open]) { display: none; }
.incPvHead { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--gray-2); }
.incPvHead h2 { flex: 1; min-width: 0; margin: 0; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.incPvHead .seg.segS { margin: 0; }
.incPvStage { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; background: var(--gray-2); display: flex; justify-content: center; align-items: flex-start; }
.incPvStage .frame { flex: none; background: var(--bg); overflow: hidden; }
.incPvStage iframe { display: block; border: 0; transform-origin: 0 0; }

/* 어드민 등록: 사진 S3 주소 채우기 (10-27 B안) */

/* 새 글(베타) — 준비 중 안내와 관리 권한 팀의 들어온 초안 (10-27 담당자) */
.beta { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--gray-2); border-radius: var(--r-s); color: var(--gray-1); font-size: 12px; font-weight: 500; line-height: 20px; vertical-align: middle; }
.incSoon { padding: 40px 24px; border-radius: var(--r); background: var(--fill); text-align: center; }
.incSoonT { font-size: 16px; font-weight: 600; }
.incSoonD { margin-top: 6px; color: var(--gray-1); font-size: 14px; }
.incBox { margin-top: 40px; }
.incH { margin-bottom: 12px; font-size: 16px; font-weight: 600; }
.incH .cnt { margin-left: 4px; color: var(--gray-1); font-weight: 400; }

/* 편집 화면 머리(10-28 담당자: 정리) — 왼쪽 글, 가운데 보기, 오른쪽 할 일. 양쪽 칸이 같은 몫이라 가운데가 화면 가운데에 온다 */
.edTop { gap: 12px !important; }
.edTop .topL, .edTop .topR { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 12px; }
.edTop .topR { justify-content: flex-end; gap: 8px; }
.edTop .topL .edT { flex: 0 1 auto; }
.edTop .topC { flex: none; display: flex; align-items: center; gap: 8px; }
.edTop .tools { display: flex; align-items: center; gap: 2px; padding-left: 12px; border-left: 1px solid var(--gray-2); height: 20px; }
.edTop .tools[hidden], .edTop .moreBox[hidden] { display: none; }
/* 이 글을 보는 사람(10-28 담당자: 피그마처럼) — 다른 사람(회색) 뒤에 나(검정)를 겹치고 꺾쇠. 누르면 나, 지금 보는 사람, 최근에 본 사람 */
.ppl { position: relative; flex: none; margin-right: 4px; }
.ppl[hidden] { display: none; }
.pplBtn { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 4px 0 2px; border: 0; border-radius: 16px; background: none; cursor: pointer; }
.pplBtn:hover, .pplBtn[aria-expanded="true"] { background: var(--fill); }
.pplChev { width: 5px; height: 5px; margin: 0 4px 3px 2px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg); }
.avs .av.more { background: var(--fill); color: var(--gray-1); font-size: 12px; }
.pplPop { position: absolute; top: calc(100% + 12px); right: 0; z-index: 10; width: 260px; padding: 8px 0; border: 1px solid var(--gray-2); border-radius: var(--r); background: var(--bg); }
.pplPop[hidden] { display: none; }
.pplPop .pplSec + .pplSec { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--fill); }
.pplPop .pplLab { padding: 8px 14px 4px; color: var(--gray-1); font-size: 12px; }
.pplPop .pplRow { display: flex; align-items: center; gap: 10px; padding: 7px 14px; }
.pplPop .pplRow .av { width: 28px; height: 28px; }
.pplPop .pplWho { flex: 1; min-width: 0; }
.pplPop .pplName { font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pplPop .pplSub { margin-top: 1px; font-size: 12px; color: var(--gray-1); }
.pplPop .pplTag { flex: none; font-size: 12px; color: var(--gray-1); }
.pplPop .pplNone { padding: 4px 14px 8px; font-size: 12px; color: var(--gray-1); }
.moreBox { position: relative; flex: none; }
.morePop { position: absolute; top: calc(100% + 12px); right: 0; z-index: 10; min-width: 160px; padding: 6px; border: 1px solid var(--gray-2); border-radius: var(--r); background: var(--bg); }
.morePop[hidden] { display: none; }
.morePop button { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: var(--r); background: none; color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.morePop button:hover { background: var(--fill); }
.morePop svg { width: 16px; height: 16px; color: var(--gray-1); }
@media (max-width: 900px) { .edTop .tools { display: none; } }

/* ── Material 3 부품(material-web 토큰, 10-28 담당자) — 위 규칙보다 뒤에 두어 이긴다 ── */
body { font-size: 14px; letter-spacing: 0; }
/* Button: 높이 40, 끝까지 둥글게, 글자 label-large 14/500. Filled(채움) primary, Outlined(테두리) outline 선, Text(글자) 안 여백 12 */
.btnL, .btnP, .top .btnL, .top .btnP, .subBar .btnL, .subBar .btnP { height: 40px; padding: 0 24px; border-radius: 9999px; font-size: 14px; font-weight: 500; }
.btnP { border-color: var(--brand); background: var(--brand); color: var(--on-brand); }
.btnP:hover:not(:disabled) { border-color: var(--brand-hover); background: var(--brand-hover); box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px 1px rgba(0, 0, 0, .15); }
.btnP:disabled { border-color: transparent; background: rgba(25, 28, 30, .12); color: var(--gray-3); }
.btnL { border-color: var(--outline); background: transparent; color: var(--brand); }
.btnL:hover:not(:disabled) { border-color: var(--outline); background: var(--hover); }
.btnL:disabled { border-color: rgba(25, 28, 30, .12); background: transparent; color: var(--gray-3); }
.btnL[aria-pressed="true"], .pvBtn[aria-pressed="true"] { border-color: var(--sec-c); background: var(--sec-c); color: var(--ink); }
.hoCta { height: 48px; }
.hoNow .btnL { height: 32px; padding: 0 16px; font-size: 14px; }
.icoBtn { width: 40px; height: 40px; border-radius: 50%; color: var(--ink-2); }  /* Icon button standard: 상태 층 40, 아이콘 24 */
.icoBtn svg { width: 22px; height: 22px; }
.icoBtn:hover:not(:disabled) { background: var(--hover); }
.txtBtn { height: 40px; padding: 0 12px; border-radius: 9999px; color: var(--brand); font-size: 14px; font-weight: 500; }
.txtBtn:not(:disabled):hover { background: var(--hover); text-decoration: none; }
/* Text field(outlined): 모서리 4, outline 선, 고르면 2px primary. 높이는 56. 찾기 칸은 Search bar(56, 끝까지 둥글게, surface-container-high, 선 없음) */
.fld input, .fld select, .permAdd input, .modPick select, .teamPick select, .loginF input { height: 40px; padding: 0 12px; border: 1px solid var(--outline); border-radius: var(--r-s); background: transparent; color: var(--ink); font-size: 14px; }  /* 머티리얼은 56이지만 툴에는 커서 버튼과 같은 40(10-28 담당자) */
.top select, .subBar select { height: 40px; padding: 0 12px; border: 1px solid var(--outline); border-radius: var(--r-s); font-size: 14px; }
.libBar input[type="search"] { width: 260px; height: 40px; padding: 0 16px; border: 0; border-radius: 9999px; background: var(--fill-2); color: var(--ink); font-size: 14px; }  /* 머티리얼 Search bar 모양, 높이는 40(10-28 담당자: 너무 큼) */
input::placeholder, textarea::placeholder { color: var(--ink-2); opacity: .7; }
input:focus, select:focus, textarea:focus { border-color: var(--brand) !important; box-shadow: inset 0 0 0 1px var(--brand); outline: none; }
.libBar input[type="search"]:focus { box-shadow: none; background: var(--sec-c); }
/* Filter chip(상태 칩, 보기 타입, 블록 종류): 32, 모서리 8, 글자 14/500. 안 고른 것 outline-variant 선, 고른 것 secondary-container 바탕과 체크 */
.chip, .sortChip { height: 32px; padding: 0 16px; border: 1px solid var(--gray-2); border-radius: var(--r); background: transparent; color: var(--ink-2); font-size: 14px; font-weight: 500; }
.chip:hover:not(:disabled), .sortChip:hover { background: var(--hover); color: var(--ink-2); }
.chip[aria-pressed="true"] { padding-left: 8px; border-color: var(--sec-c); background: var(--sec-c); color: var(--ink); font-weight: 500; }
.chip[aria-pressed="true"]::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: -4px; background: currentColor; -webkit-mask: var(--chkM) center / contain no-repeat; mask: var(--chkM) center / contain no-repeat; }
.chip:disabled { border-color: rgba(25, 28, 30, .12); background: transparent; color: var(--gray-3); }
.sortChip { border: 0; padding: 0 12px; }
:root { --chkM: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* 분할 버튼은 머티리얼 Segmented button: 높이 40, 끝까지 둥근 묶음, outline 선, 고른 칸 secondary-container */
.seg.segS { gap: 0; padding: 0; border: 1px solid var(--outline); border-radius: 9999px; background: transparent; overflow: hidden; }
.seg.segS button, .top .seg.segS button, .pvBar .seg.segS button { height: 38px; padding: 0 14px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font-size: 14px; font-weight: 500; }
.seg.segS button + button { border-left: 1px solid var(--outline); }
.seg.segS button[aria-pressed="true"] { border-color: var(--outline); background: var(--sec-c); color: var(--ink); font-weight: 500; }
.seg.segS button:hover:not([aria-pressed="true"]) { background: var(--hover); color: var(--ink); }
.viewSeg button { width: 44px; }
.viewSeg svg { width: 18px; height: 18px; }
/* Tabs(primary): 48, 글자 title-small 14/500, 고른 탭은 primary 글자와 3px 표시 선(위 모서리 둥글게) */
.tabs { gap: 0; }
.tabs button { position: relative; height: 48px; padding: 0 16px; border-bottom: 0; color: var(--ink-2); font-size: 14px; font-weight: 500; }
.tabs button:hover { background: var(--hover); }
.tabs button[aria-selected="true"] { color: var(--brand); font-weight: 500; }
.tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--brand); }
/* Menu: surface-container, 모서리 4, elevation 2, 위아래 8. 항목 48, 안 여백 12, 글자 label-large 14/500, 올리면 상태 층 8% */
.acctPop, .morePop, .pplPop { padding: 8px 0; border: 0; border-radius: var(--r-s); background: var(--fill-c); color: var(--ink); box-shadow: var(--shadow-sm); }
.acctSec a, .acctPop .acctSec button, .acctPop button, .morePop button { height: 48px; padding: 0 12px; gap: 12px; border-radius: 0; background: none; color: var(--ink); font-size: 14px; font-weight: 500; }
.acctPop a:hover, .acctPop button:hover, .morePop button:hover { background: var(--hover); color: var(--ink); }
.acctIco svg, .morePop svg { width: 24px; height: 24px; color: var(--ink-2); }
.acctSec, .acctPop .acctSec, .pplPop .pplSec + .pplSec { margin: 0; padding: 8px 0 0; border-color: var(--gray-2) !important; }
.acctHead { padding: 8px 12px 12px; }
.acctName, .pplPop .pplName { color: var(--ink); font-size: 16px; font-weight: 500; }
.acctTeam, .acctLab, .pplPop .pplLab, .pplPop .pplSub, .pplPop .pplTag, .pplPop .pplNone { color: var(--ink-2); font-size: 14px; font-weight: 400; }
.acctLab, .pplPop .pplLab { padding: 8px 12px 4px; font-size: 12px; font-weight: 500; }
.pplPop { width: 300px; }
.pplPop .pplRow { min-height: 56px; padding: 8px 12px; gap: 12px; }
.pplPop .pplNone { padding: 8px 12px; }
/* 동그라미 */
.av { width: 32px; height: 32px; font-size: 14px; font-weight: 500; background: var(--sec-c); color: var(--ink); }
.av.is-me { background: var(--brand); color: var(--on-brand); }
.avs .av { width: 32px; height: 32px; border-color: var(--bg); }
.acctPop .av, .pplPop .av { border: 0; }
.acctPop .acctHead .av { width: 40px; height: 40px; font-size: 16px; }
.pplBtn { height: 40px; border-radius: 20px; }
.pplBtn:hover, .pplBtn[aria-expanded="true"] { background: var(--hover); }
/* Dialog: surface-container-high, 모서리 28, 안 여백 24, 제목 headline-small 24, 내용 body-medium 14, 버튼은 오른쪽 아래 글자 버튼 */
.dlg { width: min(400px, calc(100% - 32px)); padding: 24px; border: 0; border-radius: var(--r-xl); background: var(--fill-2); box-shadow: var(--shadow-pop); }
.dlg::backdrop { background: rgba(0, 0, 0, .32); }
.dlgT { font-size: 24px; font-weight: 400; line-height: 32px; margin-bottom: 16px; }
.dlgD { font-size: 14px; line-height: 20px; color: var(--ink-2); }
.dlgB { gap: 8px; margin-top: 24px; }
.dlg .btnL { border-color: transparent; padding: 0 12px; }
.dlg .btnL:hover:not(:disabled) { border-color: transparent; }
/* Snackbar: inverse-surface, 모서리 4, 글자 body-medium 14, elevation 3 */
.toast { padding: 14px 16px; border-radius: var(--r-s); background: var(--inv); color: var(--on-inv); font-size: 14px; box-shadow: var(--shadow-pop); }
/* 패널, 목록 */
.psec h2, .is-post .panel .psecH h2, .is-post .panel .psec h2 { font-size: 14px; font-weight: 500; }
.pnote, .is-post .panel .pnote { font-size: 12px; }
.is-post .top .edT h1 { font-size: 16px; }
.edK { font-size: 16px; font-weight: 500; }
.mrow { height: 48px; font-size: 14px; }
.mrow:hover { background: var(--hover); }
:where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--ring); }
/* 스크롤바 자리를 늘 비워 둔다(10-28 담당자: 글이 적은 카테고리로 바꾸면 스크롤바가 사라지며 화면이 옆으로 움직임).
   화면 높이에 꼭 맞춰 페이지 자체는 굴리지 않는 화면(글 편집, 어드민 등록, 블록 보기)은 빈 자리가 남지 않게 뺀다 */
html { overflow-y: auto; scrollbar-gutter: stable; }  /* 크롬은 overflow 가 visible 이면 자리를 비우지 않아 auto 로 둔다 */
html:has(body.is-post), html:has(body.is-hand), html:has(body.is-mods) { overflow-y: visible; scrollbar-gutter: auto; }
/* 아이콘 크기 하나로(10-28 담당자: 비율, 선 굵기, 크기가 제각각) — Material Symbols Rounded 20px 광학 크기판을 어디서나 20px 로.
   글자 옆에 붙는 작은 표시(정렬 화살표, 임시 저장 구름)와 캔버스 도구 막대만 18px */
.icoBtn svg, .acctIco svg, .morePop svg, .viewSeg svg, .pplBtn svg { width: 20px; height: 20px; }
.sortBtn svg, #sortBtn svg, .saveIco svg { width: 18px; height: 18px; }
/* 상태 칩 앞 이름표(10-28 담당자): '어드민' 한 번, 칩은 등록 전, 등록 완료, 수정 필요 */
.chipLab { display: inline-flex; align-items: center; height: 32px; margin-right: 4px; color: var(--gray-1); font-size: 13px; font-weight: 500; }
.chipSep { width: 1px; height: 20px; margin: 6px 6px; background: var(--gray-2); }
.viewSeg button { padding: 0; }
svg { flex: none; }  /* 버튼이 좁아도 아이콘이 찌그러지지 않게 */
.edTop .icoBtn[hidden] { display: none; }
.citem b, .pcBody .citem b { width: auto; min-width: 40px; white-space: nowrap; }  /* '고칠 것'이 두 줄로 꺾이지 않게(10-28) */
/* 어드민 등록 패널을 한 단계 작게(10-28 담당자: 좋은데 너무 커서 부담) — 제목 20→16, 큰 버튼 48→40, 본문 14→13, 여백 줄임 */
.hoProg { padding: 12px 20px 10px; }
.hoProgT { font-size: 13px; }
.hoDoneRow button { gap: 8px; padding: 8px 20px; }
.hoChk { width: 18px; height: 18px; }
.hoDn, .hoDv, .hoNext { font-size: 13px; }
.hoNext { gap: 8px; padding: 8px 20px; }
.hoNextNo { width: 18px; height: 18px; font-size: 11px; }
.hoNow { margin: 6px 12px; padding: 16px; gap: 10px; }
.hoNowK { font-size: 11px; }
.hoNowT { margin-top: -4px; font-size: 16px; line-height: 1.4; }
.hoCta { height: 40px; font-size: 14px; }
.hoVal, .hoTxt, .hoSub, .hoKv { font-size: 13px; }
.hoBig .hoPill { font-size: 14px; line-height: 28px; }
.hoFin { padding: 24px 16px; }
.hoFinIco { width: 36px; height: 36px; }
.hoFinIco::after { inset: 10px; }
.hoFinT { font-size: 16px; }
/* 편집 머리 두 단(10-28 담당자 A안: 윗단 GNB는 글과 흐름, 아랫단은 툴바). 툴바 높이 48(머티리얼 탭 줄 높이), 안의 버튼은 32 */
.edBar { flex: none; display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; border-bottom: 1px solid var(--gray-2); background: var(--bg); }
.edBar .barL, .edBar .barR { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 4px; }
.edBar .barR { justify-content: flex-end; }
.edBar .barC { flex: none; display: flex; align-items: center; gap: 8px; }
.edBar .tools { display: flex; align-items: center; gap: 2px; height: auto; padding: 0; border: 0; }
.edBar .tools[hidden], .edBar .icoBtn[hidden] { display: none; }
.edBar .icoBtn { width: 32px; height: 32px; }
.edBar .seg { margin: 0; }
.edBar .seg button, .edBar .pvBtn { height: 32px; }
/* ── 전 화면 한 모양(10-28 담당자: 블록 보기와 편집 화면 UI 가 너무 다름, 전 페이지 점검) ──
   분할 버튼: 모든 화면 높이 32, 테두리 outline, 칸 사이 선, 고른 칸 secondary-container. 편집 서랍의 블록 종류(텍스트, 이미지, 기타)도 같은 부품
   보기 타입: 편집, 블록 보기, 어드민 등록 모두 머리 아래 툴바(48) 가운데
   탭: 글 목록 카테고리와 관리 메뉴(블록 보기, 팀과 권한) 모두 높이 48, 14/500, 고른 탭 primary 와 3px 표시 선
   입력 칸: 테두리 outline, 모서리 4. 페이지 양식은 40, 오른쪽 패널 안은 32 */
.seg.segS.segS, .drwTabs.drwTabs { display: inline-flex; gap: 0; height: 32px; margin: 0; padding: 0; border: 1px solid var(--outline); border-radius: 9999px; background: transparent; overflow: hidden; }
.seg.segS.segS button, .drwTabs.drwTabs button { height: 30px; margin: 0; padding: 0 14px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font-size: 14px; font-weight: 500; }
.seg.segS.segS button + button, .drwTabs.drwTabs button + button { border-left: 1px solid var(--outline); }
.seg.segS.segS button[aria-pressed="true"], .drwTabs.drwTabs button[aria-selected="true"] { border-color: var(--outline); background: var(--sec-c); font-weight: 500; }
.seg.segS.segS button:hover:not([aria-pressed="true"]), .drwTabs.drwTabs button:hover:not([aria-selected="true"]) { background: var(--hover); }
.drwTabs.drwTabs, .mtabs.mtabs, .prow .seg.segS, .mbody .seg.segS { display: flex; width: auto; }
.drwTabs.drwTabs button, .mtabs.mtabs button, .prow .seg.segS button, .mbody .seg.segS button { flex: 1; padding: 0 8px; }
.drwTabs.drwTabs { margin: 0 0 8px; }
.mtabs.mtabs { margin: 0 16px 8px; }
.edBar .pvName { font-size: 14px; font-weight: 600; }
.is-admin .mods { height: calc(100vh - var(--head) - 96px); }  /* 관리 메뉴 48 + 툴바 48 */
.hand { height: calc(100vh - var(--head) - 48px); }
.subBar { height: 48px; padding: 0 8px; }
.subNav { gap: 0; height: 48px; padding: 0 8px; }
.subBar .subNav { padding: 0; }
.subNav a { position: relative; height: 48px; margin: 0; padding: 0 16px; border: 0; color: var(--ink-2); font-weight: 500; }
.subNav a:hover { background: var(--hover); color: var(--ink-2); }
.subNav a[aria-current="page"] { color: var(--brand); font-weight: 500; }
.subNav a[aria-current="page"]::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--brand); }
.permT .permLab { height: 40px; padding: 0 12px; border-color: var(--outline); border-radius: var(--r-s); }
.prow select, .prow input, .mbody .fld input, .mbody .fld select, .mbody > .msub > select { height: 32px; border-color: var(--outline); border-radius: var(--r-s); }
.is-post .top .edT h1 { font-size: 14px; }  /* 어드민 등록 머리의 제목과 같게 */
.edBar .barL { gap: 8px; }
.edBar .barL .pvName { margin-left: 8px; }  /* 블록 보기: 보기 타입 다음 고른 블록 이름 */
/* 사용법(?)은 부가 도구라 가장 옅게(10-28 담당자) — 쓸 수 있는 되돌리기보다 옅고, 올리면 진해진다 */
#helpBtn { color: var(--gray-3); }
#helpBtn:hover { color: var(--ink-2); }
/* 머리 구분선 두 개를 같은 꼴로(10-28 담당자: 높이가 달라 오류처럼 보임) — 툴 이름 뒤 선도 '글 편집' 뒤 선과 같은 1×14, 같은 간격 12 */
.top #home + .edT { padding-left: 0; border-left: 0; }
.top #home.brand::after { content: ""; align-self: center; width: 1px; height: 14px; margin-left: 4px; background: var(--gray-2); }
/* 되돌리기, 다시 실행, 리셋은 사용법(?)보다 진하게(10-28 담당자) — 꺼져 있어도 보조 글자색, 켜지면 본문색. 사용법은 가장 옅게 */
.edBar .tools .icoBtn { color: var(--ink); }
.edBar .tools .icoBtn:disabled { color: var(--gray-1); }
/* ── 전 화면 한 단계 작게(10-28 담당자: UI 와 글자가 전체적으로 큼, 좀만 줄여) ──
   머리 64→56, 툴바와 탭 48→44, 버튼과 입력 40→36, 분할 버튼과 칩 32→28, 툴바 안 버튼 32→28, 패널 입력 32→28
   기본 글자 14→13, 패널 칸 이름과 블록 카드 이름 14→13, 창 제목 24→20, 툴 이름 16→15 */
:root { --head: 56px; }
body { font-size: 13px; }
.btnL, .btnP, .top .btnL, .top .btnP, .subBar .btnL, .subBar .btnP { height: 36px; padding: 0 20px; font-size: 13px; }
.txtBtn { height: 36px; font-size: 13px; }
.icoBtn { width: 36px; height: 36px; }
.edBar { height: 44px; }
.edBar .icoBtn { width: 28px; height: 28px; }
.edBar .pvBtn { height: 28px; padding: 0 14px; }
.seg.segS.segS, .drwTabs.drwTabs { height: 28px; }
.seg.segS.segS button, .drwTabs.drwTabs button { height: 26px; padding: 0 12px; font-size: 13px; }
.chip, .sortChip { height: 28px; padding: 0 12px; font-size: 13px; }
.chipLab { height: 28px; font-size: 12px; }
.tabs button { height: 44px; font-size: 13px; }
.subBar, .subNav, .subNav a { height: 44px; }
.subNav a { font-size: 13px; }
.fld input, .fld select, .permAdd input, .modPick select, .teamPick select, .loginF input, .top select, .subBar select, .permT .permLab { height: 36px; font-size: 13px; }
.libBar input[type="search"] { height: 36px; font-size: 13px; }
.prow select, .prow input, .mbody .fld input, .mbody .fld select, .mbody > .msub > select { height: 28px; font-size: 13px; }
.psec h2, .is-post .panel .psecH h2, .is-post .panel .psec h2, .psecH h2, .pcT { font-size: 13px; }
.drwLab, .drw, .drwList .drw { font-size: 13px; }
.pcHead { height: 44px; }
.mrow { height: 40px; font-size: 13px; }
.brand { font-size: 15px; }
.top #home + .edT .edK, .is-post.is-view .top #home + .edT .edK::before, .is-post .top .edT h1, .is-hand .top .edT h1 { font-size: 13px; }
.av, .avs .av { width: 28px; height: 28px; font-size: 13px; }
.pplBtn { height: 36px; border-radius: 18px; }
.acctSec a, .acctPop .acctSec button, .acctPop button, .morePop button { height: 40px; font-size: 13px; }
.dlgT { font-size: 20px; line-height: 28px; }
.hoCta { height: 36px; font-size: 13px; }
.is-admin .mods { height: calc(100vh - var(--head) - 88px); }  /* 관리 메뉴 44 + 툴바 44 */
.hand { height: calc(100vh - var(--head) - 44px); }
/* 툴바 오른쪽 위계(10-28 담당자: 되돌리기의 켜짐과 꺼짐이 안 보임, 사용법과 위계를 나눠 줘)
   되돌리기, 다시 실행, 리셋: 켜지면 본문색, 꺼지면 가장 옅게(outline-variant). 사용법(?)은 그 사이 회색(gray-3)이고 세로 구분선 뒤에 따로 둔다 */
.edBar .tools .icoBtn { color: var(--ink); }
.edBar .tools .icoBtn:disabled { color: var(--gray-2); }
.edBar .barR #helpBtn { margin-left: 8px; position: relative; }
.edBar .barR #helpBtn::before { content: ""; position: absolute; left: -8px; top: 7px; width: 1px; height: 14px; background: var(--gray-2); }
/* 툴바 위아래 여백 넓게(10-28 담당자: 상하 여백 너무 좁음) — 높이 44→48, 안의 버튼 28 그대로라 위아래 10 */
.edBar { height: 48px; }
.is-admin .mods { height: calc(100vh - var(--head) - 92px); }  /* 관리 메뉴 44 + 툴바 48 */
.hand { height: calc(100vh - var(--head) - 48px); }
/* 오른쪽 패널 여백 넓게(10-28 담당자: 패널 여백이 촘촘함) — 편집과 블록 보기 패널을 같은 간격으로
   좌우 20, 칸 위 20 아래 24, 칸 이름과 안내 4, 안내와 분할 버튼 16, 분할 버튼과 카드 12, 카드 사이 12, 설정 줄 사이 12 */
.is-post .panel .psec { padding: 20px 20px 24px; }
.is-post .panel .psecH { margin-bottom: 4px; }
.psec > .pnote:first-of-type { margin-top: 0; }
.psec > .pnote + .drwTabs.drwTabs { margin-top: 16px; }
.drwTabs.drwTabs { margin-bottom: 12px; }
.drwList { gap: 12px; margin-top: 0; }
.prow + .prow { margin-top: 12px; }
.pblockH + .prow, .is-post .panel .pblock .psecH { margin-bottom: 12px; }
.pcHead { padding: 0 20px; }
.pcBody { padding: 0 20px 20px; }
.modPanel { padding: 20px 0 40px; }
.mtabs.mtabs { margin: 0 20px 12px; }
.mrow { padding: 0 20px; }
.mbody { padding: 4px 20px 20px; }
.modPanel > .pname { padding: 20px 20px 4px; }
/* 프로필 버튼(글 목록 계정 메뉴, 편집 보는 사람) 한 모양 — 올렸을 때 좌우 여백 넉넉히(10-28 담당자) */
.acct, .pplBtn { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 10px 0 6px; border: 0; border-radius: 18px; background: none; }
.acct:hover, .acct[aria-expanded="true"], .pplBtn:hover, .pplBtn[aria-expanded="true"] { background: var(--hover); }
/* 켜진 테두리 버튼(미리보기 등)도 테두리를 남긴다 — 분할 버튼의 고른 칸과 같은 꼴(10-28 담당자: 미리보기만 선이 없어짐) */
.btnL[aria-pressed="true"], .pvBtn[aria-pressed="true"] { border-color: var(--outline); background: var(--sec-c); color: var(--ink); }
/* 스크롤바 한 모양(10-28 담당자: 스크롤 모양이 이상함 — 회색 캔버스 위에 흰 홈이 따로 떠 보임)
   툴 안의 모든 스크롤 칸(캔버스 화면, 오른쪽 패널, 등록 화면, 블록 보기, 새 글 미리보기)은 가는 막대, 홈은 투명, 막대는 gray-3 */
html, .paneS, .panel, .pvBox, .modList, .modPanel, .pcheck .pcBody, .handStage, .handPanel, .incPvStage { scrollbar-width: thin; scrollbar-color: var(--gray-3) transparent; }
/* 등록 전 확인은 머리 줄과 목록이 여백을 갖고 있어 칸 여백은 0(10-28: 패널 칸 여백을 넓힐 때 이 칸에도 겹쳐 들어가 여백이 두 번 생김) */
.is-post .panel .psec.pcheck { padding: 0; }
/* 블록 설정의 개수 버튼, 스위치, 고정 개수(10-28 담당자 A안: 캔버스 막대의 속성을 패널로) — 패널 입력과 같은 높이 28, outline 테두리, 모서리 4 */
.pstep { justify-self: start; display: inline-flex; align-items: center; height: 28px; border: 1px solid var(--outline); border-radius: var(--r-s); }
.pstep b { min-width: 32px; color: var(--ink); font-size: 13px; font-weight: 500; text-align: center; }
.pstepB { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 26px; border: 0; border-radius: var(--r-s); background: none; color: var(--ink); cursor: pointer; }
.pstepB svg { width: 18px; height: 18px; }
.pstepB:hover { background: var(--hover); }
.pstepB.is-end { color: var(--gray-2); }
.pswitch { justify-self: start; position: relative; width: 36px; height: 20px; padding: 0; border: 1px solid var(--outline); border-radius: 9999px; background: var(--fill-2); cursor: pointer; transition: background .15s, border-color .15s; }
.pswitchK { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--outline); transition: transform .15s, background .15s; }
.pswitch[aria-checked="true"] { border-color: var(--brand); background: var(--brand); }
.pswitch[aria-checked="true"] .pswitchK { transform: translateX(16px); background: var(--on-brand); }
.pswitch:focus-visible, .pstepB:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pfix { color: var(--ink); font-size: 13px; }