/* 머니그라피 Rounded (토스 무료 서체, 웹사이트·임베딩 허용, 파일 수정·재배포 금지) */
@font-face { font-family: "Moneygraphy Rounded"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/Moneygraphy-Rounded.woff2") format("woff2"); }
/* 적바림 홈페이지 · 작업 노트
   1) 토큰: 적바림 디자인 시스템 tokens.json과 같은 값
   2) 컴포넌트: jb- 로 시작. 디자인 시스템 components와 같은 코드
   3) 작업 노트 소품: 모눈종이, 테이프, 펜 자국, 손글씨
   4) 페이지 배치 */

/* 1) 토큰 */
:root {
  --ink: #121417;
  --bg: #f1f2f4;
  --paper: #ffffff;
  --muted: #5a616b;
  --line: #dadde2;
  --accent: #e4480c;
  --accent-text: #c2410c;
  --accent-night: #ff6a2b;
  --accent-soft: #fde8dd;
  --on-accent: #ffffff;
  --night: #121417;
  --night-text: #d2d6dc;
  --night-muted: #9ea5af;
  --memo-ink: #1f2329;
  --bezel: #0b0c0e;
  --browser-bar: #e4e6ea;
  --browser-dot: #c2c7ce;

  --grid: rgba(18, 20, 23, 0.055);
  --tape: rgba(253, 232, 221, 0.92);

  --font-sans: "Pretendard Variable", Pretendard, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --font-hand: "Moneygraphy Rounded", var(--font-sans); /* 손글씨 자리 (2026-10-22 피그마에서 머니그라피로) */
  --font-title: "Moneygraphy Rounded", var(--font-sans); /* 큰 제목과 구역 제목 (굵기는 하나뿐) */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 44px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-memo: 4px;
  --radius-sm: 8px;
  --radius-browser: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-screen: 22px;
  --radius-phone: 28px;
  --radius-pill: 999px;

  --shadow: 0 24px 44px -20px rgba(18, 20, 23, 0.42), 0 2px 6px rgba(18, 20, 23, 0.08);
  --shadow-sm: 0 14px 24px -16px rgba(18, 20, 23, 0.4), 0 1px 4px rgba(18, 20, 23, 0.08);
  --shadow-receipt: 0 16px 22px rgba(18, 20, 23, 0.14);

  --tilt-memo: -2.5deg;
  --tilt-underline: -2deg;

  /* 펜 자국: 캔버스 보드와 같은 선 */
  --pen-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 56' preserveAspectRatio='none'%3E%3Cpath d='M20 44C6 26 34 6 62 6C92 6 110 16 106 30C102 46 76 52 52 51C28 50 8 44 10 30C11 22 22 16 38 12' fill='none' stroke='%23e4480c' stroke-width='4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --pen-under: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8C50 3 110 10 160 6C176 5 188 6 197 4' fill='none' stroke='%23e4480c' stroke-width='4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --pen-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 18'%3E%3Cpath d='M2 10C5 12 7 14 8 16C11 9 15 5 20 2' fill='none' stroke='%23e4480c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --pen-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M21 4C31 4 37 11 36 21C35 30 28 36 19 36C10 36 4 29 4 20C4 12 10 6 18 5' fill='none' stroke='%23e4480c' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 2) 컴포넌트 */

/* 글씨 로고: 적바림 + 기울어진 주황 밑줄 */
.jb-wordmark { display: inline-flex; flex-direction: column; align-items: center; color: inherit; font-weight: 800; letter-spacing: -0.05em; line-height: 1; text-decoration: none; }
.jb-wordmark img { display: block; width: auto; height: 1em; }
.jb-wordmark::after { content: ""; display: block; width: 70%; height: 0.1em; min-height: 3px; margin-top: 0.22em; border-radius: var(--radius-pill); background: var(--accent-night); transform: rotate(var(--tilt-underline)); }

/* 버튼 */
.jb-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 52px; padding: 0 22px; border: 1.5px solid transparent; border-radius: var(--radius-md); font-family: inherit; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
.jb-btn i { font-size: 20px; }
.jb-btn-primary { background: var(--accent-text); color: var(--on-accent); }
.jb-btn-primary:hover { background: var(--ink); }
.jb-btn-ink { background: var(--ink); color: var(--paper); }
.jb-btn-ink:hover { background: var(--accent-text); }
.jb-btn-line { border-color: var(--ink); background: var(--paper); color: var(--ink); }
.jb-btn-line:hover { background: var(--ink); color: var(--paper); }
.jb-btn-night { background: var(--accent-night); color: var(--ink); }
.jb-btn-night:hover { background: var(--paper); }

/* 기기 틀: 안의 화면은 실제 샘플 사이트를 찍은 것만 */
.jb-phone { padding: 6px; border-radius: var(--radius-phone); background: var(--bezel); box-shadow: var(--shadow); }
.jb-phone img { width: 100%; border-radius: var(--radius-screen); }
.jb-browser { overflow: hidden; border-radius: var(--radius-browser); background: var(--paper); box-shadow: var(--shadow); }
.jb-browser-bar { display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; background: var(--browser-bar); }
.jb-browser-bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--browser-dot); }
.jb-browser img { width: 100%; }

/* 손글씨 메모 */
.jb-memo { padding: 18px 22px 18px; border-radius: var(--radius-memo); background: var(--paper); box-shadow: var(--shadow); color: var(--memo-ink); font-family: var(--font-hand); transform: rotate(var(--tilt-memo)); }
.jb-memo-title { display: inline-block; margin: 0 0 6px; border-bottom: 2px solid var(--accent); font-size: 33px; line-height: 40px; }
.jb-memo ul { margin: 0; padding: 0; list-style: none; }
.jb-memo li { font-size: 27px; line-height: 35px; }
.jb-memo li::before { content: "· "; }

/* 아이콘 칸과 목록 */
.jb-tile { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); font-size: 24px; }
.jb-fit, .jb-gets, .jb-flow, .jb-vows { margin: 0; padding: 0; list-style: none; }
.jb-fit { border-top: 1px solid var(--line); }
.jb-fit > li { display: flex; align-items: center; gap: var(--space-4); padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 19px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.45; }
.jb-gets { display: grid; column-gap: 28px; }
.jb-gets > li { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 18px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.45; }
@media (min-width: 560px) { .jb-gets { grid-template-columns: 1fr 1fr; } }

/* 진행 과정: 번호는 손으로 쓴 동그라미 */
.jb-flow { counter-reset: step; }
.jb-flow > li { position: relative; min-height: 84px; padding: 0 0 var(--space-5) 56px; counter-increment: step; }
.jb-flow > li::before { content: counter(step); position: absolute; top: -2px; left: -2px; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; background: var(--paper) var(--pen-circle) center / 100% 100% no-repeat; color: var(--accent-text); font-family: var(--font-hand); font-size: 27px; line-height: 1; }
.jb-flow > li::after { content: ""; position: absolute; top: 40px; bottom: 2px; left: 17px; border-left: 2px dashed var(--line); }
.jb-flow > li:last-child { min-height: 0; padding-bottom: 0; }
.jb-flow > li:last-child::after { display: none; }
.jb-flow b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; line-height: 36px; }
.jb-flow span { display: block; margin-top: 1px; color: var(--muted); font-size: 16px; line-height: 1.6; }

/* 도장: 환불 기준처럼 꼭 보여야 하는 약속 */
.jb-callout { position: relative; padding: 18px 20px 16px; border: 3px double var(--accent); border-radius: var(--radius-lg); background: var(--paper); transform: rotate(-2deg); }
.jb-callout > i { color: var(--accent); font-size: 30px; }
.jb-callout b { display: block; margin-top: 6px; color: var(--accent-text); font-size: 19px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.35; }
.jb-callout span { display: block; margin-top: 6px; color: var(--muted); font-size: 15px; line-height: 1.55; }

/* 영수증 */
.jb-receipt-wrap { filter: drop-shadow(var(--shadow-receipt)); }
.jb-receipt { padding: 22px 22px 34px; background: var(--paper); -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%; }
.jb-receipt dl, .jb-receipt dd { margin: 0; }
.jb-receipt-title { margin: 0; padding-bottom: 10px; border-bottom: 2px solid var(--ink); color: var(--muted); font-size: 16px; font-weight: 700; }
.jb-receipt dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: 14px 0; border-bottom: 1px dashed var(--line); }
.jb-receipt dt { font-size: 18px; font-weight: 700; line-height: 1.4; }
.jb-receipt dt small { display: block; margin-top: 2px; color: var(--muted); font-size: 14px; font-weight: 500; }
.jb-receipt dd { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jb-receipt .is-total { border-bottom: 0; }
.jb-receipt .is-total dt { font-size: 21px; }
.jb-receipt .is-total dd { color: var(--accent); font-size: 28px; }
.jb-receipt-note { margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg); color: var(--muted); font-size: 15px; line-height: 1.5; }

/* 비교표 */
.jb-pk { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 16px; font-variant-numeric: tabular-nums; }
.jb-pk th, .jb-pk td { padding: 9px 6px; border-bottom: 1px solid var(--line); font-weight: 600; text-align: center; }
.jb-pk tbody th { padding-left: 0; color: var(--muted); text-align: left; }
.jb-pk thead th { padding-top: 22px; border-bottom: 2px solid var(--ink); font-size: 16px; font-weight: 800; line-height: 1.3; vertical-align: bottom; }
.jb-pk thead td { border-bottom: 2px solid var(--ink); }
.jb-pk thead small { display: block; color: var(--muted); font-size: 13px; font-weight: 600; }
.jb-pk .pick { background: var(--accent-soft); }
.jb-pk thead .pick { position: relative; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.jb-pk tbody tr:last-child > * { border-bottom: 0; }
.jb-pk tbody tr:last-child .pick { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.jb-pk i { color: var(--accent); font-size: 20px; vertical-align: -3px; }
.jb-pk .opt { color: var(--muted); font-size: 14px; }
.jb-pk .jb-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(-6deg); }

/* 배지: 도장처럼 찍힌 글자 */
.jb-badge { display: inline-block; padding: 2px 10px; border: 2px solid var(--accent); border-radius: var(--radius-sm); background: var(--paper); color: var(--accent-text); font-size: 13px; font-weight: 800; line-height: 1.4; white-space: nowrap; }

/* 약속 목록 */
.jb-vows > li { display: grid; grid-template-columns: 48px 1fr; padding: 16px 0; border-top: 1px solid var(--line); }
.jb-vows > li > i { color: var(--accent); font-size: 26px; line-height: 30px; }
.jb-vows b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.03em; line-height: 30px; }
.jb-vows span { display: block; margin-top: 2px; color: var(--muted); font-size: 16px; line-height: 1.6; }

/* 작은 안내 글 */
.jb-fine { color: var(--muted); font-size: 14px; line-height: 1.55; }

/* 자주 묻는 질문 */
.jb-faq { border-top: 1px solid var(--line); }
.jb-faq details { border-bottom: 1px solid var(--line); }
.jb-faq summary { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: 20px 0; font-size: 18px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.5; list-style: none; cursor: pointer; }
.jb-faq summary::-webkit-details-marker { display: none; }
.jb-faq summary i { flex: none; margin-top: 2px; color: var(--accent); font-size: 22px; transition: transform 0.2s; }
.jb-faq details[open] summary i { transform: rotate(45deg); }
.jb-faq details > p { margin: 0; padding: 0 38px 22px 0; }

/* 입력 칸 */
.jb-field { display: grid; gap: 6px; }
.jb-field[hidden] { display: none; }
.jb-label { font-size: 15px; font-weight: 700; }
.jb-label em { color: var(--accent-text); font-size: 13px; font-style: normal; }
.jb-input { width: 100%; min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--muted); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font-family: inherit; font-size: 17px; line-height: 1.5; }
.jb-input::placeholder { color: var(--muted); }
.jb-input:focus { border-color: var(--ink); outline: 2px solid var(--accent-text); outline-offset: 1px; }
textarea.jb-input { min-height: 180px; resize: vertical; }
.jb-input.is-lined { padding: 0 14px; background-color: var(--paper); background-image: repeating-linear-gradient(to bottom, transparent 0 35px, var(--line) 35px 36px); background-attachment: local; line-height: 36px; }
.jb-check { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.55; cursor: pointer; }
.jb-check input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent-text); }

/* 고르기 칸 */
.jb-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px; border-radius: var(--radius-md); background: var(--bg); }
.jb-seg label { position: relative; display: grid; place-content: center; min-height: 64px; padding: 8px 4px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 800; line-height: 1.3; text-align: center; cursor: pointer; }
.jb-seg small { display: block; color: var(--muted); font-size: 13px; font-weight: 600; }
.jb-seg input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.jb-seg label:has(input:checked) { background: var(--ink); color: var(--paper); }
.jb-seg label:has(input:checked) small { color: var(--night-text); }
.jb-seg label:has(input:focus-visible) { outline: 2px solid var(--accent-text); outline-offset: 2px; }

/* 수량 칸 */
.jb-stepper { display: inline-flex; flex: none; align-items: center; border: 1.5px solid var(--muted); border-radius: var(--radius-sm); background: var(--paper); }
.jb-stepper button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: var(--ink); font-size: 18px; cursor: pointer; }
.jb-stepper input { width: 36px; border: 0; background: none; color: var(--ink); font-family: inherit; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.jb-stepper input::-webkit-inner-spin-button, .jb-stepper input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }

/* 휴대폰 아래 고정 버튼 */
.jb-dock { position: fixed; right: 0; bottom: 0; left: 0; z-index: 50; display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-2); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--paper); transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
.jb-dock .jb-btn { min-height: 50px; padding: 0 12px; font-size: 16px; }
/* 첫 화면 버튼이나 문의 칸이 보이는 동안은 같은 버튼이 겹치지 않게 아래로 비켜요 (app.js) */
.jb-dock.is-away { visibility: hidden; transform: translateY(100%); transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s 0.25s; }
@media (prefers-reduced-motion: reduce) { .jb-dock, .jb-dock.is-away { transition: none; } }
@media (min-width: 900px) { .jb-dock { display: none; } }

/* 3) 작업 노트 소품 */

/* 테이프: .pin 을 붙이면 위 가운데에 붙어요 */
.pin { position: relative; }
.pin::before { content: ""; position: absolute; top: -12px; left: 50%; z-index: 2; width: 88px; height: 24px; margin-left: -44px; background: var(--tape); clip-path: polygon(0 12%, 5% 0, 95% 8%, 100% 0, 97% 50%, 100% 100%, 5% 92%, 0 100%, 3% 50%); transform: rotate(-2deg); pointer-events: none; }

/* 손글씨 머리말 */
.eyebrow { margin-bottom: 8px; color: var(--accent-text); font-family: var(--font-hand); font-size: 31px; font-weight: 400; line-height: 1; }

/* 펜 자국 */
.pen-circle { position: relative; display: inline-block; }
.pen-circle::after { content: ""; position: absolute; inset: -0.2em -0.24em -0.12em -0.28em; background: var(--pen-ring) center / 100% 100% no-repeat; pointer-events: none; }
.pen-under { padding-bottom: 0.1em; background: var(--pen-under) left bottom / 100% 0.2em no-repeat; }
.pen-checks > li { display: flex; align-items: center; gap: 10px; }
.pen-checks > li::before { content: ""; flex: none; width: 22px; height: 18px; background: var(--pen-check) center / contain no-repeat; }
svg.pen { overflow: visible; }
svg.pen path { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* 4) 페이지 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; padding-bottom: 76px; background-color: var(--bg); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 24px 24px; color: var(--ink); font-family: var(--font-sans); font-size: 17px; line-height: 1.7; word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
@media (min-width: 900px) { body { padding-bottom: 0; } }
body:has(dialog[open]) { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { min-width: 0; padding: 0; border: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; top: -80px; left: 16px; z-index: 100; padding: 10px 16px; border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font-weight: 700; }
.skip:focus { top: 12px; }
/* 내용 폭: 1440px 화면까지는 1160px, 더 넓은 화면에서는 따라 넓어져 최대 1440px */
:root { --wrap-max: clamp(1160px, calc(1160px + (100vw - 1440px) * 0.5), 1440px); }
.wrap { width: min(100% - 32px, var(--wrap-max)); margin-inline: auto; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* 머리 */
.site-head { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--line); background: rgba(241, 242, 244, 0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.site-head-in { display: flex; align-items: center; gap: var(--space-3); height: 64px; }
.site-head .jb-wordmark { flex: none; font-size: 26px; }
.site-nav { display: flex; gap: 2px; min-width: 0; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a { padding: 8px 10px; border-radius: var(--radius-sm); color: var(--muted); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.site-nav a:hover { color: var(--ink); }
.head-cta.jb-btn { display: none; min-height: 44px; padding: 0 18px; font-size: 15px; }
@media (max-width: 899px) { .site-nav { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); padding-right: 24px; } }
@media (min-width: 900px) { .site-head-in { gap: var(--space-5); height: 76px; } .head-cta.jb-btn { display: inline-flex; } }

/* 구역: 모눈종이 위, 흰 종이 구역은 .sec-paper */
.sec { padding-block: var(--space-8); }
.sec-paper { border-block: 1px solid var(--line); background: var(--paper); }
.sec-head { max-width: 720px; margin-bottom: var(--space-6); }
.sec-head h2, .h2 { font-family: var(--font-title); font-size: clamp(28px, 6vw, 40px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.25; }
.lead { margin-top: var(--space-3); color: var(--muted); font-size: 18px; font-weight: 600; line-height: 1.6; letter-spacing: -0.02em; }
.h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.35; }
.sheet { padding: 6px 22px; background: var(--paper); box-shadow: var(--shadow-sm); }
@media (min-width: 900px) { .sec { padding-block: var(--space-9); } .sec-head { margin-bottom: var(--space-7); } }

/* 첫 화면: 캔버스 A4 시안 */
.hero { overflow: hidden; padding-block: 40px 72px; }
.hero-in { display: grid; gap: 44px; align-items: center; }
.hero-copy { container-type: inline-size; } /* 제목 크기를 글 칸 너비에 맞추려고 */
.hero-eyebrow { color: var(--muted); font-size: 15px; font-weight: 700; }
@media (min-width: 900px) { .hero-eyebrow { color: var(--ink); font-size: 17px; font-weight: 500; } .hero .hero-sub { max-width: none; font-size: 16px; font-weight: 500; } .hero-cta .jb-btn { font-weight: 500; } }
.hero-sub strong { color: var(--accent-text); font-weight: 700; } /* 휴대폰 17px 굵은 글씨도 대비 4.5:1 넘게 */
.hero-facts small { font-size: 0.8em; }
.hero h1 { margin-top: 18px; font-family: var(--font-title); font-size: clamp(34px, 11.4cqi, 66px); font-weight: 400; line-height: 1.22; letter-spacing: -0.02em; }
.hero h1 .pen-under { white-space: nowrap; } /* "홈페이지가 됩니다."는 한 줄로 (칸 너비의 약 93%) */
.hero-sub { max-width: 540px; margin-top: 22px; color: var(--muted); font-size: clamp(17px, 4.4vw, 20px); font-weight: 600; line-height: 1.62; letter-spacing: -0.03em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.hero-facts { display: grid; gap: 8px; margin-top: 26px; font-size: 16px; font-weight: 600; }

.hero-board { position: relative; width: 100%; max-width: 560px; aspect-ratio: 9 / 10; justify-self: center; container-type: inline-size; }
.hero-board > * { position: absolute; }
.hb-shot { top: 11.7%; left: 4.4%; width: 92.6%; padding: 1.85cqw; background: var(--paper); box-shadow: var(--shadow); transform: rotate(-1.5deg); }
.hb-shot::before { width: 17cqw; height: 4.8cqw; margin-left: -8.5cqw; top: -2.2cqw; }
.hb-ring { top: 28.1%; left: 9.8%; width: 25.6%; height: 14.3%; }
.hb-note { color: var(--accent-text); font-family: var(--font-hand); line-height: 1.05; transform: rotate(-3deg); }
.hb-note-top { top: 0; left: 3%; font-size: 4.8cqw; }
.hb-arrow-top { top: 10.7%; left: 5.9%; width: 8.1%; height: 19.2%; }
.hb-memo { top: 64%; left: 0; width: 43%; padding: 3.7cqw 3.3cqw 3cqw; transform: rotate(-5deg); }
.hb-memo::before { width: 16cqw; height: 4.4cqw; margin-left: -8cqw; top: -2.2cqw; }
.hb-memo .jb-memo-title { margin-bottom: 0.7cqw; font-size: 5.4cqw; line-height: 1.2; }
.hb-memo li { font-size: 4.1cqw; line-height: 1.27; white-space: nowrap; }
.hb-arrow-memo { top: 71.7%; left: 43.7%; width: 25.9%; height: 11.7%; }
.hb-note-memo { top: 84.3%; left: 45.9%; font-size: 4.6cqw; }
.hb-phone { top: 47.5%; left: 70.7%; width: 26.7%; padding: 0.93cqw; border-radius: 4.8cqw; transform: rotate(4deg); }
.hb-phone img { border-radius: 3.9cqw; }
.hero-board figcaption { right: 0; bottom: -30px; }
@media (min-width: 900px) {
  .hero { padding-block: 64px 112px; }
  .hero-in { grid-template-columns: minmax(0, 1fr) 540px; gap: 40px; }
}

/* 세 가지 */
.three { display: grid; gap: 32px; }
.three-num { display: block; color: var(--accent-text); font-family: var(--font-hand); font-size: 60px; font-weight: 400; line-height: 0.9; }
.three h3 { margin-top: 10px; font-family: var(--font-title); font-weight: 400; }
.sec-head h2 .hl, #samples-title { color: var(--accent); }
.three p { margin-top: 10px; color: var(--muted); }
@media (min-width: 900px) {
  .three { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .three > li { padding: 0 28px; border-left: 1px dashed var(--line); }
  .three > li:first-child { padding-left: 0; border-left: 0; }
  .three > li:last-child { padding-right: 0; }
}

/* 샘플: 테이프로 붙인 휴대폰 */
.samples { display: grid; gap: 40px 32px; }
.sample { display: grid; grid-template-columns: 116px 1fr; gap: 22px; align-items: start; }
.sample-open { --tilt: -2deg; position: relative; display: block; padding: 0; border: 0; border-radius: var(--radius-phone); background: none; cursor: zoom-in; }
.sample:nth-child(even) .sample-open { --tilt: 1.8deg; }
.sample:nth-child(3n) .sample-open { --tilt: -1deg; }
.sample-open::before { content: ""; position: absolute; top: -10px; left: 50%; z-index: 2; width: 46%; height: 20px; background: var(--tape); clip-path: polygon(0 12%, 5% 0, 95% 8%, 100% 0, 97% 50%, 100% 100%, 5% 92%, 0 100%, 3% 50%); transform: translateX(-50%) rotate(-3deg); }
.sample-open .jb-phone { display: block; transform: rotate(var(--tilt)); transition: transform 0.2s; }
.sample-open:hover .jb-phone { transform: rotate(var(--tilt)) translateY(-4px); }
.sample-tag { color: var(--accent-text); font-family: var(--font-hand); font-size: 23px; font-weight: 400; line-height: 1.1; }
.sample h3 { margin-top: 6px; color: var(--accent); font-family: var(--font-title); font-size: 19px; font-weight: 400; letter-spacing: -0.03em; line-height: 1.4; }
.sample p { margin-top: 6px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.sample-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 6px; padding: 0; border: 0; background: none; color: var(--ink); font-family: inherit; font-size: 16px; font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 5px; cursor: pointer; }
.sample-links { display: flex; flex-wrap: wrap; column-gap: 22px; }
.samples-note { margin-top: var(--space-7); }
@media (min-width: 700px) { .samples { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) {
  .samples { grid-template-columns: repeat(3, 1fr); gap: 64px 40px; }
  .sample { grid-template-columns: 1fr; gap: 26px; }
  .sample-open { width: 66%; margin-inline: auto; }
}

/* 샘플 크게 보기 */
.sample-dlg { width: min(100% - 24px, 1040px); max-width: none; max-height: calc(100% - 24px); padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }
.sample-dlg::backdrop { background: rgba(18, 20, 23, 0.72); }
.dlg-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); background: var(--paper); }
.dlg-head .sample-tag { font-size: 21px; }
.dlg-head h3 { margin-top: 2px; font-size: 21px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.35; }
.dlg-close { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius-md); background: var(--bg); color: var(--ink); font-size: 22px; cursor: pointer; }
.dlg-body { display: grid; gap: 28px; padding: 20px; }
.dlg-live { margin-top: -18px; } /* 맨 위 화면 바로 밑: 사진 대신 실제 사이트를 새 탭으로 열어요 */
.dlg-phones { display: grid; grid-auto-columns: minmax(160px, 1fr); grid-auto-flow: column; gap: 16px; overflow-x: auto; padding-bottom: 6px; }
.dlg-3d { display: grid; gap: 8px; color: inherit; text-decoration: none; }
.dlg-3d img { transition: transform 0.2s; }
.dlg-3d:hover img { transform: scale(1.015); }
.dlg-facts { display: grid; gap: 14px; }
.dlg-facts dt { color: var(--accent-text); font-family: var(--font-hand); font-size: 22px; font-weight: 400; line-height: 1.2; }
.dlg-facts dd { margin-top: 2px; }
.dlg-facts li { position: relative; padding-left: 20px; }
.dlg-facts li::before { content: ""; position: absolute; top: 0.72em; left: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@media (min-width: 900px) {
  .dlg-body { grid-template-columns: 1.35fr 1fr; padding: 28px; }
  .dlg-body .jb-browser, .dlg-3d, .dlg-live { grid-column: 1 / -1; }
}

/* 메모가 홈페이지로 */
.memo-demo { display: grid; gap: 48px; align-items: center; }
.memo-stage { display: flex; align-items: center; justify-content: center; gap: 10px; padding-block: 18px 8px; }
.memo-stage .jb-memo { width: 54%; max-width: 300px; }
.memo-stage .jb-phone { width: 36%; max-width: 232px; transform: rotate(3deg); }
.memo-arrow { flex: none; width: 44px; height: 28px; }
.memo-copy .jb-fit { margin-top: var(--space-5); }
.memo-copy .jb-fit small { display: block; color: var(--muted); font-size: 15px; font-weight: 500; letter-spacing: 0; }
.memo-copy .jb-btn { margin-top: var(--space-5); }
/* 머니그라피는 나눔펜보다 커서 메모 글씨를 줄여요 (10-23) */
.memo-stage .jb-memo-title { font-size: 26px; line-height: 32px; }
.memo-stage .jb-memo li { font-size: 21px; line-height: 30px; }
/* 내 가게로 바꿔 보기: 메모 아래 쪽지 한 장 */
.memo-try { display: grid; gap: var(--space-5); }
.memo-mine { display: grid; gap: 14px; padding: 18px 18px 16px; border-radius: var(--radius-memo); background: var(--paper); box-shadow: var(--shadow-sm); }
.memo-mine[hidden] { display: none; }
.memo-mine-t { color: var(--accent-text); font-family: var(--font-hand); font-size: 21px; line-height: 1.2; }
.memo-mine-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.memo-mine .jb-fine { margin: 0; }
@media (max-width: 559px) {
  .memo-stage .jb-memo { width: 60%; padding: 12px 14px 14px; } /* 메모 한 줄이 한 줄로 들어가게 휴대폰 화면보다 넓게 */
  .memo-stage .jb-phone { width: 32%; }
  .memo-stage .jb-memo-title { font-size: 21px; line-height: 27px; }
  .memo-stage .jb-memo li { font-size: 15px; line-height: 23px; }
}
@media (max-width: 419px) {
  /* 아주 좁은 휴대폰: 화살표를 빼고 메모를 넓혀 한 줄씩 들어가게 (메모 옆 휴대폰이 화살표 역할) */
  .memo-stage { gap: 12px; }
  .memo-arrow { display: none; }
  .memo-stage .jb-memo { width: 65%; }
  .memo-stage .jb-phone { width: 31%; }
}
@media (max-width: 899px) {
  /* 휴대폰: 제목이 먼저, 그다음 메모와 바꿔 보기, 그다음 준비할 것 (1-2-3 순서) */
  .memo-demo { gap: 0; }
  .memo-try, .memo-copy { display: contents; }
  .memo-head { order: 1; }
  .memo-stage { order: 2; margin-top: var(--space-5); }
  .memo-mine { order: 3; margin-top: var(--space-4); }
  .memo-copy .jb-fit { order: 4; margin-top: var(--space-7); }
  .memo-copy > .jb-btn { order: 5; justify-self: start; }
}
@media (min-width: 900px) {
  .memo-demo { grid-template-columns: 1fr 1fr; gap: 72px; }
  .memo-stage { gap: 18px; }
  .memo-arrow { width: 64px; height: 40px; }
}

/* 이런 고민: 종이 한 장에 */
.worries { padding: 6px 22px; background: var(--paper); box-shadow: var(--shadow-sm); }
.worries > li { display: grid; gap: 10px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.worries > li:last-child { border-bottom: 0; }
.worry { display: flex; align-items: center; gap: var(--space-4); font-size: 19px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.45; }
.answer { padding-left: 60px; }
.answer b { color: var(--accent-text); }
.worries-end { margin-top: var(--space-5); color: var(--accent-text); font-family: var(--font-hand); font-size: 30px; line-height: 1.1; transform: rotate(-1.5deg); transform-origin: left; }
@media (min-width: 900px) {
  .worries { padding: 6px 32px; }
  .worries > li { grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
  .answer { padding-left: 0; }
}

/* 비용 */
.cost { display: grid; gap: 48px; align-items: center; }
.big-zero { position: relative; display: inline-block; margin: 18px 0 0 -0.04em; color: var(--accent); font-size: clamp(110px, 30vw, 168px); font-weight: 800; line-height: 0.9; letter-spacing: -0.06em; }
.big-zero::after { content: ""; position: absolute; inset: -0.12em -0.16em -0.1em -0.2em; background: var(--pen-ring) center / 100% 100% no-repeat; pointer-events: none; }
.own { margin-top: 26px; font-size: 18px; font-weight: 600; line-height: 1.6; }
.cost .jb-receipt-wrap { width: 100%; max-width: 400px; justify-self: center; transform: rotate(1.2deg); }
.cost-fine { margin-top: var(--space-6); }
@media (min-width: 900px) { .cost { grid-template-columns: 1fr 400px; gap: 64px; } }
@media (min-width: 1600px) { .cost { grid-template-columns: auto 400px; justify-content: start; column-gap: 160px; } } /* 넓은 화면: 영수증을 글 옆에 붙여 가운데가 비지 않게 */

/* 가격: 업종별 추천 구성 */
.fits-for { display: grid; gap: 18px; margin-top: var(--space-6); }
.fits-for li { --tilt: -0.8deg; position: relative; display: flex; flex-direction: column; padding: 18px 20px 14px; border-radius: var(--radius-memo); background: var(--paper); box-shadow: var(--shadow-sm); transform: rotate(var(--tilt)); }
.fits-for li:nth-child(2) { --tilt: 0.7deg; }
.fits-for li:nth-child(3) { --tilt: -0.4deg; }
.fits-for b { display: block; font-size: 16px; font-weight: 800; }
.fits-for span { display: block; margin-top: 2px; }
.fits-for small { display: block; margin-top: 2px; color: var(--muted); font-size: 15px; }
.fits-for a { display: inline-flex; align-self: flex-start; align-items: center; gap: 4px; min-height: 40px; margin-top: auto; padding-top: 4px; color: var(--accent-text); font-size: 15px; font-weight: 800; text-underline-offset: 4px; }
.fit-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 4px 0 6px; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.3; font-variant-numeric: tabular-nums; }
.fits-for .fit-price small { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: 0; }
@media (min-width: 900px) { .fits-for { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

/* 견적 계산: 폴더 탭이 달린 종이와 영수증 */
.calc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: calc(var(--space-8) + 40px); scroll-margin-top: 130px; } /* 안쪽 글이 열을 넓히지 못하게 (좁은 휴대폰에서 옆으로 넘쳤어요) */
.calc > div:first-child { position: relative; padding: 26px 20px 24px; border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md); background: var(--paper); box-shadow: var(--shadow-sm); }
.calc-title { position: absolute; bottom: 100%; left: 0; display: flex; align-items: center; height: 40px; padding: 0 20px; border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--paper); box-shadow: 0 -3px 8px -4px rgba(18, 20, 23, 0.16); font-size: 17px; }
.calc-title::before { content: ""; width: 18px; height: 18px; margin-right: 8px; background: var(--pen-check) center / contain no-repeat; }
.calc legend { margin-bottom: 10px; padding: 0; font-size: 15px; font-weight: 800; }
.calc fieldset + fieldset { margin-top: var(--space-6); }
.opts { border-top: 1px solid var(--line); }
.opt-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 68px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.opt-row:last-child { border-bottom: 0; }
.opt-row b { display: block; font-size: 17px; font-weight: 700; line-height: 1.4; }
.opt-row small { display: block; color: var(--muted); font-size: 14px; }
@media (max-width: 359px) { .opt-row { flex-wrap: wrap; } .opt-row .jb-stepper { margin-left: auto; } } /* 320px대 휴대폰은 +/− 버튼이 글 아래로 내려가요 */
.calc-base { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: var(--space-6); padding: 14px 18px; border-radius: var(--radius-md); background: var(--ink); color: var(--paper); }
.calc-base b { font-size: 17px; font-weight: 800; line-height: 1.4; }
.calc-base small { display: block; color: var(--night-text); font-size: 14px; font-weight: 600; }
.calc-base > b { flex: none; font-variant-numeric: tabular-nums; }
.calc small > span { white-space: nowrap; }
.calc-sheet-wrap { align-self: start; }
.calc-sheet { padding: 24px 22px 40px; background: var(--paper); -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%; }
.sheet-title { color: var(--muted); font-size: 16px; font-weight: 700; }
.sheet-lines { margin-top: 10px; border-top: 2px solid var(--ink); }
.sheet-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 16px; }
.sheet-lines li span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sheet-sum > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; }
.sheet-sum dt { font-weight: 700; }
.sheet-sum dt small { margin-left: 4px; color: var(--muted); font-size: 13px; font-weight: 600; }
.sheet-sum dd { font-weight: 800; font-variant-numeric: tabular-nums; }
.sheet-sum .is-total { padding-block: 14px 12px; border-bottom: 2px solid var(--ink); }
.sheet-sum .is-total dd { color: var(--accent-text); font-size: 30px; letter-spacing: -0.03em; }
.sheet-zero { display: flex; align-items: baseline; justify-content: space-between; margin-top: 8px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg); font-weight: 700; }
.sheet-zero b { color: var(--accent-text); font-size: 22px; font-weight: 800; }
.calc-sheet .jb-btn { width: 100%; margin-top: 18px; }
.calc-sheet .jb-fine { margin-top: 12px; }
/* 휴대폰: 옵션을 고르는 동안 합계가 화면 아래(고정 버튼 위)에 붙어 따라와요
   (Mobbin 참고: Square 구성 고르기의 '추가 • 금액' 버튼, Fresha 계산 화면 아래의 '결제할 금액' 줄) */
.calc-peek { position: sticky; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 3; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: var(--space-6) -6px 0; padding: 12px 16px; border-radius: var(--radius-md); background: var(--ink); color: var(--paper); font-size: 15px; font-weight: 700; box-shadow: var(--shadow); }
.calc-peek > span { color: var(--night-text); }
.calc-peek b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
@media (min-width: 900px) {
  .calc-peek { display: none; } /* PC는 견적서가 옆에 붙어 따라와요 */
  .calc { grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; }
  .calc > div:first-child { padding: 30px 30px 26px; }
  .calc-sheet-wrap { position: sticky; top: 100px; }
}

/* 받으시는 것과 챙기는 것 */
.two-col { display: grid; gap: 56px; }
.cares { margin-top: var(--space-5); border-top: 1px solid var(--line); }
.cares > div { padding: 16px 0; border-bottom: 1px solid var(--line); }
.cares dt { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; letter-spacing: -0.025em; }
.cares dt i { color: var(--accent); font-size: 22px; }
.cares dd { margin-top: 4px; padding-left: 32px; color: var(--muted); }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; gap: 72px; } }

/* 진행 과정 */
.process { display: grid; gap: 48px; }
.process-head .jb-callout { max-width: 360px; margin-top: var(--space-7); }
.process .jb-flow { padding: 30px 24px 28px; background: var(--paper); box-shadow: var(--shadow-sm); }
.rules { margin-top: var(--space-8); }
.rule-list { margin-top: var(--space-4); padding: 4px 22px; background: var(--paper); box-shadow: var(--shadow-sm); }
.rule-list > div { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.rule-list > div:last-child { border-bottom: 0; }
.rule-list dt { font-weight: 800; }
@media (min-width: 900px) {
  .process { grid-template-columns: 1fr 1.1fr; gap: 72px; }
  .process-head { position: sticky; top: 112px; align-self: start; }
  .process .jb-flow { padding: 36px 36px 32px; }
  .rule-list { padding: 4px 32px; }
  .rule-list > div { grid-template-columns: 200px 1fr; gap: 24px; }
}

/* 약속: 테이프로 붙인 편지 */
.letter { max-width: 1040px; margin-inline: auto; padding: 40px 22px 30px; background: var(--paper); box-shadow: var(--shadow); transform: rotate(-0.5deg); }
.promise { display: grid; gap: 8px; }
.promise .sec-head { margin-bottom: var(--space-4); container-type: inline-size; }
.promise .sec-head h2 { font-size: clamp(23px, 9.6cqi, 40px); } /* 좁은 칸: 가장 긴 줄(약 10.1em)이 칸 안에 들어가게 */
.sign { margin-top: var(--space-4); color: var(--accent-text); font-family: var(--font-hand); font-size: 34px; line-height: 1; text-align: right; transform: rotate(-3deg); }
@media (min-width: 900px) {
  .letter { padding: 56px 56px 44px; }
  .promise { grid-template-columns: 1fr 1.3fr; gap: 64px; }
  .promise .sign { grid-column: 2; }
}

/* 만들지 않는 것, 작업 방식 */
.nots { display: grid; gap: 8px; margin-top: var(--space-4); }
.nots li { display: flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.nots i { color: var(--muted); font-size: 20px; }
.honest p { margin-top: var(--space-4); }

/* 자주 묻는 질문 */
.faq { display: grid; gap: 8px; }
.faq .jb-faq { padding: 0 22px; border-top: 0; background: var(--paper); box-shadow: var(--shadow-sm); }
.faq .jb-faq details:last-child { border-bottom: 0; }
.faq-head p { margin-top: var(--space-3); color: var(--muted); }
.faq-head a { color: var(--accent-text); font-weight: 700; text-underline-offset: 4px; }
@media (min-width: 900px) {
  .faq { grid-template-columns: 1fr 1.7fr; gap: 64px; }
  .faq-head { position: sticky; top: 112px; align-self: start; }
  .faq .jb-faq { padding: 0 32px; }
}

/* 문의: 테이프로 붙인 메모장 */
.contact { display: grid; gap: 48px; }
.contact-facts { display: grid; gap: 10px; margin-top: var(--space-5); }
.contact-facts li { display: flex; gap: 10px; }
.contact-facts i { flex: none; margin-top: 4px; color: var(--accent); font-size: 20px; }
.contact-head .jb-btn { margin-top: var(--space-5); }
.memo-form { display: grid; gap: 20px; padding: 30px 20px 28px; border-radius: var(--radius-memo); background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }
.memo-form-title { display: inline-block; justify-self: start; border-bottom: 2px solid var(--accent); color: var(--memo-ink); font-family: var(--font-hand); font-size: 36px; line-height: 42px; }
.memo-form .jb-check { margin-top: 4px; }
.memo-form .jb-check a { color: var(--accent-text); font-weight: 700; }
.memo-form button[type="submit"] { width: 100%; }
.memo-form #f-plan { min-height: 0; resize: none; field-sizing: content; } /* 고른 구성은 긴 한 줄이라 잘리지 않게 줄을 바꿔 다 보여요 */
.memo-fill { display: inline-flex; justify-self: start; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1.5px dashed var(--muted); border-radius: var(--radius-sm); background: none; color: var(--ink); font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.memo-fill:hover { border-style: solid; }
/* 문의 메모의 '조금 더 적기' (선택): 칩을 누르면 아래 칸에 적혀요. 더 자세한 것은 결제 뒤 고객 요청서로 받아요 */
.memo-more { border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
.memo-more summary { display: flex; align-items: center; gap: 8px; padding: 14px 0; font-size: 16px; font-weight: 700; line-height: 1.45; cursor: pointer; list-style: none; }
.memo-more summary::-webkit-details-marker { display: none; }
.memo-more summary small { color: var(--muted); font-size: inherit; font-weight: 600; }
.memo-more summary i { flex: none; margin-left: auto; color: var(--accent); font-size: 22px; transition: transform 0.2s; }
.memo-more[open] summary i { transform: rotate(45deg); }
.memo-more-in { display: grid; gap: 20px; padding: 6px 0 22px; }
.pick { display: flex; flex-wrap: wrap; gap: 6px; }
.pick .d3-chip { min-height: 40px; padding: 0 12px; font-size: 14px; }
.memo-next { display: flex; gap: 8px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.memo-next i { flex: none; margin-top: 3px; color: var(--accent); font-size: 18px; }
.memo-next b { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .memo-more summary i { transition: none; } }
.hp { display: none; }
@media (min-width: 640px) { .memo-form { padding: 38px 32px 36px; } }
@media (min-width: 900px) { .contact { grid-template-columns: 1fr 1.25fr; gap: 72px; align-items: start; } .contact-head { position: sticky; top: 112px; } }

/* 바닥 */
.site-foot { padding-block: 48px 40px; border-top: 1px solid var(--line); background: var(--paper); }
.site-foot .jb-wordmark { font-size: 30px; }
.foot-meaning { max-width: 560px; margin-top: 22px; }
.foot-biz, .foot-links { margin-top: 14px; color: var(--muted); font-size: 15px; }
.foot-biz span { white-space: nowrap; } /* 상호·대표·사업자등록번호가 줄 중간에서 갈라지지 않게 */
.foot-links a { color: var(--ink); text-underline-offset: 3px; }
.site-foot .jb-fine { margin-top: 18px; }

/* 문서 쪽 (개인정보처리방침, 접수 완료) */
.doc-page { padding-block: 48px 72px; }
.doc { max-width: 820px; padding: 32px 22px; background: var(--paper); box-shadow: var(--shadow-sm); }
.doc h1 { font-family: var(--font-title); font-size: clamp(30px, 6vw, 40px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.25; }
.doc h2 { margin-top: 40px; font-size: 21px; font-weight: 800; letter-spacing: -0.025em; }
.doc p, .doc ul, .doc table { margin-top: 12px; }
.doc ul { padding-left: 20px; list-style: disc; }
.doc li + li { margin-top: 4px; }
.doc table { width: 100%; border-collapse: collapse; font-size: 16px; }
.doc th, .doc td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.doc thead th, .doc tbody th { background: var(--bg); font-weight: 700; }
.doc .table-scroll { overflow-x: auto; }
@media (min-width: 640px) { .doc { padding: 48px 44px; } }
.done { display: grid; place-items: start; gap: 20px; max-width: 640px; padding: 36px 24px; background: var(--paper); box-shadow: var(--shadow); }