/* 하루콕 공통 화면 규칙
   모든 페이지가 마지막에 불러와 글꼴·색·크기·버튼·입력창을 한 가지로 맞춘다.
   기준: 초등학생도 한눈에 읽고 누를 수 있게 — 글자 15px 이상, 누르는 곳 48px 이상,
   '실행 버튼은 크고 진한 남색' 한 가지, 제목은 로고와 같은 둥근 글꼴. */

:root{
  --font-body:'Noto Sans KR','Malgun Gothic','Apple SD Gothic Neo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display:'Do Hyeon','Noto Sans KR','Malgun Gothic',sans-serif;
  --paper:#F4F0E6;
  --paper-light:#FFFDF8;
  --surface:#FFFDF8;
  --ink:#16233D;
  --ink-soft:#3D4860;
  --muted:#586070;
  --line:#CDC4AB;
  --field-line:#8C8470;
  --stamp:#B23A2E;
  --yolk:#F0AD3D;
  --radius:14px;
  --radius-sm:10px;
  --col:640px;
}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  display:block;
  margin:0 auto;
  padding:20px 18px 56px;
  background:var(--paper);
  background-image:none;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.7;
  word-break:keep-all;
  overflow-wrap:anywhere;
}
body.modal-open{overflow:hidden}

/* ---------- 한 칸짜리 본문 폭 ---------- */
.wrap,.stub,.page{width:100%;max-width:var(--col);margin-left:auto;margin-right:auto}
main{display:block}

/* ---------- 상단 메뉴 ---------- */
.site-nav{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;max-width:none;margin:0 0 22px;padding:0 0 8px;
  border-bottom:2px solid var(--ink);
}
.site-nav .site-nav-brand,.site-nav-brand{
  display:inline-flex;align-items:center;min-height:48px;
  font-family:var(--font-display);font-weight:400;font-synthesis:none;font-size:26px;line-height:1;
  color:var(--ink);text-decoration:none;
}
.site-nav-brand span{color:var(--stamp)}
.site-nav-links{display:flex;gap:4px}
.site-nav .site-nav-links a,.site-nav-links a{
  display:inline-flex;align-items:center;min-height:48px;padding:6px 12px;
  font-size:16px;font-weight:500;color:var(--ink-soft);text-decoration:none;border-radius:var(--radius-sm);
}
.site-nav-links a:hover{background:rgba(22,35,61,.07);color:var(--ink)}
.site-nav-links a[aria-current="page"]{color:var(--ink);font-weight:700;background:rgba(22,35,61,.08)}

/* ---------- 제목·설명 ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;font-synthesis:none;color:var(--ink);line-height:1.35;word-break:keep-all}
h1{font-size:34px;margin:6px 0 12px;text-align:left}
h2{font-size:24px;margin:0 0 14px}
h3{font-size:20px;margin:22px 0 8px}
main h1.brand{text-align:center}
.lede,.kicker{color:var(--ink-soft);font-size:17px;line-height:1.7;max-width:none}
.kicker{font-size:16px;margin-bottom:4px}
.breadcrumb{font-size:15px;color:var(--muted);margin:0 0 10px}
.breadcrumb a{color:var(--muted);text-underline-offset:3px}

/* '사용방법' 한 줄 안내: 가장 먼저 읽히는 곳 */
main .tool-help{
  display:block;margin:0 0 20px;padding:12px 16px;
  background:#F8E9C6;border-radius:var(--radius-sm);text-align:left;
  color:var(--ink);font-family:var(--font-body);font-size:16.5px;line-height:1.65;
}
main .tool-help strong{
  display:inline-block;margin-right:8px;padding:1px 10px;border-radius:999px;
  background:var(--ink);color:#fff;font-size:14px;font-weight:700;line-height:1.7;
}

/* 카드 제목(홈 도구 묶음·가이드 목록) */
.goal-title,.guide-title,.card-box-title{font-family:var(--font-display);font-weight:400;font-synthesis:none;font-size:21px;line-height:1.4;color:var(--ink)}
.guide-tag,.pill{font-size:14px}
.goal-links a{font-size:16px}

/* ---------- 입력 카드 ---------- */
.sheet,.stub .card,.page .card-box,main .card:not(.fun):not(.utility){
  background:var(--surface);
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 2px 0 rgba(22,35,61,.07);
}
.card-box{background:#fff;border:1.5px solid var(--line);border-radius:var(--radius)}

/* 칸 이름과 도움말 */
.field label,main .field label,.field-label,legend{
  display:block;margin:0 0 8px;font-family:var(--font-body);font-size:17px;font-weight:700;color:var(--ink);line-height:1.5;
}
.field-hint,.hint,main .field-hint,main .hint{
  display:block;margin:7px 0 0;font-size:15px;line-height:1.65;color:var(--muted);
}
.error,.input-error{color:#A22A1F;font-weight:700;font-size:16px}

/* 입력칸: 테두리가 확실히 보이게 */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{
  font-family:var(--font-body);font-size:18px;color:var(--ink);min-height:52px;
  border:2px solid var(--field-line);border-radius:var(--radius-sm);background:#fff;padding:10px 14px;
}
.input-row,main .input-row{
  display:flex;align-items:center;gap:8px;
  background:#fff;border:2px solid var(--field-line);border-bottom-width:2px;border-radius:var(--radius-sm);padding:2px 14px;min-width:0;
}
.input-row input,main .input-row input,.input-row input:not([type=checkbox]){
  border:0!important;background:transparent!important;min-height:48px;padding:6px 0;
  font-family:var(--font-body)!important;font-size:20px!important;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);box-shadow:none;outline:0;
}
.input-row .unit,main .input-row .unit{font-size:17px;font-weight:700;color:var(--ink-soft);margin-left:4px}
input[type=date]{padding-left:10px;padding-right:8px;font-size:17px}
input::placeholder,textarea::placeholder{color:#7C8190;font-weight:400}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus,.input-row:focus-within{
  border-color:var(--ink);box-shadow:0 0 0 3px rgba(22,35,61,.22);outline:0;
}
input[type=checkbox],input[type=radio]{width:24px;height:24px;accent-color:var(--ink);flex:none}
.check,label.check{display:flex;align-items:flex-start;gap:10px;min-height:44px;font-size:17px;font-weight:500}

/* ---------- 버튼: 실행은 남색 한 가지 ---------- */
.primary,.calc-btn,.pull-btn,.cta,.cta-btn,a.home-btn,main .primary,main .calc-btn,a.cta-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  min-height:58px;padding:14px 20px;
  background:var(--ink);color:#fff;border:0;border-radius:var(--radius);
  font-family:var(--font-body);font-size:19px;font-weight:700;letter-spacing:0;line-height:1.3;text-align:center;text-decoration:none;
  box-shadow:0 4px 0 #0B1426;cursor:pointer;
}
.primary:hover,.calc-btn:hover,.pull-btn:hover,.cta:hover,.cta-btn:hover{background:#22345A;filter:none}
.primary:active,.calc-btn:active,.pull-btn:active,.cta:active,.cta-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #0B1426}
.pull-btn{margin-bottom:24px}
button:disabled,.primary:disabled,.calc-btn:disabled,.pull-btn:disabled{opacity:.45;cursor:default;box-shadow:none;transform:none}

/* 보조 버튼 */
.secondary,.calc-btn.secondary,.share-btn,.history-more-btn,.exclude-reset,.photo-btn,.sticker-upload-btn,.empty-state button{
  min-height:52px;padding:10px 16px;
  background:#fff;color:var(--ink);border:2px solid var(--field-line);border-radius:var(--radius-sm);
  font-family:var(--font-body);font-size:16px;font-weight:700;line-height:1.35;box-shadow:none;cursor:pointer;
}
.secondary:hover,.calc-btn.secondary:hover,.share-btn:hover,.history-more-btn:hover,.photo-btn:hover{background:#F2EEE2;border-color:var(--ink);filter:none}
.actions a.secondary,.actions a.primary{text-decoration:none}

/* 고르는 버튼(칩·탭·선택 상자): 선택되면 진한 남색 */
.seg button,.mode-buttons button,.purpose-switch button,.category-nav button,.meal-tab,.chip,.exclude-chip,.title-chip,.amount-row,.photo-shape-row .mode-btn,.theme-swatch,.sticker-btn{
  min-height:48px;font-family:var(--font-body);font-size:16px;font-weight:700;color:var(--ink);
  background:#fff;border:2px solid var(--field-line);border-radius:var(--radius-sm);cursor:pointer;
}
.seg button[aria-pressed=true],.seg button.active,.mode-buttons button[aria-pressed=true],.purpose-switch button[aria-pressed=true],.category-nav button[aria-pressed=true],
.meal-tab.active,.chip.active,.title-chip.active,.amount-row.selected,.photo-shape-row .mode-btn.active,.theme-swatch.active{
  background:var(--ink);color:#fff;border-color:var(--ink);
}
.meal-tab.active{background:var(--ink)}
.chip.active{background:var(--ink);color:#fff}
.exclude-chip.excluded{background:#EFE6E3;border-color:var(--stamp);color:#7B261D;text-decoration:line-through}
.mode-buttons small{font-size:14px;font-weight:400}

/* ---------- 접는 설명 ---------- */
details{border-bottom:1px solid var(--line)}
summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:52px;padding:10px 2px;cursor:pointer;list-style:none;
  font-family:var(--font-body);font-size:17px;font-weight:700;color:var(--ink);
}
summary::-webkit-details-marker{display:none}
summary::marker{content:''}
summary::after{
  content:'';flex:none;width:10px;height:10px;margin-right:4px;
  border-right:3px solid var(--ink-soft);border-bottom:3px solid var(--ink-soft);
  transform:rotate(45deg) translateY(-2px);transition:transform .15s;
}
details[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
details[open]>summary{margin-bottom:8px}
.exclude-panel summary .arrow{display:none}
details>*:not(summary){font-size:16px;line-height:1.75}
details.more{margin-top:24px;border-top:2px solid var(--ink);border-bottom:0;padding-top:0}
details.more>summary{font-size:17px}

/* ---------- 결과 ---------- */
.result,.result-card{border-top-color:var(--ink)}
.result-label{font-size:16px;font-weight:700;color:var(--ink-soft)}
.result-value,.result-amount{font-family:var(--font-body)!important;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.breakdown-row{font-size:16.5px}
.disclaimer,.basis-line,.result-note,.formula{font-size:15px;line-height:1.7;color:var(--muted)}
.disclaimer-box,.info-block p.notice{font-size:15px;line-height:1.7;color:var(--ink)}
.disclaimer-box{font-weight:700}

/* ---------- 표·글 ---------- */
table{font-size:16px}
th,td{padding:12px 8px}
th{font-weight:700;color:var(--ink)}
article p,article li,.faq-item .a,.info-block p,.info-block li{font-size:17px;line-height:1.85;color:var(--ink-soft)}
article h2,.info-block h2{font-size:26px;margin:36px 0 12px;color:var(--ink)}
article h3{font-size:21px;margin:26px 0 8px}
.faq-item .q{font-size:17px;font-weight:700;color:var(--ink)}
.example-box,.warn-box,.lead-note{border-radius:var(--radius-sm)}
.sources,.sources li,.sources a{font-size:15px;line-height:1.7}

/* ---------- 관련 도구·가이드 링크 ---------- */
.related,.related-links{border-top-color:var(--line)}
.related-title{font-family:var(--font-display);font-weight:400;font-size:20px;color:var(--ink)}
.related a,.related-links a,.tool-jumps a,.guide-callout a,.guide-callout{font-size:16px}
.related a,.related-links a{min-height:48px;display:flex;align-items:center}

/* ---------- 바닥 안내 ---------- */
footer{
  max-width:none;margin:40px 0 0;padding:20px 0 0;border-top:1px solid var(--line);
  text-align:center;font-size:15px;color:var(--muted);
}
footer a{display:inline-flex;align-items:center;min-height:48px;margin:0 8px;color:var(--ink-soft);text-underline-offset:3px}
footer p{margin:4px 0 0;font-size:14px}

a.home-btn{display:inline-flex;width:auto;min-width:200px}
/* 소개·개인정보·404 같은 글 페이지는 본문 폭을 맞춘다 */
body>h1:first-child,body>h1:first-of-type{margin-top:8px}

/* ---------- 키보드·접근성 ---------- */
:focus-visible,main :focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--stamp);outline-offset:3px;border-radius:6px}
button,a,input,select,textarea,summary{touch-action:manipulation}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------- 좁은 화면 ---------- */
/* 복원 도구도 같은 조작 규칙을 사용한다. 저장용 쿠폰 도안은 별도 유지한다. */
.restored-tool .stub,.restored-tool .page{max-width:var(--col)}
.restored-tool main>.card{padding:22px;margin-bottom:20px}
.restored-tool .field>label,.restored-tool .group-label{font-size:17px;font-weight:700;color:var(--ink)}
.restored-tool .field-row,.restored-tool .output-row{min-width:0}
.restored-tool input,.restored-tool select,.restored-tool .field{min-width:0;max-width:100%}
.restored-tool .input-row input{width:100%;flex:1}
.restored-tool input[type=color]{width:64px;min-height:52px;padding:4px;flex:none}
.restored-tool .mode-btn,.restored-tool .mood-seg button,.restored-tool .type-chip,.restored-tool .type-btn,.restored-tool .pigment-chip,.restored-tool .chip,.restored-tool .copy-btn,.restored-tool .swap-btn{
  min-height:48px;padding:10px 12px;border:2px solid var(--field-line);border-radius:var(--radius-sm);
  font-family:var(--font-body);font-size:16px;background:#fff;color:var(--ink);cursor:pointer;
}
.restored-tool .type-chip.active,.restored-tool .mode-btn.active,.restored-tool .mood-seg button.active,.restored-tool .type-btn.active,.restored-tool .pigment-chip.active,.restored-tool .chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.restored-tool .theme-row{flex-wrap:wrap}
.restored-tool .theme-dot{min-width:48px;min-height:48px}
.restored-tool .mood-seg{flex-wrap:wrap}
.restored-tool .name-form{display:grid;grid-template-columns:1fr;gap:8px}
.restored-tool .name-form .heart{display:none}
.restored-tool .name-form input{width:100%}
.restored-tool .drop-zone{width:100%;font-family:var(--font-body);color:var(--ink);background:var(--surface)}
.restored-tool .photo-remove{min-height:48px;padding:8px 12px;font:inherit;border:2px solid var(--field-line);border-radius:10px}
.restored-tool .field-hint,.restored-tool .pigment-hint,.restored-tool .drop-sub{font-size:15px}
.restored-tool .coupon-wrap{overflow:auto}
.restored-tool .copy-btn{flex:none}
.restored-tool .convert-row{flex-wrap:wrap}
.restored-tool .convert-col{flex:1;min-width:180px}
.restored-tool .result-label,.restored-tool .result-note{font-size:16px}
.restored-tool .result-amount{overflow-wrap:anywhere}
@media(max-width:520px){
  .restored-tool main>.card{padding:16px}
  .restored-tool .field-row,.restored-tool .grid-controls{flex-wrap:wrap}
  .restored-tool .convert-col{flex-basis:100%}
  .restored-tool .pigment-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .restored-tool .btn-row{flex-direction:column}
}
@media (max-width:520px){
  body{padding:14px 14px 44px;font-size:17px}
  h1{font-size:30px}
  h2{font-size:22px}
  article h2,.info-block h2{font-size:23px}
  .site-nav{margin-bottom:16px}
  .site-nav-brand{font-size:24px}
  .site-nav-links a{padding:6px 10px}
}
.restored-tool .swap-btn { width: auto; height: auto; min-height: 48px; border-radius: 10px; padding: 8px 12px; }

/* Restored tools use the existing fixed banner layout, outside saved results. */
.restored-tool .ad-banner{width:100%;margin:32px auto;text-align:center}
.restored-tool .ad-label{margin:0 0 8px;font-size:13px;color:var(--muted)}
.restored-tool .ad-strip-slot{max-width:100%;margin:auto}