/* =============================================================================
   base.css — 기본 규칙 (tokens.css 다음에 싣는다)
   justhink 에서 사고가 난 뒤 굳힌 규칙만 담았다. 각 규칙의 '왜'는 docs/guide/03-ui-rules.md
   ============================================================================= */

/* ── 바탕 ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
[hidden]{display:none!important}   /* .mask{display:flex} 같은 작성자 규칙이 hidden 속성을 이기지 못하게 */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html{font-size:var(--root-fs)}     /* 화면 크기 한 곳(tokens.css --root-fs — PC 110%, 휴대폰 100%) */
/* 스크롤바가 생겼다 사라지며 폭이 15px 출렁이는 것을 막는다 — 데스크톱만(터치에선 오버레이 스크롤바) */
@media (hover:hover) and (pointer:fine){
  html{overflow-y:scroll;scrollbar-gutter:stable}
}
body{
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-base);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  /* 한글은 어절 단위로 줄바꿈. ⚠️ overflow-wrap:anywhere 금지(최소 폭이 줄어 표·flex 배치가 흔들린다) */
  word-break:keep-all;
  overflow-wrap:break-word;
}
.break-all{word-break:break-all}              /* 토큰·URL 칸에만 */

h1{font-size:var(--fs-page-title);font-weight:var(--fw-bold);letter-spacing:var(--ls-title);line-height:1.25;margin:0 0 .75rem}
h2{font-size:var(--fs-title);font-weight:var(--fw-semibold);line-height:1.35;margin:0 0 .625rem}
a{color:var(--accent);text-decoration:none}
@media (hover:hover) and (pointer:fine){a:hover{text-decoration:underline}}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.num,.tbl td,.tbl th{font-variant-numeric:tabular-nums}   /* 숫자 자릿수 정렬 */
.sub{color:var(--text-sub)}
.hint{font-size:var(--fs-hint);color:var(--text-sub);line-height:var(--lh-snug)}
.up{color:var(--pnl-up)}
.down{color:var(--pnl-down)}

/* ── 페이지 틀 ─────────────────────────────────────────────────────────── */
.wrap{max-width:var(--page-max);margin:0 auto;padding:var(--page-pad)}
.card{
  background:var(--surface);border-radius:var(--radius);
  padding:var(--card-py) var(--card-px);margin-bottom:var(--gap);
  box-shadow:var(--shadow-sm);
}
.card-title{font-size:var(--fs-title);font-weight:var(--fw-semibold);margin:0}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:.625rem;flex-wrap:wrap;margin-bottom:.75rem}
.card-head .actions{flex:0 0 auto;display:flex;gap:.375rem;white-space:nowrap}   /* 버튼은 줄바꿈하지 않는다 — 글이 넘어간다 */

/* KPI 카드: 값 줄에는 숫자만. 좁아지면 설명을 줄이고(title 로 보존) 숫자는 남긴다 */
.kpi-label{font-size:var(--fs-label);color:var(--text-sub)}
.kpi-value{font-size:var(--fs-kpi);font-weight:var(--fw-bold);letter-spacing:var(--ls-num);line-height:var(--lh-num);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-value{font-size:var(--fs-hero);font-weight:var(--fw-bold);letter-spacing:var(--ls-hero);line-height:var(--lh-num)}

/* ── 아이콘: Lucide 24×24 선 아이콘을 인라인 SVG로 (이모지 금지) ─────────── */
.ic{width:1em;height:1em;flex:none;vertical-align:-.12em;fill:none;stroke:currentColor;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ic-lg{width:1.15em;height:1.15em}
button .ic,a .ic{pointer-events:none}

/* ── 버튼 3단 (높이는 토큰, 상하 padding 0 — min-height 는 내용 높이를 줄이지 못한다) ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.375rem;
  min-height:var(--ctl-h-lg);padding:0 .875rem;
  font-family:inherit;font-size:var(--fs-btn);font-weight:var(--fw-medium);line-height:var(--lh-none);
  color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  cursor:pointer;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;   /* 빠른 연타 시 더블탭 확대 방지 */
}
.btn.sm{min-height:var(--ctl-h);padding:0 .625rem;font-size:var(--fs-btn-sm)}
.btn.xs{min-height:var(--ctl-h-sm);padding:0 .5625rem;font-size:var(--fs-btn-xs)}
/* 한 줄(표 행·한 줄 폼)에 입력칸(.input.sm)과 작은 단추(.btn.xs)가 함께 있으면 단추를 입력칸 높이로(2026-10-07 화면 감사 —
   입력칸 옆 단추만 4px 낮아 들쑥날쑥해 보였다) */
:is(tr,.inline-form):has(.input.sm) .btn.xs{min-height:var(--ctl-h)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn:disabled{opacity:.45;cursor:default}
.btn:active{filter:brightness(.94)}
@media (hover:hover) and (pointer:fine){
  .btn:not(:disabled):hover{background:var(--surface2)}
  .btn.primary:not(:disabled):hover{filter:brightness(1.06);background:var(--accent)}
}

/* 누르는 영역만 44px로 넓힌다 — 한 버튼만 키우면 그 버튼만 뚱뚱해 보인다 */
.hit{position:relative}
.hit::after{content:"";position:absolute;left:50%;top:50%;
  width:max(100%,var(--hit-min));height:max(100%,var(--hit-min));transform:translate(-50%,-50%)}

/* ── 입력칸 (height 로 잡는다. font:inherit 대신 family + 명시 크기) ──────── */
.input,select.input,textarea.input{
  height:var(--ctl-h-lg);padding:0 .8125rem;
  font-family:inherit;font-size:var(--fs-input);color:var(--text);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
}
.input.sm{height:var(--ctl-h)}
textarea.input{height:auto;min-height:calc(var(--ctl-h-lg)*2);padding:.625rem .8125rem;line-height:var(--lh-base)}
.field-label{display:block;font-size:var(--fs-label);color:var(--text-sub);margin-bottom:.25rem}

/* ── 세그먼트 토글: 높이·테두리는 감싸는 상자가 갖는다 ───────────────────── */
.seg{display:inline-flex;height:var(--ctl-h);padding:2px;gap:2px;
  border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface)}
.seg>button{border:0;background:none;padding:0 .75rem;border-radius:var(--radius-pill);
  font-family:inherit;font-size:var(--fs-btn-sm);font-weight:var(--fw-medium);color:var(--text-sub);
  cursor:pointer;touch-action:manipulation}
.seg>button.on{background:var(--accent-soft);color:var(--accent)}

/* ── 표 ────────────────────────────────────────────────────────────────── */
/* ⚠️ 스크롤러의 padding 은 고정 축에서 0 — 여백은 자식이 갖는다(틀 고정 비침의 1번 원인) */
.tbl-scroll{overflow:auto;padding:0}   /* -webkit-overflow-scrolling:touch 는 쓰지 않는다(iOS 13+ 불필요, 중첩 시 사고) */
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-table)}
.tbl th,.tbl td{padding:.5rem .625rem;text-align:right;white-space:nowrap;
  box-shadow:inset 0 -1px 0 var(--line2)}            /* 선은 box-shadow 로 — border 는 고정 시 1px 밀린다 */
.tbl th{position:sticky;top:0;z-index:var(--z-sticky-head);
  background:var(--th-bg);color:var(--text-sub);font-weight:var(--fw-semibold);text-align:center}
.tbl td:first-child,.tbl th:first-child{text-align:left}
.tbl td.name{white-space:normal}                       /* 줄바꿈은 이름 열만 — 숫자 열은 절대 */
/* 표 안 링크 = 본문색(흑백 위주 — 업무포털 홈 목록처럼, 2026-10-07 화면 감사). 누를 수 있다는 표시는 마우스를 올리면 밑줄.
   :where 로 세기를 a 하나만큼 — 색을 따로 정한 링크(.danger 등)가 그대로 이긴다 */
:where(.tbl) a{color:var(--text)}
.tbl .pin{position:sticky;left:0;z-index:var(--z-sticky-cell);background:var(--frzbg)}
.tbl th.pin{z-index:calc(var(--z-sticky-head) + 1);background:var(--th-bg)}
.tbl tr.total td{font-weight:var(--fw-semibold);box-shadow:inset 0 2px 0 var(--line)}
@media (hover:hover) and (pointer:fine){
  .tbl tbody tr:hover td{background:var(--surface2)}   /* 고정 셀도 불투명 배경을 다시 준다 */
}
/* 휴대폰 목록 줄(table.tbl.m-rows — 두 앱 공용, 2026-10-07 모바일 정리): 한 행 = 한 덩어리.
   td.m-main = 첫 줄(전체 폭, 본문 글자) · 나머지 칸은 아래 줄에 작은 회색 글씨로 이어서 · td.m-act = 그 줄 오른쪽 끝 ·
   td.m-hide = 휴대폰에서 숨김 · td.m-wrap = 긴 글 한 줄 전체 · data-label="이름" 이면 값 앞에 이름. PC 는 그대로 표.
   템플릿은 머리 칸(th)에만 표시를 단다 — /shared/mobile.js 가 열의 칸마다 옮기고(이름 = 머리 글 또는 th data-label),
   제목 표시가 없으면 첫 글 칸 · 이름 없는 끝 칸 = m-act · 값이 빈 칸 = m-empty(숨김) */
@media (max-width:640px){
  table.tbl.m-rows,table.tbl.m-rows tbody,table.tbl.m-rows tfoot{display:block;width:100%}
  table.tbl.m-rows thead{display:none}
  table.tbl.m-rows tr{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .75rem;padding:.625rem .75rem;
    box-shadow:inset 0 -1px 0 var(--line2)}
  table.tbl.m-rows td{display:block;padding:0;border:0;box-shadow:none;background:none;text-align:left!important;white-space:nowrap;
    font-size:var(--fs-hint);color:var(--text-sub)}     /* !important — 표마다 숫자 칸 오른쪽 정렬 규칙(.buy-ptbl .num 등)이 더 세다 */
  table.tbl.m-rows td:not(.m-main) div{display:inline;margin-left:.375rem}   /* 칸 안 여러 줄(이름 / 전화)은 한 줄로 이어서 */
  table.tbl.m-rows tr:has(>td>input[type=checkbox]:only-child){position:relative;padding-left:2.625rem}
  table.tbl.m-rows td:has(>input[type=checkbox]:only-child){position:absolute;left:.875rem;top:.75rem}   /* 줄 고르기 칸은 제목 왼쪽 */
  table.tbl.m-rows td.m-main{order:-1;flex:1 1 100%;min-width:0;white-space:normal;font-size:var(--fs-body);color:var(--text)}
  table.tbl.m-rows td.m-act{margin-left:auto}
  table.tbl.m-rows td.m-hide,table.tbl.m-rows td.m-empty{display:none}
  table.tbl.m-rows td[colspan]{flex:1 1 100%;white-space:normal}            /* 빈 목록 안내·묶음 제목 줄 */
  table.tbl.m-rows td.m-wrap{flex:1 1 100%;white-space:normal}             /* 긴 글(설명·메모)은 한 줄 전체에 줄바꿈 */
  table.tbl.m-rows td[data-label]::before{content:attr(data-label) " "}
  table.tbl.m-rows td:has(>select,>.input){display:flex;flex:1 1 100%;align-items:center;gap:.5rem;white-space:normal}   /* 고르기·입력칸은 한 줄 전체 */
  table.tbl.m-rows td>select,table.tbl.m-rows td>.input{flex:1 1 auto;width:auto;min-width:0}
  table.tbl.m-rows td:has(>select,>.input)[data-label]::before{flex:none;width:6.5rem}   /* 고르기 칸 시작을 맞춘다 */
  /* 휴대폰 입력 줄(table.tbl.m-form): 한 행 = 한 덩어리, 칸마다 '이름 | 값·입력칸' 한 줄(입력칸이 화면 밖으로 나가지 않게).
     td.m-main = 덩어리 제목(이름 없이 굵게) · td.m-act = 오른쪽 끝 단추 · td.m-hide = 숨김 */
  table.tbl.m-form,table.tbl.m-form tbody,table.tbl.m-form tfoot{display:block;width:100%}
  table.tbl.m-form thead{display:none}
  table.tbl.m-form tr{display:block;padding:.625rem .75rem;box-shadow:inset 0 -1px 0 var(--line2)}
  table.tbl.m-form td{display:flex;align-items:center;gap:.625rem;min-height:var(--ctl-h);padding:.1875rem 0;border:0;box-shadow:none;
    background:none;text-align:left;white-space:normal}
  table.tbl.m-form td[data-label]::before{content:attr(data-label);flex:none;width:6.5rem;font-size:var(--fs-hint);color:var(--text-sub);
    text-align:left;font-weight:var(--fw-regular)}
  table.tbl.m-form td>.input,table.tbl.m-form td>select{flex:1 1 auto;width:auto;min-width:0}
  table.tbl.m-form td.m-main{font-weight:var(--fw-semibold)}
  table.tbl.m-form td.m-act{justify-content:flex-end}
  table.tbl.m-form td.m-hide,table.tbl.m-form td.m-empty{display:none}
}

/* ── 날짜 칸(두 앱 공용 — /shared/datefield.js, 2026-10-07 날짜 표준: 8자리 점 찍기 · 오른쪽 달력 아이콘 · 작은 달력) ──
   작은 달력은 업무포털 일정 화면의 작은 달력과 같은 모양(오늘 = 파란 동그라미, 고른 날 = 검은 테두리, 일요일 빨강). */
.df{position:relative;display:inline-block;max-width:100%;vertical-align:middle}
.field .df,td .df,.form-grid .df{display:block}
.df>input{padding-right:2.25rem}
.df-btn{position:absolute;top:50%;right:.3125rem;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;
  width:var(--ctl-h-sm);height:var(--ctl-h-sm);padding:0;border:0;border-radius:var(--radius-sm);background:none;
  color:var(--text-sub);cursor:pointer;touch-action:manipulation}
.df-btn .ic{width:1.125rem;height:1.125rem}
td .df-btn{width:1.5rem;height:1.5rem;right:.125rem}
td .df>input{padding-right:1.75rem}
.df:has(>input:disabled) .df-btn,.df:has(>input[readonly]) .df-btn{display:none}
.df.df-bad>input{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
@media (hover:hover) and (pointer:fine){.df-btn:hover{background:var(--th-bg);color:var(--text)}}
.df-pop{position:fixed;z-index:calc(var(--z-modal-child) + 10);width:18rem;max-width:calc(100vw - 1rem);padding:.75rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.df-head{display:flex;align-items:center;gap:.25rem;margin-bottom:.375rem}
.df-head .input{flex:1 1 auto;min-width:0;height:var(--ctl-h-sm);padding:0 .375rem;font-size:var(--fs-label)}
.df-nav{flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--ctl-h-sm);height:var(--ctl-h-sm);padding:0;
  border:0;border-radius:var(--radius-sm);background:none;color:var(--text-sub);cursor:pointer}
.df-nav .ic{width:1.125rem;height:1.125rem}
.df-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));text-align:center}
.df-dow{font-size:var(--fs-badge);color:var(--text-sub);line-height:1.75rem}
.df-dow.sun{color:var(--red)}
.df-day{justify-self:center;width:2.125rem;height:2.125rem;padding:0;border:0;background:none;border-radius:var(--radius-pill);
  font-family:inherit;font-size:var(--fs-label);color:var(--text);cursor:pointer}
.df-day.sun{color:var(--red)}
.df-day.out{color:var(--text-sub);opacity:.6}
.df-day.today{background:var(--accent);color:var(--on-ink);opacity:1}
.df-day.sel:not(.today){box-shadow:inset 0 0 0 1.5px var(--ink)}
.df-foot{display:flex;justify-content:flex-end;margin-top:.5rem}
@media (hover:hover) and (pointer:fine){
  .df-nav:hover{background:var(--th-bg);color:var(--text)}
  .df-day:not(.today):hover{background:var(--th-bg)}
}

/* ── 모달 ──────────────────────────────────────────────────────────────── */
/* 큰 모달이 위가 잘리지 않게: 가운데 정렬 대신 flex-start + 자식 margin:auto */
.mask{position:fixed;inset:0;z-index:var(--z-modal);background:rgba(0,0,0,.42);
  display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(var(--mask-pad) + var(--sat)) var(--mask-pad) calc(var(--mask-pad) + var(--sab))}
.mask.child{z-index:var(--z-modal-child)}
.modal{margin:auto;width:min(40rem,100%);background:var(--surface);border-radius:var(--radius-modal);box-shadow:var(--shadow);
  max-height:calc(100dvh - var(--sat) - var(--sab) - var(--mask-pad)*2);display:flex;flex-direction:column}
.modal-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.875rem 1.125rem;border-bottom:1px solid var(--line)}
.modal-title{font-size:var(--fs-title);font-weight:var(--fw-semibold);margin:0}
.modal-body{flex:1 1 auto;min-height:0;overflow:auto;padding:1rem 1.125rem}
.modal-foot{flex:none;display:flex;justify-content:flex-end;gap:.5rem;padding:.75rem 1.125rem;border-top:1px solid var(--line)}
/* 닫기는 × 가 아니라 '닫기' 글자 버튼. touch-action:none — 탭이 스크롤로 승격돼 click 이 사라지는 것을 막는다 */
.modal-close{min-height:var(--ctl-h-sm);padding:0 .625rem;font-family:inherit;font-size:var(--fs-btn-sm);font-weight:var(--fw-medium);
  color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  cursor:pointer;touch-action:none;position:relative}
.modal-close::after{content:"";position:absolute;inset:-.4375rem}
.modal-close:active{background:var(--surface2)}
/* 배경 스크롤 잠금 — iOS 는 overflow:hidden 만으로 안 멈춘다. top 은 JS 가 -scrollY 로 넣는다 */
body.lock{position:fixed;overflow:hidden;left:0;right:0}

/* ── 마우스 커서 표준(두 앱 — 2026-10-07 오너 '토글에 손바닥 모양은 이상하다, 전수 조사해서 표준화') ──
   누르는 것 = 손가락(pointer) · 글 쓰는 칸 = 글자 커서(브라우저 기본) · 읽기 전용 칸·꺼진 것 = 화살표(default)
   끌어서 순서를 바꾸는 것이 주 동작인 것(결재목록 줄·결재순서 카드·원가 항목 손잡이)과 끄는 동안 = 4방향(move, 참고 사진 결재선)
   누르기가 주 동작이고 끌기도 되는 것(표시 영역 단추·홈 타일) = 손가락. 손바닥(grab·grabbing)·금지 표시(not-allowed)는 쓰지 않는다.
   칸 폭 조절 = col-resize · 실적 입력 그리드 칸 = cell(엑셀처럼) · 사진 자르기 = crosshair · 올리면 설명이 뜨는 표시 = help.
   :where 는 세기 0 — 화면이 따로 정한 커서가 이긴다. 꺼진 것만 !important(화면 규칙의 손가락도 누른다). 게이트 check_security '커서 표준' */
:where(button,select,summary,[role=button],[role=tab],[role=menuitem],[role=option],[role=switch],
  input:is([type=checkbox],[type=radio],[type=file],[type=range],[type=color],[type=button],[type=submit],[type=reset],[type=image]),
  label:has(input:is([type=checkbox],[type=radio],[type=file]))){cursor:pointer}
:where(input[readonly],textarea[readonly]){cursor:default}
:is(button,select,input,textarea):disabled,[aria-disabled=true],label:has(input:disabled){cursor:default!important}

/* ── 터치 기기 ─────────────────────────────────────────────────────────── */
@media (hover:none){
  .nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--nav-bg-solid)}  /* iOS가 내비 글자까지 흐린다 */
}

@media (hover:none),(pointer:coarse){
  .pc-only{display:none!important}     /* 마우스·키보드로만 하는 안내(방향키·Ctrl+V·끌기·우클릭)는 폰·태블릿에서 숨긴다(2026-10-07) */
}

/* ── 옆으로 미는 상자(탭·메뉴 띠·넓은 표) — 옆에 더 있으면 그쪽 끝을 흐리게. /shared/mobile.js 가 xs-l·xs-r 을 붙인다
   (2026-10-07 오너 '모바일 정리' — 폰에서 탭 줄·표가 잘려 있는데 밀 수 있다는 표시가 없었다). 스크롤 막대가 안 보이는 터치 기기와
   좁은 폭만(PC 는 막대가 보인다). 마스크 색은 불투명이면 무엇이든 같다 ── */
@media (hover:none),(max-width:640px){
  .xs-r{-webkit-mask-image:linear-gradient(to right,var(--text) calc(100% - 2.5rem),transparent calc(100% - .5rem));
    mask-image:linear-gradient(to right,var(--text) calc(100% - 2.5rem),transparent calc(100% - .5rem))}
  .xs-l{-webkit-mask-image:linear-gradient(to left,var(--text) calc(100% - 2.5rem),transparent calc(100% - .5rem));
    mask-image:linear-gradient(to left,var(--text) calc(100% - 2.5rem),transparent calc(100% - .5rem))}
  .xs-l.xs-r{-webkit-mask-image:linear-gradient(to right,transparent .5rem,var(--text) 2.5rem,var(--text) calc(100% - 2.5rem),transparent calc(100% - .5rem));
    mask-image:linear-gradient(to right,transparent .5rem,var(--text) 2.5rem,var(--text) calc(100% - 2.5rem),transparent calc(100% - .5rem))}
}

/* ── 움직임 줄이기 존중 ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}