/* 메뉴코스트 A안: 매장 장부형 공통 디자인
   기존 기능·문구·계산 로직은 건드리지 않고 시각 언어만 교체한다. */
:root{
  color-scheme:light;
  --bg:#EDEEF0;
  --card:#FFFFFF;
  --ink:#202B2E;
  --ink-mid:#465754;
  /* 강조 박스(#E4F0EE) 위에서 4.3:1 밖에 안 나와 WCAG 4.5:1 을 못 넘겼다.
     본문·카드·강조 박스 세 배경 모두에서 4.77:1 이상이 되도록 조금 어둡게 잡았다. */
  --ink-soft:#5E6B66;
  --teal:#17616B;
  /* 합계 금액(20.6px, 굵기 600)에 쓰인다. 굵기가 700 미만이라 큰 글자 예외가
     적용되지 않아 4.5:1 을 그대로 지켜야 한다. 기존 값은 4.04:1 이었다. */
  --crema:#B84329;
  --line:#DFE1E5;
  --profit:#23664D;
  --warn:#9F3729;
  --shadow:5px 5px 0 #DED5C7;
  --radius:4px;
}
html{background:var(--bg)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Pretendard,"Malgun Gothic",sans-serif;line-height:1.65;letter-spacing:-.018em}
.page{width:min(700px,calc(100% - 32px));max-width:none;margin:0 auto;padding:16px;box-sizing:border-box}
/* 상단 메뉴는 두 줄이다. 윗줄은 실제로 계산하는 도구, 아랫줄은 안내하는 곳이다.
   한 줄에 여덟 개를 넣었더니 휴대폰(375px)에서 425px 가 필요해 뒤 두 개가 잘렸다.
   성격이 다른 것을 위아래로 가르면 이름을 줄이지 않아도 들어가고,
   도구를 더 만들어도 윗줄에 한두 개는 더 넣을 자리가 남는다. */
.topnav{position:sticky;top:0;z-index:20;background:var(--bg);border-top:2px solid var(--ink);border-bottom:1px solid var(--line);padding:0;margin-bottom:36px;isolation:isolate;box-shadow:0 2px 0 rgba(32,43,46,.08)}
.topnav__row{display:flex;justify-content:center;list-style:none;margin:0 auto;padding:0 8px;max-width:680px;box-sizing:border-box;gap:0}
.topnav li{margin:0;padding:0}
.topnav__row a{display:flex;align-items:center;justify-content:center;min-height:46px;padding:0 10px;border:0;border-bottom:2px solid transparent;color:var(--ink);font-size:.8125rem;font-weight:700;text-decoration:none;white-space:nowrap}
.topnav__row a:hover,.topnav__row a:focus-visible{color:var(--crema)}
.topnav__row a[aria-current="page"]{border-bottom-color:var(--crema);color:var(--ink);font-weight:800}
/* 아랫줄은 한 톤 눕혀서 윗줄과 구분한다. 눌러야 할 것은 윗줄이라는 뜻이다. */
/* 반투명(rgba)으로 덮으면 겹친 실제 색을 눈으로도 도구로도 확인하기 어렵다.
   --bg #F5F0E7 위에 4퍼센트를 겹친 값을 그대로 적어 둔다. 글자 대비 6.25:1. */
.topnav__row--info{border-top:1px solid var(--line);background:#E5E6E8}
.topnav__row--info a{min-height:38px;font-size:.75rem;font-weight:600;color:var(--ink-mid)}
.topnav__row--info a[aria-current="page"]{color:var(--ink)}
.masthead{border-bottom:1px solid var(--line);padding:0 0 24px;margin-bottom:20px}
main > header h1,.masthead h1,.masthead .title{font-size:clamp(1.75rem,5vw,2.25rem);letter-spacing:-.075em;line-height:1.25;font-weight:600;margin:0 0 12px}
.masthead .lede,.lede,.section-lede{color:var(--ink-mid);max-width:38em;line-height:1.75}
.crumb{color:var(--teal);font-size:.76rem;font-weight:700;margin-bottom:12px}
h2,h3{letter-spacing:-.055em;line-height:1.2}
.panel,.boxcalc,.be-result,.pro,.give,.faq,.read,.callout,.ch,.setbox,.slip,.stage1,.sum,.top,.grid2{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.panel,.boxcalc,.be-result,.pro,.give,.faq,.read,.callout,.ch,.setbox,.slip,.stage1,.sum,.top,.grid2{padding:24px}
.panel--key,.panel--lead{border-top:1px solid var(--teal)}
.field,.field-box,.owner-block,.ing,.row,.item,.feature,.feat,.vs__box{background:transparent;border-color:var(--line)}
label,.field__label,.owner-label,.ing-note,.field__hint,.note,.meta,.cap,.lede{color:var(--ink-mid)}
input,select,textarea,.in,.price-input{background:#FFFDF8;color:var(--ink);border:1px solid #AFA79A;border-radius:var(--radius);min-height:44px;font:inherit}
input:focus,select:focus,textarea:focus,.in:focus{border-color:var(--teal);outline:3px solid #17616B33;outline-offset:1px}
/* 주의: 이 규칙은 페이지 안의 모든 button 에 청록 배경과 흰 글자를 준다.
   두 가지를 조심해야 한다.
   하나, 배경을 투명하게 덮어 쓰는 버튼(목록 펼치기 버튼 등)은 color 도 함께
   되돌려야 한다. 그러지 않으면 흰 바탕에 흰 글자가 되어 글자가 사라진다.
   실제로 메뉴 관리·알바 급여의 목록 버튼에서 단위 표시가 통째로 안 보였다.
   둘, 버튼이 아닌 것을 이 목록에 넣지 않는다. 상자(.cta)와 명세서 안 작은
   글자(.plus)가 들어 있어서, 상자가 청록 배경을 받고도 안쪽 글자는 어두운
   색 그대로라 미리 보기 페이지의 마지막 상자가 통째로 안 읽혔다. */
button,.btn,.go,.row-btns button{background:var(--teal);color:#fff;border:1px solid var(--teal);border-radius:var(--radius);min-height:44px;font-weight:700}
button:hover,.btn:hover,.cta:hover,.go:hover{background:#124D55}
.btn--ghost,.btn--quiet,.btn--icon{background:transparent;color:var(--teal);border-color:var(--teal)}
.btn--danger{background:transparent;color:var(--warn);border-color:var(--warn)}
.segmented,.seg,.toggle{border-color:var(--line);border-radius:var(--radius);background:#E9E2D6}
.seg.is-selected,.seg[aria-checked=true],.toggle.is-selected{background:var(--teal);color:#fff}
.figures{gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fig{border-right:1px solid var(--line);border-radius:0;background:transparent;padding:16px 12px}
.fig:last-child{border-right:0}.fig__key,.fig__sub,.fig__unit{color:var(--ink-mid)}
.fig__value,.verdict__num,.be-result__value,.pro__price{color:var(--teal);font-variant-numeric:tabular-nums}
.fig--profit .fig__value{color:var(--profit)}
.fig--goal .fig__value{color:var(--crema)}
.pill,.tag{background:transparent;border:1px solid var(--teal);color:var(--teal);border-radius:999px}
.tag--warn{color:var(--warn);border-color:var(--warn)}
.result-grid{gap:24px;align-items:center}.result{border-top:1px solid var(--teal)}
.cup-caption{text-align:left;color:var(--ink-mid)}
.be-grid,.ing-grid,.grid2{gap:16px}.be-result{border-top:1px solid var(--teal)}
.be-result__warn,.loss-note{color:var(--warn);border-color:var(--warn)}
.swatch--fill{background:var(--crema)}.swatch--empty{border-color:var(--teal)}
.pro__price,.pro__amount{color:var(--crema)}
.pro__actions .cta{background:var(--crema);border-color:var(--crema)}
.feat,.how,.law,.fold,.list,.rows,.figure-row,.price-move,.pm,.vs{border-bottom:1px solid var(--line)}
.feat:last-child,.how:last-child,.fold:last-child,.list:last-child,.rows:last-child{border-bottom:0}
.feat{list-style:none;margin:0;padding:0}
/* 왼쪽 여백을 0 으로 두면 목록 앞에 찍는 점(::before, left:2px)이 글자 위에 겹친다.
   실제로 유료 기능 페이지 22곳에서 점이 첫 글자를 덮고 있었다.
   점이 차지하는 자리(2px + 7px)보다 넉넉히 비워 둔다. */
.feat li{position:relative;padding:14px 0 14px 24px;border-bottom:1px solid var(--line)}
.feat li:last-child{border-bottom:0;padding-bottom:0}
.feat b{display:block;margin-bottom:4px;font-weight:700;color:var(--ink)}
.feat span{display:block;color:var(--ink-mid);font-size:.92rem}
.panel + .panel{margin-top:24px}
.guide{margin:0 0 24px;padding:20px 24px;border:1px solid var(--line);background:var(--card)}
.guide h2{margin:0 0 12px}
.guide ol{margin:0;padding-left:22px;color:var(--ink-mid)}
.guide li{padding:5px 0}
.guide li strong{color:var(--ink)}
.tool-form{display:grid;gap:18px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form-field{display:grid;grid-template-rows:minmax(1.65em,auto) 44px minmax(1.5em,auto);gap:6px;align-content:start}
.form-field label{display:block;min-height:1.65em;font-weight:700;color:var(--ink)}
.form-field input,.form-field select{width:100%;height:44px;min-height:44px;box-sizing:border-box;padding:8px 10px}
.form-field small{min-height:1.5em;color:var(--ink-mid);font-size:.78rem}
.tool-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.tool-actions button,.tool-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 16px;text-decoration:none}
.tool-result{border-top:2px solid var(--teal);margin-top:24px;padding-top:20px}
.result-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 18px}
.result-summary div{border:1px solid var(--line);padding:12px;background:#F7F2E9}
.result-summary dt{font-size:.78rem;color:var(--ink-mid)}
.result-summary dd{margin:4px 0 0;color:var(--teal);font-size:1.2rem;font-weight:800;font-variant-numeric:tabular-nums}
.result-table{width:100%;border-collapse:collapse;font-size:.9rem}
.result-table th,.result-table td{padding:9px 6px;border-bottom:1px solid var(--line);text-align:right;vertical-align:top}
.result-table th:first-child,.result-table td:first-child{text-align:left}
.result-table tfoot th,.result-table tfoot td{border-top:2px solid var(--ink);font-weight:800}
.form-error{color:var(--warn);font-weight:700;margin:0}
.preview-paper{background:#fff;border:1px solid var(--line);padding:24px;white-space:pre-wrap;line-height:1.8}
.preview-paper h3{margin-top:0}
.muted{color:var(--ink-mid)}
@media(max-width:559px){.topnav__row{padding:0 4px}.form-grid,.result-summary{grid-template-columns:1fr}.result-table{font-size:.8rem}.result-table th,.result-table td{padding:8px 4px}}
.top__val,.sum__val,.slip__val,.item__cost,.item__margin,.item__pay,.row__price,.verdict__num{font-variant-numeric:tabular-nums;color:var(--teal)}
.top__cell--mine{background:#E4F0EE;border-color:var(--teal)}
.slip__row--sum{border-top:2px solid var(--ink)}
.ch--kakao{border-color:#9B7B19;background:#FFF9DD}.ch__icon{background:#F6D64A;color:#3C2F00}
.give{border-color:var(--crema)}.give__title{color:var(--crema)}
.foot{border-top:1px solid var(--line);color:var(--ink-mid);margin-top:64px;padding:28px 0 48px}
.foot__nav{display:flex;flex-wrap:wrap;gap:10px 18px;list-style:none;margin:0 0 18px;padding:0}
.foot__nav a{font-size:.82rem;text-decoration:none}
.foot p.foot__status{margin:0 0 var(--s-2);color:var(--ink-mid);font-size:.8125rem;line-height:1.6}
.foot a{color:var(--teal)}
table{border-color:var(--line)}th{background:#E9E2D6;color:var(--ink)}td{border-color:var(--line)}
hr{border:0;border-top:1px solid var(--line)}
@media(min-width:768px){body{font-size:1.0625rem}.page{width:min(740px,calc(100% - 56px))}.topnav{margin-bottom:44px}.masthead{padding-bottom:24px;margin-bottom:20px}.panel,.boxcalc,.be-result,.pro,.give,.faq,.read,.callout,.ch,.setbox,.slip,.stage1,.sum,.top,.grid2{padding:30px}}
@media(max-width:559px){.page{width:calc(100% - 24px)}.topnav{margin-bottom:28px}.topnav__row a{padding-inline:7px;font-size:.75rem}.topnav__row--info a{font-size:.7rem;padding-inline:9px}.panel,.boxcalc,.be-result,.pro,.give,.faq,.read,.callout,.ch,.setbox,.slip,.stage1,.sum,.top,.grid2{padding:18px}.figures{grid-template-columns:1fr}.fig{border-right:0;border-bottom:1px solid var(--line);padding:10px 12px}.fig:last-child{border-bottom:0}/* 좁은 화면에서 잔 그림을 숫자 위에 쌓으면 그림만으로 첫 화면이 차 버려서 원가도 본전 잔 수도 안 보인다. 좌우로 놓아야 처음 열었을 때 숫자가 보인다. */.result-grid{grid-template-columns:88px minmax(0,1fr);align-items:center;gap:12px}/* 360px 같은 아주 좁은 화면에서는 숫자 글자가 칸을 넘는다. 한 단계 줄인다. */.fig__value{font-size:1.35rem}.fig--profit .fig__value{font-size:1.9rem}/* 이름이 두 줄로 꺾이면 상자가 그만큼 길어져 숫자가 다시 아래로 밀린다. */.fig__key{white-space:nowrap}.be-grid,.ing-grid,.grid2{grid-template-columns:1fr}.foot{margin-top:42px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* 미리 보기 페이지 마지막 상자. 청록 바탕이라 안쪽 글자를 모두 밝게 잡는다.
   각 요소가 밝은 배경용 색(--ink, --ink-mid, --profit, --teal)을 들고 있어서
   하나씩 되돌리지 않으면 배경에 묻힌다. 흰 글자는 이 바탕에서 7.1:1 이다. */
.panel.cta{background:var(--teal);border-color:var(--teal);color:#fff}
.panel.cta h2,.panel.cta h3,.panel.cta p,.panel.cta strong,.panel.cta b,
.panel.cta .cta__num,.panel.cta .cta__price{color:#fff}
/* 보조 문구는 한 톤 눕히되 5.4:1 을 지킨다. */
.panel.cta .note,.panel.cta .cta__cycle,.panel.cta .muted{color:#D5E4E6}
/* 상자 안 버튼은 바탕이 이미 청록이라 색을 뒤집는다. */
.panel.cta .btn{background:#fff;color:var(--teal);border-color:#fff}
.panel.cta .btn:hover{background:#EDF3F4}
.panel.cta .btn--ghost{background:transparent;color:#fff;border-color:#D5E4E6}
.panel.cta .btn--ghost:hover{background:rgba(255,255,255,.14);color:#fff}

/* 320px 같은 아주 좁은 기기에서는 잔 그림을 넣을 자리가 없다.
   그림은 이해를 돕는 보조이고 숫자가 본체이므로, 이때는 숫자에 폭을 다 준다. */
@media(max-width:359px){
  .result-grid{grid-template-columns:1fr}
  .result-grid > :first-child{display:none}
  .fig__value{font-size:1.5rem}
  .fig--profit .fig__value{font-size:2rem}
}