/* ================= 공통 토큰 ================= */
:root {
  --font-display: "Noto Serif KR", "Nanum Myeongjo", "AppleMyungjo", serif;
  --r-pill: 2px;
  --r-input: 2px;
  --r-card: 0px;
  --shadow-sm: none;
  --shadow: none;
  --rule: var(--text);
  --point: var(--warn);
  --gutter: 20px;
}
@media (max-width: 767px) { :root { --gutter: 16px; } }

/* ================= 테마 색 =================
   모든 테마가 같은 지면 구조: 종이색 바탕 · 먹색 글자 · 강조색 · 포인트색.
   글자 대비는 모두 WCAG AA 이상. 미리보기 색은 js/theme.js에도 같이 적혀 있음 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #f8f7f4;
    --surface: #fcfbf9;
    --surface-2: #eeece6;
    --line: #d6d4ce;
    --text: #1a1c18;
    --text-sub: #4b4e47;
    --text-faint: #5d6058;
    --accent: #3b4a3f;
    --accent-hover: #2c382f;
    --accent-soft: #e4e8e2;
    --on-accent: #f8f7f4;
    --warn: #a4471f;
    --warn-soft: #f3e3da;
    --point: #c85a32;
    --shadow-lg: 0 1px 0 #1a1c18, 0 18px 40px rgb(26 28 24 / 0.12);
    color-scheme: light;
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #1a1c18;
    --surface: #212420;
    --surface-2: #2a2d27;
    --line: #3a3e36;
    --text: #ece9e1;
    --text-sub: #b8b5ab;
    --text-faint: #a09d93;
    --accent: #a7bcab;
    --accent-hover: #bccdbf;
    --accent-soft: #2b352e;
    --on-accent: #1a1c18;
    --warn: #e5926c;
    --warn-soft: #3b261c;
    --point: #e07a50;
    --shadow-lg: 0 0 0 1px #3a3e36, 0 24px 60px rgb(0 0 0 / 0.55);
    color-scheme: dark;
  }
}
:root[data-theme="light"] {
  --bg: #f8f7f4;
  --surface: #fcfbf9;
  --surface-2: #eeece6;
  --line: #d6d4ce;
  --text: #1a1c18;
  --text-sub: #4b4e47;
  --text-faint: #5d6058;
  --accent: #3b4a3f;
  --accent-hover: #2c382f;
  --accent-soft: #e4e8e2;
  --on-accent: #f8f7f4;
  --warn: #a4471f;
  --warn-soft: #f3e3da;
  --point: #c85a32;
  --shadow-lg: 0 1px 0 #1a1c18, 0 18px 40px rgb(26 28 24 / 0.12);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #1a1c18;
  --surface: #212420;
  --surface-2: #2a2d27;
  --line: #3a3e36;
  --text: #ece9e1;
  --text-sub: #b8b5ab;
  --text-faint: #a09d93;
  --accent: #a7bcab;
  --accent-hover: #bccdbf;
  --accent-soft: #2b352e;
  --on-accent: #1a1c18;
  --warn: #e5926c;
  --warn-soft: #3b261c;
  --point: #e07a50;
  --shadow-lg: 0 0 0 1px #3a3e36, 0 24px 60px rgb(0 0 0 / 0.55);
  color-scheme: dark;
}
:root[data-theme="tomato"] {
  --bg: #f7f2ee;
  --surface: #fcf9f6;
  --surface-2: #efe6e0;
  --line: #dcd0c9;
  --text: #231916;
  --text-sub: #54443f;
  --text-faint: #665650;
  --accent: #a5352a;
  --accent-hover: #8a2b21;
  --accent-soft: #f3dfd9;
  --on-accent: #fcf9f6;
  --warn: #7d5300;
  --warn-soft: #f4e8d2;
  --point: #4f7a3a;
  --shadow-lg: 0 1px 0 #231916, 0 18px 40px rgb(26 28 24 / 0.12);
  color-scheme: light;
}
:root[data-theme="tomato-dark"] {
  --bg: #1d1513;
  --surface: #251c19;
  --surface-2: #2f2420;
  --line: #45352f;
  --text: #f2e8e3;
  --text-sub: #c4b2ab;
  --text-faint: #ab9891;
  --accent: #f08c75;
  --accent-hover: #f5a28f;
  --accent-soft: #3f231c;
  --on-accent: #1d1513;
  --warn: #e2b562;
  --warn-soft: #3a2e16;
  --point: #9cc28a;
  --shadow-lg: 0 0 0 1px #45352f, 0 24px 60px rgb(0 0 0 / 0.55);
  color-scheme: dark;
}
:root[data-theme="blueberry-light"] {
  --bg: #f5f5f2;
  --surface: #fbfbf9;
  --surface-2: #e9e9e6;
  --line: #d4d4d2;
  --text: #1b1d26;
  --text-sub: #474a58;
  --text-faint: #5a5d6b;
  --accent: #3a4672;
  --accent-hover: #2d375d;
  --accent-soft: #e2e4ec;
  --on-accent: #fbfbf9;
  --warn: #a4471f;
  --warn-soft: #f3e3da;
  --point: #8a5a9a;
  --shadow-lg: 0 1px 0 #1b1d26, 0 18px 40px rgb(26 28 24 / 0.12);
  color-scheme: light;
}
:root[data-theme="blueberry"] {
  --bg: #18191f;
  --surface: #1f2028;
  --surface-2: #282a33;
  --line: #383a46;
  --text: #e9e9ee;
  --text-sub: #b3b4c1;
  --text-faint: #9b9caa;
  --accent: #aeb8e2;
  --accent-hover: #c2cbec;
  --accent-soft: #262b43;
  --on-accent: #18191f;
  --warn: #e8a07c;
  --warn-soft: #3b261e;
  --point: #c79ad6;
  --shadow-lg: 0 0 0 1px #383a46, 0 24px 60px rgb(0 0 0 / 0.55);
  color-scheme: dark;
}
:root[data-theme="sesame-light"] {
  --bg: #f3f1ec;
  --surface: #faf9f6;
  --surface-2: #e7e4dd;
  --line: #d3cfc6;
  --text: #1c1a17;
  --text-sub: #4f4a43;
  --text-faint: #625c54;
  --accent: #2f2b26;
  --accent-hover: #1c1a17;
  --accent-soft: #e6e1d8;
  --on-accent: #faf9f6;
  --warn: #a4471f;
  --warn-soft: #f3e3da;
  --point: #9a7429;
  --shadow-lg: 0 1px 0 #1c1a17, 0 18px 40px rgb(26 28 24 / 0.12);
  color-scheme: light;
}
:root[data-theme="sesame"] {
  --bg: #161513;
  --surface: #1e1d1a;
  --surface-2: #282622;
  --line: #3a3731;
  --text: #eee9e1;
  --text-sub: #b6afa5;
  --text-faint: #9e978c;
  --accent: #e2b660;
  --accent-hover: #ecc67e;
  --accent-soft: #3a2f18;
  --on-accent: #1a1406;
  --warn: #ee8f7b;
  --warn-soft: #3d231d;
  --point: #e2b660;
  --shadow-lg: 0 0 0 1px #3a3731, 0 24px 60px rgb(0 0 0 / 0.55);
  color-scheme: dark;
}

/* ================= 글자 ================= */
h1, h2, .page-title, .r-title, .footer-logo {
  font-family: var(--font-display);
  letter-spacing: -0.03em;
}
h1, h2, .page-title, .r-title { font-weight: 600; }
:focus-visible { outline: 2px solid var(--point); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--on-accent); }

/* ================= 버튼 · 입력 ================= */
.btn { border-radius: var(--r-input); font-weight: 650; letter-spacing: -0.01em; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-ghost { background: transparent; border-color: var(--text); }
.btn-ghost:hover:not(:disabled) { border-color: var(--text); background: var(--surface-2); }
.btn-icon { border-radius: var(--r-input); background: transparent; }
.btn-link { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; transition: text-decoration-color 0.2s var(--ease); }
.btn-link:hover { text-decoration-color: currentColor; }
.search { border-radius: var(--r-input); background: var(--surface); }
.search:focus { border-color: var(--text); }

.chip, .ai-cat, .ai-ing, .tag, .seg, .segmented, .count, .label, .nav-count, .dd-count { border-radius: var(--r-pill); }
.chip { background: transparent; }
.chip.on { background: var(--text); border-color: var(--text); color: var(--bg); }
.segmented { padding: 0; background: transparent; border: 1px solid var(--line); }
.seg { height: 34px; }
.seg.active { background: var(--text); color: var(--bg); box-shadow: none; }
.seg.active .seg-count { color: inherit; opacity: 0.75; }

.ing-tile-emoji, .ai-ing-emoji, .bundle-emoji, .ai-tags [aria-hidden="true"] { display: none; }

/* ================= 상단 바 ================= */
.topbar { border-bottom: 1px solid var(--rule); background: var(--bg); }
.brand { gap: 9px; color: var(--text); }
.brand-mark { width: auto; height: 34px; }
.brand-word {
  font-family: "Do Hyeon", var(--font);
  font-size: 1.42rem;
  line-height: 1;
  letter-spacing: 0.02em;
  padding-top: 2px;
}
.brand:hover .brand-mark { color: var(--accent); }
.brand-mark { transition: color 0.2s var(--ease); }

.theme-menu { border-color: var(--text); border-radius: 0; padding: 8px; }
.theme-menu-title { font-weight: 700; color: var(--text-sub); }
.theme-option { border-radius: 0; }
.theme-row .theme-option[aria-checked="true"] { border-color: var(--text); background: var(--surface-2); }
.swatch { border-radius: 0; border-color: var(--text); }
.nav-link { height: 64px; padding: 0 12px; border-radius: 0; background: none; box-shadow: inset 0 0 0 transparent; transition: color 0.2s var(--ease), box-shadow 0.25s var(--ease); }
.nav-link .ph { display: none; }
.nav-link:hover { color: var(--text); box-shadow: inset 0 -1px 0 var(--text); }
.nav-link.active { background: none; color: var(--text); box-shadow: inset 0 -3px 0 var(--accent); }

/* ================= 첫 화면: 비대칭 지면 ================= */
.hero {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 0;
  align-items: stretch;
  padding-top: 0;
  padding-bottom: 0;
  background: linear-gradient(var(--rule), var(--rule)) var(--gutter) 100% / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}
.hero-copy { padding: 72px 56px 56px 0; border-right: 1px solid var(--rule); }
.hero h1 {
  font-size: clamp(2.4rem, 1.2rem + 3.6vw, 4.2rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.045em;
  text-wrap: initial;
}
.hero h1 .hl { display: block; white-space: nowrap; }
.hero h1 .hl-indent { padding-left: 1.2em; }
.hero-sub { max-width: 26em; margin: 40px 0 0 auto; font-size: 1.06rem; line-height: 1.75; color: var(--text-sub); }
.hero-cta { justify-content: flex-end; margin-top: 28px; }

@media (prefers-reduced-motion: no-preference) {
  .hero h1 .hl { animation: ink-in 0.9s var(--ease) both; }
  .hero h1 .hl:nth-child(2) { animation-delay: 0.08s; }
  .hero h1 .hl:nth-child(3) { animation-delay: 0.16s; }
}
@keyframes ink-in { from { opacity: 0; transform: translateY(0.35em); clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -10% 0); } }

.picker {
  margin-top: 120px;
  padding: 20px 0 24px 32px;
  border: 0;
  border-top: 3px solid var(--rule);
  border-radius: 0;
  background: none;
  box-shadow: none;
  align-self: start;
}
.picker-head h2 { font-size: 1.5rem; }
.dd-trigger { border-radius: var(--r-input); border-color: var(--text); background: var(--surface); }
.dd-trigger > .ph:first-child { color: var(--text); }
.dd-panel { border-radius: 0; border-color: var(--text); box-shadow: var(--shadow-lg); }
.dd-cat { border-radius: 0; }
.dd-cat.active { background: none; box-shadow: inset 3px 0 0 var(--accent); }
.dd-cat-count { color: var(--point); }
.ing-tile-face { border-radius: var(--r-input); min-height: 0; padding: 12px 10px; }
.ing-tile:hover .ing-tile-face { transform: none; box-shadow: none; border-color: var(--text); }
.ing-tile input:checked + .ing-tile-face { background: var(--text); border-color: var(--text); }
.ing-tile input:checked + .ing-tile-face .ing-tile-name { color: var(--bg); }
.ing-tile input:checked + .ing-tile-face .ing-tile-check { background: var(--point); color: var(--bg); }
.tag { background: transparent; border: 1px solid var(--text); }
.picker-foot { border-top-color: var(--line); }
.pantry-note .ph { color: var(--point); }

/* ================= AI 셰프: 머리말은 왼쪽, 본문은 오른쪽 넓게 ================= */
.ai-chef { padding-top: 0; padding-bottom: 0; }
.ai-panel {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: 48px;
  padding: 56px 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: none;
}
.ai-head { grid-column: 1; grid-row: 1 / span 2; }
.ai-body, .ai-result { grid-column: 2; }
.ai-body { margin-top: 0; grid-template-columns: minmax(0, 1fr) 260px; }
.ai-badge { height: auto; padding: 0; background: none; color: var(--text-sub); font-size: 0.86rem; font-weight: 650; gap: 8px; }
.ai-badge .ph { display: none; }
.ai-badge::before { content: ""; width: 10px; height: 10px; background: var(--point); }
.ai-head h2 { margin-top: 18px; font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1.25; }
.ai-head p { margin-top: 16px; max-width: 24em; line-height: 1.75; }
.ai-cat { background: transparent; }
.ai-cat.active { background: var(--text); border-color: var(--text); color: var(--bg); }
.ai-cat-n { border-radius: 0; background: var(--point); color: var(--bg); }
.ai-ing { background: transparent; }
.ai-ing:hover { border-color: var(--text); }
.ai-ing.on { background: var(--text); border-color: var(--text); color: var(--bg); }
.ai-basket { padding: 18px 0 0 20px; border-left: 1px solid var(--line); border-radius: 0; background: none; }
.ai-result { border-top-color: var(--rule); }

/* ================= 만들 수 있는 요리: 목차처럼 줄 긋기 ================= */
.results-section { padding-top: 56px; }
.section-head { padding-bottom: 14px; margin-bottom: 28px; border-bottom: 1px solid var(--rule); }
.section-head h2 { font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 600; }
.result-head { margin-bottom: 0; padding-bottom: 10px; font-size: 1rem; }
.count { background: none; color: var(--point); font-weight: 700; padding: 0; min-width: 0; }
.count.muted { background: none; color: var(--text-faint); }

.cards { gap: 0 40px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.cards > li { border-top: 1px solid var(--line); }
.card {
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px;
  padding: 18px 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.card:hover { transform: none; box-shadow: none; border-color: transparent; }
.card:active { transform: none; }
.card-name { font-family: var(--font-display); font-weight: 600; font-size: 1.14rem; letter-spacing: -0.02em; }
.card-name > :first-child { text-decoration: none; }
.card .card-name { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; text-decoration-thickness: 1px; transition: text-decoration-color 0.2s var(--ease); }
.card:hover .card-name, .card:focus-visible .card-name { text-decoration-color: var(--text); }
.tile { width: 64px; height: 64px; border-radius: 0; background: var(--surface-2); color: var(--accent); }
.tile-photo img { filter: saturate(0.85); transition: filter 0.3s var(--ease); }
.card:hover .tile-photo img { filter: none; }
.card-missing { color: var(--warn); }

.empty {
  grid-template-columns: minmax(0, 1fr);
  padding: 8px 0 0;
  border: 0;
  border-radius: 0;
}
.empty-icon { display: none; }
.empty h3 { font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + 0.8vw, 1.8rem); font-weight: 600; letter-spacing: -0.03em; }
.empty > div > p:first-of-type { max-width: 34em; margin-top: 10px; line-height: 1.75; }
.bundles { gap: 0; margin-top: 28px; border-top: 1px solid var(--rule); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bundles li + li .bundle { border-left: 1px solid var(--line); }
.bundle { height: 100%; grid-template-columns: minmax(0, 1fr) auto; padding: 18px 18px 20px; border: 0; border-radius: 0; background: none; align-items: start; }
.bundle:hover { background: var(--surface-2); }
.bundle:active { transform: none; }
.bundle-main strong { font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; }
.bundle-main span { white-space: normal; margin-top: 4px; line-height: 1.5; }
.bundle > .ph { color: var(--point); }
.quick-label { margin-top: 28px; }
.empty .quick .chip { border-color: var(--text); }

.skeleton { background: var(--surface-2); border-radius: 0; }
.skeleton-card { border-radius: 0; }

/* ================= 다른 화면 · 팝업 공통 ================= */
.page-title { font-size: clamp(2rem, 1.4rem + 1.6vw, 2.8rem); padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.panel, .fav-item { border-radius: 0; }
dialog { border-color: var(--text); }
dialog::backdrop { background: rgb(26 28 24 / 0.55); }

/* ================= 바닥글 ================= */
.site-footer { margin-top: 0; border-top: 0; background: var(--bg); }
.footer-bottom { border-top: 0; background: linear-gradient(var(--line), var(--line)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat; }
.footer-grid { padding-top: 36px; background: linear-gradient(var(--rule), var(--rule)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 3px no-repeat; }
.footer-logo { font-size: 1.6rem; font-weight: 600; }
.footer-col h2 { font-family: var(--font); color: var(--text); }

/* ================= 화면 폭 ================= */
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { padding: 48px 0 40px; border-right: 0; }
  .hero-sub { margin-left: 0; }
  .hero-cta { justify-content: flex-start; }
  .picker { margin-top: 0; padding-left: 0; }
  .ai-panel { grid-template-columns: minmax(0, 1fr); row-gap: 28px; padding: 44px 0; }
  .ai-head { grid-row: auto; }
  .ai-body, .ai-result { grid-column: 1; }
  .bundles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bundles li:nth-child(3) .bundle { border-left: 0; }
  .bundles li:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 767px) {
  .brand-word { display: none; }
  .brand-mark { height: 30px; }
  .nav-link { height: auto; }
  .nav-link .ph { display: inline-block; }
  .nav-link.active { box-shadow: none; color: var(--accent); }
  .hero h1 .hl { white-space: normal; }
  .hero h1 .hl-indent { padding-left: 0; }
  .ai-panel { padding: 40px 0; }
  .ai-body { grid-template-columns: minmax(0, 1fr); }
  .ai-basket { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .bundles { grid-template-columns: minmax(0, 1fr); }
  .bundles li + li .bundle { border-left: 0; }
  .bundles li + li { border-top: 1px solid var(--line); }
  .bundle { padding-inline: 0; }
}