/* ══ GOBBI 잉크 — 공통 부품 (고정 디자인 «잉크 & 하드 섀도», 2026-09-19 디자인 하네스로 이전) ══
   업무 콘솔 계열(개인 대시보드·일정 관리·관리 콘솔)이 함께 쓰는 부품 규칙. 화면은 이 파일을 **자기 CSS 보다 먼저** 링크한다
   (화면 전용 규칙이 뒤에서 덮는다). 토큰 정의(--c-*·--fn-*)는 골격의 console-tokens.css 가 정본이고, 여기서는 그 값을
   면·테두리 토큰에 갈아 끼우는 것(아래 «입히기»)부터 한다. 규칙과 금지 사항은 같은 폴더 README.md. */

/* 입히기 — 이 파일을 링크한 화면만 종이색 면·잉크 테두리가 된다(링크하지 않은 옛 화면은 그대로다) */
:root{ --bg-app: var(--c-paper); --surface-1: var(--c-surface); --surface-2: var(--c-surface-2); --border-default: var(--c-ink); }
:root[data-theme="light"]{ --bg-app: var(--c-paper); --surface-1: var(--c-surface); --surface-2: var(--c-surface-2); }

:root .card,
:root .prog,
:root .notice{
  border: 2px solid var(--c-ink); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--c-sh);
  transition: transform var(--c-t), box-shadow var(--c-t);
}
:root .card:hover,
:root .prog:hover{ transform: translate(-2px,-2px); box-shadow: var(--c-sh-up); }
:root .card:focus-within{ border-color: var(--c-ink); box-shadow: var(--c-sh-up); }
/* 머리 칸 전체가 기능색 면 */
:root .card-h{ background: var(--surface-2); border-bottom: 2px solid var(--c-ink); padding: var(--space-3) var(--space-4); }
:root .card[data-fn] .card-h{ background: var(--fn); }
:root .card[data-fn] .card-h :is(.ct,.nm,.save-state,.mini,.icon-btn,.sec-m){ color: var(--c-on-fn); }
:root .card[data-fn] .card-h .ct>svg{ background: var(--c-on-fn); color: var(--fn); border-radius: var(--r-xs); padding: 5px; width: 16px; height: 16px; }
:root .card[data-fn] .card-h :is(.mini,.icon-btn) svg{ color: inherit; }
:root .card[data-fn] .card-h :is(.mini,.icon-btn):hover{ background: var(--c-on-fn); color: var(--fn); border-color: var(--c-on-fn); }
:root .card-h .ct .nm{ font-size: var(--t-md); font-weight: 800; }
:root #side-tabs button:not(.on):active,
:root #home-tabs button:not(.on):active,
:root .btn:active{ transform: translate(2px,2px); box-shadow: 0 0 0 var(--c-ink); }
/* 줄은 상자가 아니라 목록이다(2026-09-18 사용자 지시) — 카드 안에 상자가 또 쌓이면 아래가 잘리고 시끄럽다.
   테두리·그림자 없이 가는 구분선만 두고, 호버는 면 색으로만 답한다. */
:root .lrow{ border: 0; border-bottom: 1px solid color-mix(in srgb, var(--c-ink) 18%, transparent); border-radius: 0; background: transparent; box-shadow: none; transform: none; padding: var(--space-3) var(--space-2); }
:root .lrow:last-child{ border-bottom: 0; }
:root .lrow:hover{ border-color: color-mix(in srgb, var(--c-ink) 18%, transparent); background: var(--surface-2); transform: none; box-shadow: none; }
/* 체크 칸은 한 벌이다 — 일정의 .tick 과 목표의 .gk 가 같은 모양·같은 눌림. 켜지면 목표색(초록)으로 차고 눌려 붙는다 */
:root .lrow .tick,
:root #goal-list .gk{
  flex: none; width: 22px; height: 22px; margin-top: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--c-ink); border-radius: var(--r-xs); background: var(--surface); color: transparent; cursor: pointer;
  box-shadow: var(--c-sh-sm); transition: transform var(--c-t), box-shadow var(--c-t);
}
:root .lrow .tick svg, :root #goal-list .gk svg{ width: 12px; height: 12px; stroke-width: 3; }
:root .lrow .tick:hover, :root #goal-list .gk:hover{ border-color: var(--c-ink); color: var(--fn-goal); transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--c-ink); }
:root .lrow .tick:active, :root #goal-list .gk:active,
:root .lrow .tick.on{ background: var(--fn-goal); border-color: var(--c-ink); color: var(--c-on-fn); box-shadow: none; transform: translate(2px,2px); }
:root .btn{ border: 2px solid var(--c-ink); border-radius: var(--r-md); font-weight: 800; box-shadow: var(--c-sh-sm); background: var(--surface); transition: transform var(--c-t), box-shadow var(--c-t); }
:root .btn:hover{ border-color: var(--c-ink); background: var(--surface); transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--c-ink); }
:root .toast{ border: 2px solid var(--c-ink); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--c-sh); font-weight: 700; }
/* 오른쪽으로 나가는 그림자 몫 */
@media (prefers-reduced-motion: reduce){ :root *{ transition: none !important; } :root :is(.card,.prog,.lrow,.btn,.svc-app):hover{ transform: none; } }
/* ── 고도화(2026-09-18) — 서랍·모달·팝오버·메모 패드·공지·바로가기 탭까지 같은 어휘로. 목록 줄은 1px 로 가볍게 ── */
:root .modal{ background: color-mix(in srgb, var(--c-paper) 70%, transparent); }
:root .sheet,
:root .pop{ border: 2px solid var(--c-ink); border-radius: var(--r-lg); background: var(--surface); box-shadow: 8px 8px 0 var(--c-ink); }
:root .sheet-h{ background: var(--c-ink); color: var(--c-paper); border-bottom: 2px solid var(--c-ink); font-weight: 800; }
:root .sheet-h :is(.mini,.icon-btn){ color: var(--c-paper); }
:root .sheet-h :is(.mini,.icon-btn) svg{ color: inherit; }
/* 메모 목록 서랍 — 왼쪽에서 밀려 들어오고, 오른쪽 변에만 그림자가 선다 */
:root .sheet.drawer{ border-width: 0 2px 0 0; border-radius: 0; box-shadow: 8px 0 0 var(--c-ink); animation: c-drawer .18s ease-out; }
@keyframes c-drawer{ from{ transform: translateX(-100%); } to{ transform: none; } }
:root .sheet:not(.drawer){ animation: c-pop .16s ease-out; }
@keyframes c-pop{ from{ transform: translate(6px,6px); box-shadow: 0 0 0 var(--c-ink); } to{ transform: none; } }
:root .mrow.on :is(.mt,.mt b,.mi,.md){ color: var(--c-on-fn); }
:root .card :is(input:not([type=checkbox],[type=radio]),select),
:root .sheet :is(input:not([type=checkbox],[type=radio]),select,textarea:not(.pad)){ border: 2px solid var(--c-ink); border-radius: var(--r-sm); background: var(--surface); }
:root .mini{ border-radius: var(--r-sm); }
:root *::-webkit-scrollbar-thumb{ background: var(--c-ink); border-radius: 0; background-clip: content-box; }
@media (prefers-reduced-motion: reduce){ :root .sheet{ animation: none !important; } }
:root .prog-sheet .sheet-h :is(.mini,.mini svg){ color: var(--c-on-fn); }
/* ── 아이콘 굵기(2026-09-18 사용자 지시) — 1.75 선은 굵은 잉크 테두리 옆에서 실처럼 보인다. 선 아이콘을 한 단 굵게, 머리 칸 단추는 크기도 키운다 ── */
:root :is(.icon-btn,.mini,.btn,.card-h .ct,.side-tabs button,.home-tabs button,.svc-tab,.psec,.ntc-row) svg{ stroke-width: 2.4; }
:root .card-h .icon-btn{ width: 30px; height: 30px; }
:root .card-h .icon-btn svg{ width: 18px; height: 18px; }
:root .card[data-fn] .card-h .icon-btn,
:root .card[data-fn] .card-h .icon-btn.on{ color: var(--c-on-fn); opacity: 1; }
:root .card[data-fn] .card-h .icon-btn:hover{ background: var(--c-on-fn); color: var(--fn); border-color: var(--c-on-fn); }
:root .lrow .tick svg, :root #goal-list .gk svg{ stroke-width: 3.5; }
/* 머리 칸의 아이콘 고르개(.ico-pick — 메모 설정·일정의 사람/프로젝트/기간)도 같은 굵기·같은 색. 기본값이 아닌 걸 골랐다는 표시는
   색 대신 «뒤집힌 면»(종이색 바탕 + 기능색 글리프)으로 한다 — 색면 위에서 강조색 글자는 묻힌다 */
:root .card[data-fn] .card-h .ico-pick .opt{ width: 30px; height: 30px; color: var(--c-on-fn); }
:root .card[data-fn] .card-h .ico-pick .opt svg{ width: 18px; height: 18px; stroke-width: 2.4; color: inherit; }
:root .card[data-fn] .card-h .ico-pick .opt:hover,
:root .card[data-fn] .card-h .ico-pick .opt.set{ background: var(--c-on-fn); color: var(--fn); border-color: var(--c-on-fn); }
:root .card[data-fn] .card-h .ico-pick .opt.set svg{ color: inherit; }
/* 양쪽 열의 첫 카드는 같은 윗선에서 시작하고 머리 칸 높이도 같다(2026-09-18) — 오른쪽 열은 flex gap 이 24px(왼쪽 16px)라 탭 아래 여백에서 그만큼 뺀다.
   머리 칸은 안에 든 단추 크기에 따라 52~56px 로 갈렸다 — 최소 높이를 하나로 못 박는다. */
:root .card-h{ min-height: 56px; box-sizing: border-box; }
/* 경고색 그대로는 종이색 글자와 4.0:1 — 잉크를 섞어 4.5 를 넘긴다 */
:root .lrow .mini{ border: 2px solid var(--c-ink); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font-size: var(--t-xs); font-weight: 800; box-shadow: var(--c-sh-sm); padding: 2px var(--space-2); transition: transform var(--c-t), box-shadow var(--c-t); }
:root .lrow .mini:hover{ background: var(--surface); color: var(--text); border-color: var(--c-ink); transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--c-ink); }
:root .lrow .mini:active{ transform: translate(2px,2px); box-shadow: none; }
/* 색으로 채운 머리 칸 안의 작은 갈아 보기(.fs-seg) — 켜진 단추가 «옅은 강조색 면 + 강조색 글자» 라 색면 위에서 글자가 사라졌다(대비 1.1).
   머리 칸 안에서는 뒤집는다: 테두리·글자는 --c-on-fn, 켜진 단추는 --c-on-fn 면에 기능색 글자. */
:root .card[data-fn] .card-h .fs-seg{ border: 2px solid var(--c-on-fn); border-radius: var(--r-sm); background: transparent; }
:root .card[data-fn] .card-h .fs-seg button{ color: var(--c-on-fn); font-weight: 700; border-radius: 0; }
:root .card[data-fn] .card-h .fs-seg button.on{ background: var(--c-on-fn); color: var(--fn); font-weight: 800; }
/* ── 알약 → 네모(2026-09-19 사용자 지시) — 고정 디자인 C 에서 작은 표식도 «잉크 테두리 네모» 다. 둥근 알약은 옛 디자인의 잔재.
   표찰·배지·D-day·공지 꼬리표·칩·토스트·저장 단추·바로가기 탭·스크롤 막대를 한 번에 맞춘다(진행 막대의 둥근 끝은 위에서 이미 각지게 했다). */
:root :is(.badge,.lrow .dd,.notice .ntc-tag,.chip,.fs-seg,.qa-save,.svc-count,.pd-lv){ border-radius: var(--r-sm); }
:root .badge{ border-width: 2px; font-weight: 800; }
:root .chip{ border: 2px solid var(--c-ink); font-weight: 700; }
:root .chip:hover, :root .chip.on{ border-color: var(--c-ink); }   /* 화면 CSS 의 .chip.on(강조색 테두리)보다 앞서 링크되므로 특이도로 이긴다 */
:root .fs-seg{ border: 2px solid var(--c-ink); }
:root .fs-seg button{ border-radius: 0; font-weight: 700; }
:root .toast{ border-radius: var(--r-md); }
:root *::-webkit-scrollbar-thumb{ border-radius: 0; }
/* 고르개(.opt — 프로젝트·시작·소요·보기 범위) — 점선 알약에서 네모로. 아직 안 고른 것은 점선 그대로(«비어 있다» 는 뜻이라 남긴다),
   고른 것·열린 것은 실선 잉크 테두리 + 작은 하드 섀도. 색으로 채운 머리 칸 안의 아이콘 고르개(.ico-pick)는 위 규칙이 따로 맡는다. */
:root .opt{ border-radius: var(--r-sm); border: 2px dashed color-mix(in srgb, var(--c-ink) 45%, transparent); color: var(--text-secondary); font-weight: 700; }
:root .opt svg{ stroke-width: 2.4; color: var(--text-secondary); }
:root .opt:hover{ border-color: var(--c-ink); color: var(--text); }
:root .opt:focus-visible{ border-style: solid; border-color: var(--c-ink); box-shadow: 0 0 0 3px var(--accent-ring); }
:root .opt.open, :root .opt.set{ border-style: solid; border-color: var(--c-ink); background: var(--surface); color: var(--text); font-weight: 800; box-shadow: var(--c-sh-sm); }
:root .opt.set svg, :root .opt.open svg{ color: var(--text); }
/* 창 머리(.sheet-h)는 잉크색 면이다 — 그 안의 제목·아이콘·배지·갈아 보기·단추는 전부 종이색으로 뒤집는다(2026-09-19).
   제목 아이콘이 강조색(짙은 파랑)이라 먹색 위에서 사라졌고, 주/월/년 갈아 보기도 옅은 글자라 안 읽혔다. 닫힌 창은 대비 점검에 안 걸려 놓쳤다. */
:root .sheet-h, :root .sheet-h :is(span,b,.st,.nm,.ct){ color: var(--c-paper); }
:root .sheet-h svg, :root .modal .sheet-h .st svg{ color: var(--c-paper); stroke-width: 2.4; }
:root #st-modal .sheet-h .st svg, :root #memo-modal .sheet-h .st svg{ color: var(--c-paper); width: 18px; height: 18px; }
/* id 선택자로 강조색을 주던 자리 — 같은 무게로 덮는다 */
:root .sheet-h .badge{ border-color: var(--c-paper); color: var(--c-paper); background: transparent; }
:root .sheet-h .fs-seg{ border: 2px solid var(--c-paper); background: transparent; }
:root .sheet-h .fs-seg button{ color: var(--c-paper); font-weight: 700; }
:root .sheet-h .fs-seg button.on{ background: var(--c-paper); color: var(--c-ink); font-weight: 800; }
:root .sheet-h :is(.mini,.icon-btn){ color: var(--c-paper); background: transparent; border-color: transparent; box-shadow: none; }
:root .sheet-h :is(.mini,.icon-btn):hover{ background: var(--c-paper); color: var(--c-ink); border-color: var(--c-paper); }
:root .sheet-h :is(.mini,.icon-btn):hover svg{ color: var(--c-ink); }
/* 기능색 머리를 쓰는 창(내 기록)은 글자색이 --c-on-fn 이다 — 위 규칙보다 뒤에 둔다 */
:root .prog-sheet .sheet-h, :root .prog-sheet .sheet-h :is(span,b), :root .prog-sheet .sheet-h svg, :root .prog-sheet .sheet-h :is(.mini,.icon-btn){ color: var(--c-on-fn); }