:root {
  /* 아이센스 블랙라벨 PC존 로고 색: 레드 #E83008 · 블랙 · 화이트 */
  --teal: #e83008;          /* 주 색상(레드): 선택된 탭, 단계 번호, 강조 */
  --teal-strong: #b82606;   /* 흰 바탕 위 글자용 진한 레드 */
  --teal-soft: #fdeae4;
  --orange: #161616;        /* 보조 색상(블랙): 주요 버튼, 주의 박스 */
  --orange-soft: #f1efed;
  --bg: #f6f5f4;
  --surface: #ffffff;
  --surface-2: #efedeb;
  --text: #1a1a1a;
  --text-2: #555555;
  --text-3: #8a8a8a;
  --line: #e3e1df;
  --hot: #d62f0a;
  --ice: #1c7ed6;
  --danger: #c92a2a;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(20, 30, 28, .06), 0 4px 14px rgba(20, 30, 28, .06);
  --tabbar-h: 64px;
  --topbar-h: 56px;
  --sidebar-w: 248px;
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --teal: #ff5a33; --teal-strong: #ff7d5e; --teal-soft: #3a1a12;
    --orange: #ff5a33; --orange-soft: #2a2624;
    --bg: #121212; --surface: #1c1c1c; --surface-2: #262626;
    --text: #f2f2f2; --text-2: #b5b5b5; --text-3: #858585; --line: #333333;
    --hot: #ff8a5c; --ice: #63b3ff; --danger: #ff6b6b;
    --shadow: 0 1px 2px rgba(0,0,0,.4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --teal: #ff5a33; --teal-strong: #ff7d5e; --teal-soft: #3a1a12;
  --orange: #ff5a33; --orange-soft: #2a2624;
  --bg: #121212; --surface: #1c1c1c; --surface-2: #262626;
  --text: #f2f2f2; --text-2: #b5b5b5; --text-3: #858585; --line: #333333;
  --hot: #ff8a5c; --ice: #63b3ff; --danger: #ff6b6b;
  --shadow: 0 1px 2px rgba(0,0,0,.4);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); background: var(--bg); color: var(--text);
  font-size: 16px; line-height: 1.55; word-break: keep-all; overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
}
body.big-text { font-size: 18.5px; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── 레이아웃 ── */
#app { min-height: 100vh; }
.main { min-width: 0; }
.sidebar { display: none; }
#view { padding: 16px 16px calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom)); max-width: 1120px; margin: 0 auto; outline: none; }

.topbar {
  position: sticky; top: 0; z-index: 20; height: calc(var(--topbar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 8px 0; display: flex; align-items: center; gap: 4px;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent;
}
.topbar.scrolled { border-bottom-color: var(--line); }
.topbar h1 { font-size: 17px; font-weight: 700; margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
.topbar .brand { display: flex; align-items: center; gap: 8px; flex: 1; padding-left: 6px; }
.topbar .brand img { width: 30px; height: 30px; border-radius: 8px; }
.topbar .brand b { font-size: 17px; }
.topbar .brand span { color: var(--text-3); font-size: 13px; font-weight: 500; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; flex: none; }
.icon-btn:active { background: var(--surface-2); }
.icon-btn svg { width: 24px; height: 24px; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface); border-top: 1px solid var(--line);
}
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11.5px; font-weight: 600; color: var(--text-3); }
.tabbar a svg { width: 24px; height: 24px; }
.tabbar a.on { color: var(--teal); }

@media (min-width: 1024px) {
  #app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; }
  .tabbar { display: none; }
  .sidebar {
    display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
    background: var(--surface); border-right: 1px solid var(--line); padding: 20px 14px;
  }
  .sidebar .logo { display: flex; align-items: center; gap: 10px; padding: 4px 8px 20px; }
  .sidebar .logo img { width: 40px; height: 40px; border-radius: 10px; }
  .sidebar .logo b { display: block; font-size: 16px; }
  .sidebar .logo span { font-size: 12.5px; color: var(--text-3); }
  .sidebar .grp { font-size: 12px; font-weight: 700; color: var(--text-3); padding: 16px 12px 6px; letter-spacing: .02em; }
  .sidebar a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font-weight: 600; font-size: 15px; color: var(--text-2); }
  .sidebar a svg { width: 20px; height: 20px; flex: none; }
  .sidebar a:hover { background: var(--surface-2); }
  .sidebar a.on { background: var(--teal-soft); color: var(--teal-strong); }
  .sidebar .foot { margin-top: auto; padding: 16px 12px 0; font-size: 12px; color: var(--text-3); }
  #view { padding: 24px 32px 48px; }
  .topbar { padding: 0 24px; }
  .topbar .brand { visibility: hidden; }
}

/* ── 공통 요소 ── */
.section-title { display: flex; align-items: baseline; justify-content: space-between; margin: 28px 0 12px; }
.section-title h2 { font-size: 19px; margin: 0; }
.section-title a { font-size: 14px; color: var(--teal); font-weight: 600; }
.muted { color: var(--text-3); }
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.chip-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 16px 4px; margin: 0 -16px; scroll-padding: 16px; }
.chip-row::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 38px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: 14.5px; display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }
.chip.on { background: var(--teal); border-color: var(--teal); color: #fff; }
.chip .n { font-size: 12px; opacity: .7; font-weight: 500; }
.badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--text-2); }
.badge.hot { background: color-mix(in srgb, var(--hot) 14%, transparent); color: var(--hot); }
.badge.ice { background: color-mix(in srgb, var(--ice) 14%, transparent); color: var(--ice); }
.badge.new { background: var(--orange-soft); color: var(--orange); }
.empty { text-align: center; color: var(--text-3); padding: 48px 16px; }

/* 검색창 */
.search { position: relative; }
.search input {
  width: 100%; height: 52px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface);
  padding: 0 48px 0 46px; font-size: 16.5px; box-shadow: var(--shadow); appearance: none;
}
.search input:focus { outline: none; border-color: var(--teal); }
.search > svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; color: var(--text-3); pointer-events: none; }
.search .clear { position: absolute; right: 4px; top: 4px; }

/* 홈 */
.hero { background: linear-gradient(135deg, var(--teal) 0%, var(--teal-strong) 100%); color: #fff; border-radius: 20px; padding: 22px 20px 20px; margin-bottom: 16px; position: relative; overflow: hidden; }
.hero h2 { margin: 0 0 4px; font-size: 22px; line-height: 1.3; }
.hero p { margin: 0 0 16px; opacity: .85; font-size: 14.5px; }
.hero .search input { border-color: transparent; box-shadow: none; }
.hero::after { content: ''; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255,255,255,.07); }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tile { padding: 16px; display: flex; flex-direction: column; gap: 10px; min-height: 112px; }
.tile .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal); }
.tile .ic.o { background: var(--orange-soft); color: var(--orange); }
.tile .ic svg { width: 24px; height: 24px; }
.tile b { font-size: 16.5px; display: block; }
.tile span { font-size: 13px; color: var(--text-3); }
@media (min-width: 720px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .tiles { grid-template-columns: repeat(5, 1fr); } }

/* 메뉴 그리드 */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.mcard { overflow: hidden; display: flex; flex-direction: column; position: relative; }
.mcard .ph { aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden; }
.mcard .ph img { width: 100%; height: 100%; object-fit: cover; }
.mcard .ph.none { display: grid; place-items: center; color: var(--text-3); }
.mcard .ph.none svg { width: 36px; height: 36px; opacity: .5; }
.mcard .bd { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.mcard .nm { font-weight: 700; font-size: 15px; line-height: 1.35; }
.mcard .pr { font-size: 13.5px; color: var(--text-3); margin-top: auto; }
.mcard .tags { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; }
.mcard .tags .badge { background: rgba(255,255,255,.92); }
.mcard .tags .badge.hot { color: #d9480f; } .mcard .tags .badge.ice { color: #1c7ed6; }
.mcard .fav-dot { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; color: var(--orange); }
.mcard .fav-dot svg { width: 16px; height: 16px; }

.list { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); min-height: 60px; }
.row:last-child { border-bottom: 0; }
.row .th { width: 48px; height: 48px; border-radius: 10px; overflow: hidden; background: var(--surface-2); flex: none; }
.row .th img { width: 100%; height: 100%; object-fit: cover; }
.row .tx { flex: 1; min-width: 0; }
.row .tx b { display: block; font-size: 15.5px; }
.row .tx span { display: block; font-size: 13px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .chev { color: var(--text-3); width: 20px; height: 20px; flex: none; }

/* ── 레시피 상세 ── */
.recipe-head { display: grid; gap: 16px; }
.recipe-photo { border-radius: var(--radius); overflow: hidden; background: var(--surface-2); aspect-ratio: 4/3; }
.recipe-photo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.recipe-meta h2 { font-size: 24px; margin: 4px 0 2px; line-height: 1.3; }
.recipe-meta .eng { color: var(--text-3); font-size: 14px; }
.recipe-meta .price { font-size: 18px; font-weight: 700; color: var(--teal); margin: 6px 0 10px; }
.recipe-meta .feature { color: var(--text-2); margin: 0 0 12px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 14.5px; }
.kv dt { color: var(--text-3); font-weight: 600; }
.kv dd { margin: 0; }
.ing-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ing-chips span { background: var(--surface-2); padding: 3px 10px; border-radius: 8px; font-size: 14px; }
.actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.btn { height: 46px; padding: 0 18px; border-radius: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--surface); border: 1.5px solid var(--line); font-size: 15px; }
.btn svg { width: 20px; height: 20px; }
.btn.primary { background: var(--orange); border-color: var(--orange); color: #fff; }
.btn.on { color: var(--orange); border-color: var(--orange); }
.btn.block { width: 100%; }
@media (min-width: 820px) {
  .recipe-head { grid-template-columns: minmax(0, 420px) 1fr; align-items: start; gap: 28px; }
}

.seg { display: flex; background: var(--surface-2); border-radius: 12px; padding: 4px; gap: 4px; margin: 22px 0 14px; position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top) + 6px); z-index: 10; box-shadow: 0 0 0 6px var(--bg); }
.seg button { flex: 1; height: 42px; border-radius: 9px; font-weight: 700; font-size: 15px; color: var(--text-2); }
.seg button svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 2px; }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.seg button.hot.on { color: var(--hot); } .seg button.ice.on { color: var(--ice); }
.var-seg { margin: 18px 0 0; position: static; box-shadow: none; }

.cupline { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); margin: 0 0 12px; flex-wrap: wrap; }

/* 단계 */
.steps { display: grid; gap: 12px; counter-reset: st; }
@media (min-width: 720px) { .steps.photo { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .steps.photo { grid-template-columns: repeat(3, 1fr); } }
.step { display: flex; gap: 12px; padding: 14px; align-items: flex-start; }
.step.has-img { flex-direction: column; padding: 0; overflow: hidden; }
.step .simg { width: 100%; aspect-ratio: 4/3; background: #fff; }
.step .simg img { width: 100%; height: 100%; object-fit: contain; }
.step .sbody { display: flex; gap: 12px; padding: 12px 14px 14px; align-items: flex-start; }
@media (max-width: 719px) {
  /* 휴대폰: 사진 왼쪽 · 설명 오른쪽으로 촘촘하게 */
  .step.has-img { flex-direction: row; padding: 10px; gap: 12px; align-items: center; }
  .step.has-img .simg { width: 44%; flex: none; border-radius: 10px; overflow: hidden; }
  .step.has-img .sbody { padding: 0; flex: 1; min-width: 0; gap: 10px; }
  .step.has-img .no { width: 26px; height: 26px; font-size: 13.5px; }
  .step.has-img .st { font-size: 15.5px; line-height: 1.5; }
}
.step .no { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--teal); color: #fff; font-weight: 800; font-size: 15px; display: grid; place-items: center; }
.step .st { font-size: 16px; font-weight: 500; }
.step .tip { font-size: 14px; color: var(--orange); margin-top: 4px; font-weight: 600; }
.q { color: var(--teal-strong); font-weight: 800; background: var(--teal-soft); padding: 0 4px; border-radius: 5px; white-space: nowrap; }
.tag { display: inline-block; background: var(--orange-soft); color: var(--orange); font-weight: 700; font-size: 13.5px; padding: 2px 8px; border-radius: 6px; margin: 0 0 4px; }

.ings { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.ings td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ings tr:last-child td { border-bottom: 0; }
.ings td.no { width: 40px; }
.ings td.no span { width: 26px; height: 26px; border-radius: 50%; background: var(--teal); color: #fff; font-weight: 800; font-size: 13.5px; display: grid; place-items: center; }
.ings td.it { font-weight: 700; width: 34%; }
.drink-layout { display: grid; gap: 14px; }
.drink-layout .dph { border-radius: var(--radius); overflow: hidden; background: #fff; max-width: 280px; }
@media (min-width: 720px) { .drink-layout { grid-template-columns: 240px 1fr; align-items: start; } }

.notes { margin: 16px 0 0; padding: 14px 16px; border-radius: var(--radius); background: var(--orange-soft); color: var(--text); font-size: 14.5px; }
.notes b { color: var(--orange); display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.notes b svg { width: 18px; height: 18px; }
.notes ul { margin: 0; padding-left: 18px; }
.src { font-size: 12.5px; color: var(--text-3); margin-top: 18px; }

.quick { padding: 6px 4px; }
.quick .qhead { padding: 10px 12px 2px; font-weight: 800; display: flex; gap: 8px; align-items: center; }
.qsteps { list-style: none; margin: 0; padding: 6px 12px 12px; display: grid; gap: 0; }
.qsteps li { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--line); font-size: 16.5px; }
.qsteps li:last-child { border-bottom: 0; }
.qsteps li .no { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--teal-soft); color: var(--teal-strong); font-weight: 800; font-size: 14px; display: grid; place-items: center; margin-top: 1px; }
.qsteps li.sub { padding-top: 14px; border-bottom: 0; }
.qsteps li.sub .tag { margin: 0; }
.quick + .quick { margin-top: 12px; }

/* 조리 모드 */
#overlay:empty { display: none; }
.cook { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: flex; flex-direction: column; }
.cook-top { display: flex; align-items: center; gap: 6px; padding: calc(8px + env(safe-area-inset-top)) 8px 8px; }
.cook-top b { flex: 1; font-size: 17px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cook-prog { display: flex; gap: 4px; padding: 0 16px 10px; }
.cook-prog i { flex: 1; height: 5px; border-radius: 3px; background: var(--line); }
.cook-prog i.on { background: var(--teal); }
.cook-body { flex: 1; overflow-y: auto; padding: 0 16px 16px; display: flex; flex-direction: column; gap: 16px; max-width: 760px; width: 100%; margin: 0 auto; }
.cook-body .ci { border-radius: var(--radius); overflow: hidden; background: #fff; max-height: 46vh; }
.cook-body .ci img { width: 100%; max-height: 46vh; object-fit: contain; }
.cook-body .cn { font-size: 15px; font-weight: 800; color: var(--teal); }
.cook-body .ct { font-size: clamp(22px, 5.8vw, 34px); font-weight: 700; line-height: 1.45; }
.cook-body .ctip { font-size: 18px; color: var(--orange); font-weight: 700; }
.cook-nav { display: flex; gap: 10px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); max-width: 760px; width: 100%; margin: 0 auto; }
.cook-nav .btn { flex: 1; height: 60px; font-size: 18px; }

/* 이미지 확대 */
.zoom { position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,.92); display: flex; flex-direction: column; }
.zoom .zbar { display: flex; justify-content: flex-end; padding: calc(6px + env(safe-area-inset-top)) 6px 6px; color: #fff; }
.zoom .zwrap { flex: 1; overflow: auto; display: grid; place-items: center; touch-action: pan-x pan-y; }
.zoom img { width: var(--nat, 100%); max-width: min(var(--nat, 1200px), 1600px); height: auto; }
.zoom.fit img { width: auto; max-width: min(100%, var(--nat, 100%)); max-height: 100%; }

/* 목차 단위 매뉴얼 */
.ch-title { font-size: 22px; margin: 0 0 16px; }
.ch-pages .page-view { scroll-margin-top: 70px; }
.pgsep { border: 0; border-top: 1px dashed var(--line); margin: 22px 0; }
.chno { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--teal-soft); color: var(--teal-strong); font-size: 12px; font-weight: 800; margin-right: 8px; vertical-align: 1px; }

/* 누끼 사진은 잘리지 않게 흰 바탕에 맞춤 */
.mcard .ph { background: #fff; }
.mcard .ph img { object-fit: contain; padding: 6px; }
.mcard .ph img[src^="video/"] { object-fit: cover; padding: 0; }

/* 조리영상 */
.videos { display: grid; gap: 12px; }
@media (min-width: 720px) { .videos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .videos { grid-template-columns: repeat(3, 1fr); } }
.vid { margin: 0; overflow: hidden; }
.vid video { width: 100%; aspect-ratio: 16 / 9; background: #000; display: block; object-fit: contain; }
.vid figcaption { padding: 10px 14px; font-weight: 700; font-size: 14.5px; }
.h2ic { width: 20px; height: 20px; vertical-align: -3px; color: var(--orange); }
.mcard .vid-dot { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; display: grid; place-items: center; }
.mcard .fav-dot + .vid-dot { right: 40px; }
.mcard .vid-dot svg { width: 12px; height: 12px; margin-left: 2px; }
.mcard .ph { position: relative; }
.mcard .ph .play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.mcard .ph .play svg { width: 44px; height: 44px; padding: 12px; border-radius: 50%; background: rgba(0,0,0,.55); }
@media (min-width: 1024px) { .tiles { grid-template-columns: repeat(6, 1fr); } }

/* 매뉴얼 */
.doc-list { display: grid; gap: 12px; }
@media (min-width: 720px) { .doc-list { grid-template-columns: repeat(2, 1fr); } }
.doc { display: flex; gap: 14px; padding: 16px; align-items: center; }
.doc .ic { width: 48px; height: 48px; border-radius: 13px; background: var(--teal-soft); color: var(--teal); display: grid; place-items: center; flex: none; }
.doc .ic svg { width: 26px; height: 26px; }
.doc b { font-size: 16.5px; display: block; }
.doc span { font-size: 13.5px; color: var(--text-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chapter { margin-bottom: 14px; overflow: hidden; }
.chapter h3 { margin: 0; padding: 14px 16px 6px; font-size: 15px; color: var(--teal); }
.page-view .pimg { border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow);  position: relative; }
.page-view .pimg .zhint { position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,.6); color: #fff; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; display: flex; gap: 4px; align-items: center; }
.page-view .pimg .zhint svg { width: 14px; height: 14px; }
.page-layout { display: grid; gap: 18px; }
@media (min-width: 1024px) { .page-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } .page-layout .ptext { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; } }
.ptext .blk { margin: 0 0 14px; white-space: pre-line; font-size: 15.5px; }
.ptext .blk.raw { font-size: 14px; color: var(--text-2); }
.ptext details summary { cursor: pointer; font-size: 14px; color: var(--text-3); font-weight: 600; padding: 6px 0; }
.tbl-wrap { overflow-x: auto; margin: 0 0 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.tbl { border-collapse: collapse; font-size: 14px; min-width: 100%; }
.tbl td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 8px 10px; vertical-align: top; white-space: pre-line; min-width: 70px; }
.tbl tr:first-child td { background: var(--surface-2); font-weight: 700; }
.tbl td:last-child { border-right: 0; }
.tbl tr:last-child td { border-bottom: 0; }
.pager { display: flex; gap: 10px; margin-top: 20px; }
.pager a { flex: 1; min-height: 56px; padding: 8px 14px; display: flex; flex-direction: column; justify-content: center; }
.pager a.next { text-align: right; align-items: flex-end; }
.pager small { color: var(--text-3); font-size: 12px; }
.pager b { font-size: 14.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; }
.labels { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.labels span { font-size: 12.5px; background: var(--surface-2); color: var(--text-2); padding: 2px 8px; border-radius: 6px; }

/* 원재료 */
.prod-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .prod-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .prod-grid { grid-template-columns: repeat(5, 1fr); } }
.prod { padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.prod .pp { aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #fff; display: grid; place-items: center; }
.prod .pp img { width: 100%; height: 100%; object-fit: contain; }
.prod b { font-size: 14.5px; line-height: 1.35; white-space: pre-line; }
.prod span { font-size: 12.5px; color: var(--text-3); line-height: 1.4; }
.info-box { padding: 14px 16px; white-space: pre-line; font-size: 14.5px; color: var(--text-2); margin-bottom: 16px; }

/* 세트 */
.set { padding: 14px 16px; }
.set b { font-size: 16px; }
.set .items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.set .items a, .set .items span { background: var(--teal-soft); color: var(--teal-strong); padding: 5px 11px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.set .items span { background: var(--surface-2); color: var(--text-2); }
.set-grid { display: grid; gap: 10px; }
@media (min-width: 720px) { .set-grid { grid-template-columns: repeat(2, 1fr); } }

/* 검색 결과 */
.hl { background: color-mix(in srgb, var(--orange) 28%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.res-sec { margin: 20px 0 8px; font-size: 14px; font-weight: 800; color: var(--text-3); }

/* 잠금 */
.lock { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: grid; place-items: center; padding: 24px; }
.lock .box { width: 100%; max-width: 360px; text-align: center; }
.lock img { width: 84px; height: 84px; border-radius: 22px; margin: 0 auto 16px; }
.lock input { width: 100%; height: 56px; text-align: center; font-size: 22px; letter-spacing: .3em; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); margin: 16px 0 10px; }
.lock .err { color: var(--danger); min-height: 22px; font-size: 14px; }

#toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 20px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(20px); background: var(--text); color: var(--bg); padding: 11px 18px; border-radius: 12px; font-size: 14.5px; font-weight: 600; opacity: 0; pointer-events: none; transition: .25s; z-index: 300; max-width: calc(100% - 32px); }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.settings .row { cursor: pointer; }
.switch { width: 48px; height: 28px; border-radius: 999px; background: var(--line); position: relative; flex: none; transition: .2s; }
.switch::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch.on { background: var(--teal); }
.switch.on::after { left: 23px; }
.progress { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 8px; }
.progress i { display: block; height: 100%; background: var(--teal); width: 0; transition: width .2s; }

@media print {
  .sidebar, .tabbar, .topbar, .seg, .actions, .pager { display: none !important; }
  #view { padding: 0; max-width: none; }
  .card { box-shadow: none; border: 1px solid #ddd; }
  .step { break-inside: avoid; }
}

/* 매장명 워터마크 (캡처 유출 추적용) */
#wm { position: fixed; inset: 0; z-index: 400; pointer-events: none; background-repeat: repeat; }
.lock input { letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }

/* 아이센스 블랙라벨 PC존 로고 (가로형, 투명 배경) */
.topbar .brand img { width: auto; height: 32px; border-radius: 0; }
.sidebar .logo { flex-direction: column; align-items: flex-start; gap: 8px; }
.sidebar .logo img { width: 120px; height: auto; border-radius: 0; }
.lock img { width: 150px; height: auto; border-radius: 0; }

/* 로고 톤: 블랙 히어로 + 레드 포인트 */
.hero { background: linear-gradient(135deg, #161616 0%, #2a2a2a 100%); border-bottom: 4px solid var(--teal); }
.hero::after { background: rgba(232, 48, 8, .18); }
.step .tip, .cook-body .ctip, .qsteps .tip { color: var(--teal-strong) !important; }
.notes b { color: var(--teal-strong); }
.tabbar a.on { color: var(--teal); }
.sidebar a.on { background: var(--teal-soft); color: var(--teal-strong); }
.btn.primary { background: var(--orange); border-color: var(--orange); color: #fff; }
.btn.primary:active { opacity: .85; }

/* 로그인 · 회원가입 */
.lock { overflow-y: auto; align-items: start; padding-top: max(24px, 6vh); }
.auth { text-align: left; }
.lock .auth img, .lock .auth h2 { margin-left: auto; margin-right: auto; text-align: center; display: block; }
.lock .auth > p { text-align: center; }
.auth label { display: block; font-size: 14px; font-weight: 700; margin: 0 0 10px; }
.auth label .muted { font-weight: 500; }
.auth label input:not([type=checkbox]) { display: block; width: 100%; height: 50px; margin-top: 5px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); padding: 0 14px; font-size: 16.5px; letter-spacing: 0; text-transform: none; text-align: left; }
.auth label input:focus { outline: none; border-color: var(--teal); }
.auth .agree { display: flex; gap: 8px; align-items: flex-start; font-weight: 500; font-size: 13px; color: var(--text-2); }
.auth .agree input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--teal); }
.auth .err { min-height: 20px; color: var(--danger); font-size: 14px; margin: 4px 0 8px; }
.auth .okmsg { background: var(--teal-soft); color: var(--teal-strong); padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); margin-top: 6px; }
.pwform label input:not([type=checkbox]) { height: 46px; }

/* 회원 관리 */
.adm-list { display: grid; gap: 12px; }
@media (min-width: 900px) { .adm-list { grid-template-columns: repeat(2, 1fr); } }
.adm { padding: 14px 16px; }
.adm-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.adm-h b { font-size: 16.5px; }
.ustat { font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); white-space: nowrap; }
.ustat.new { background: var(--teal-soft); color: var(--teal-strong); }
.ustat.ok { background: #e6f4ea; color: #1e7b3a; }
.adm .kv { font-size: 14px; }
.adm-b { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.btn.sm { height: 38px; padding: 0 14px; font-size: 14px; }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.lock .box.auth { text-align: left; max-width: 400px; }
.guide-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--teal-soft); color: var(--teal-strong); text-decoration: none; font-size: 14.5px; }
.guide-link span { color: var(--text-2); }
.guide-link:focus-visible, .guide-link:hover { outline: 2px solid var(--teal); }

/* 화면 전환 시 틀이 흔들리지 않게: 스크롤바 자리 고정, 짧은 화면도 높이 유지 */
html { scrollbar-gutter: stable; overflow-y: scroll; }
#view { min-height: calc(100vh - var(--topbar-h)); min-height: calc(100dvh - var(--topbar-h)); }
.tabbar a { transition: none; }

/* 레시피 상단 사진: 작게 (휴대폰 높이 약 180px, PC 280px) */
.recipe-photo { aspect-ratio: auto; height: 190px; max-width: 100%; background: #fff; }
.recipe-photo img { width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 820px) {
  .recipe-head { grid-template-columns: minmax(0, 300px) 1fr; }
  .recipe-photo { height: 260px; }
}
/* 조리 설명 글은 칸 안에서 줄바꿈 */
.step .sbody > div, .step > div { min-width: 0; flex: 1; }
.step .st, .step .tip, .qsteps li > div, .ings td { overflow-wrap: anywhere; word-break: keep-all; white-space: normal; }
.q { white-space: normal; }

/* 조리 시 주의사항: 레시피 위쪽에 눈에 띄게 */
.notes.warn { margin: 18px 0 4px; padding: 14px 16px 14px 18px; border-radius: var(--radius); background: var(--teal-soft); border: 2px solid var(--teal); color: var(--text); font-size: 15.5px; font-weight: 600; }
.notes.warn b { color: var(--teal-strong); font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.notes.warn b svg { width: 22px; height: 22px; flex: none; }
.notes.warn ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.notes.warn li::marker { color: var(--teal); }
/* 단계 안 ※ 팁 */
.step .tip { display: flex; gap: 5px; align-items: flex-start; margin-top: 6px; padding: 5px 8px; border-radius: 8px; background: var(--teal-soft); color: var(--teal-strong) !important; font-size: 14px; font-weight: 700; }
.step .tip svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }

/* PC 에서도 휴대폰처럼: 단계 사진을 원본 해상도에 맞는 크기로 (크게 늘려 흐려지지 않게) */
@media (min-width: 720px) {
  .steps.photo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .step.has-img { flex-direction: row; padding: 12px; gap: 14px; align-items: center; }
  .step.has-img .simg { width: 200px; max-width: 45%; flex: none; border-radius: 10px; overflow: hidden; }
  .step.has-img .sbody { padding: 0; flex: 1; min-width: 0; }
}
@media (min-width: 1280px) { .step.has-img .simg { width: 220px; } }
/* 조리 모드 사진도 PC 에서 과하게 커지지 않게 */
@media (min-width: 720px) { .cook-body .ci { max-width: 480px; margin: 0 auto; } }
/* 운영 매뉴얼 원본 쪽 이미지는 원본 폭(1600px) 이상으로 키우지 않음 */
.page-view .pimg img { max-width: 100%; margin: 0 auto; }

/* 앱 안 확인창 */
.dlg-back { position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,.45); display: grid; place-items: center; padding: 20px; }
.dlg { width: 100%; max-width: 360px; padding: 20px; }
.dlg p { margin: 0 0 18px; font-size: 16px; font-weight: 600; line-height: 1.55; }
.dlg-b { display: flex; gap: 8px; justify-content: flex-end; }
.dlg-b .btn { min-width: 88px; }

/* 조리영상 크게 보기 */
.vid figcaption { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.vid figcaption .vt { min-width: 0; }
.vid figcaption .btn svg { width: 17px; height: 17px; }
.vid video:fullscreen { object-fit: contain; background: #000; }
.vid.theater { position: fixed; inset: 0; z-index: 600; margin: 0; border-radius: 0; background: #000; display: flex; flex-direction: column; justify-content: center; padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }
.vid.theater video { width: 100%; height: 100%; max-height: 100%; aspect-ratio: auto; }
.vid.theater figcaption { display: none; }
.vid .theater-x { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); right: 10px; background: rgba(255,255,255,.18); color: #fff; }
.vid .theater-x svg { width: 26px; height: 26px; }

/* 발주품목 사진: 칸 안에 사진 전체가 보이게 (잘림 방지) */
.prod .pp { position: relative; display: block; }
.prod .pp img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; }
.prod .pp > svg { position: absolute; inset: 0; margin: auto; width: 36px; height: 36px; color: var(--text-3); }

/* 입력칸 글자색: 다크모드에서도 보이게, 검색칸 기본 ✕ 숨김(앱 자체 지우기 버튼만 사용) */
input, textarea, select { color: var(--text); caret-color: var(--teal); }
input::placeholder, textarea::placeholder { color: var(--text-3); opacity: 1; }
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
input[type=search]::-ms-clear { display: none; }
.search .clear[hidden] { display: none; }
.search .clear { color: var(--text-3); }

/* 앱 버전 표시 (작게) */
.ver { margin: 18px 0 4px; text-align: center; font-size: 11.5px; color: var(--text-3); letter-spacing: .01em; }

/* 본사용 매뉴얼 (앱 안에서 보기) */
.hq-frame { display: block; width: 100%; min-height: 70vh; border: 0; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }

/* 회원 관리: 요약·검색·정렬·간단히 보기 */
.adm-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.adm-sum a { background: var(--surface); border-radius: 14px; box-shadow: var(--shadow); padding: 10px 6px; text-align: center; color: var(--text); text-decoration: none; }
.adm-sum b { display: block; font-size: 22px; line-height: 1.2; }
.adm-sum span { font-size: 12px; color: var(--text-3); font-weight: 600; }
.adm-sum .new b { color: var(--teal); }
.adm-sum .off b { color: var(--text-3); }
.adm-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.adm-tools #adm-n { flex: 1; font-size: 14px; font-weight: 700; }
.adm-tools select { height: 36px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); padding: 0 8px; font: inherit; font-size: 14px; }
.adm-lines { overflow: hidden; }
.adm-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.adm-row:last-child { border-bottom: 0; }
.adm-row.on { background: var(--surface-2); }
.adm-row .nm, .adm-row .id { display: flex; flex-direction: column; min-width: 0; }
.adm-row .nm b { font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-row small { font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-row .id { text-align: right; font-weight: 800; font-size: 15px; }
.adm-lines > .adm { box-shadow: none; border-radius: 0; background: var(--surface-2); border-bottom: 1px solid var(--line); }

/* 관리자: 새 가입 요청 알림 */
.pend { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 14px; border: 2px solid var(--teal); background: var(--teal-soft); color: var(--text); text-decoration: none; }
.pend-ic { position: relative; width: 42px; height: 42px; border-radius: 12px; background: var(--teal); color: #fff; display: grid; place-items: center; flex: none; }
.pend-ic svg { width: 22px; height: 22px; }
.pend-ic i { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #161616; color: #fff; font-style: normal; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.pend-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pend-t b { font-size: 16px; }
.pend-t span { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pend-go { font-weight: 800; color: var(--teal); font-size: 14px; white-space: nowrap; }
.pend-dot { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px; background: var(--teal); color: #fff; font-style: normal; font-size: 11px; font-weight: 800; line-height: 1; vertical-align: 1px; }
.tabbar a { position: relative; }
.tabbar a .pend-dot { position: absolute; top: 6px; left: calc(50% + 6px); margin: 0; }

/* 운영 매뉴얼: 원본 페이지 이미지만 */
.page-only { max-width: 920px; margin: 0 auto; }
.page-only .pimg img { width: 100%; height: auto; display: block; }

/* 비밀번호 보기 버튼 */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 50px !important; }
.pw-eye { position: absolute; right: 3px; bottom: 3px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; color: var(--text-3); }
.pw-eye svg { width: 22px; height: 22px; }
.pw-eye:active { background: var(--surface-2); }

/* 핫도그 메뉴: 발뮤다 토스터 사용법 (원본 페이지) */
.balmuda { display: grid; gap: 12px; margin-bottom: 18px; }
@media (min-width: 1024px) { .balmuda { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.balmuda .pimg { overflow: hidden; background: #fff; }
.balmuda .pimg img { width: 100%; height: auto; display: block; }

/* 공지사항 */
.nt-alert { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 12px; text-decoration: none; color: var(--text); border: 1.5px solid var(--line); }
.nt-alert .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nt-alert .t b { font-size: 15px; }
.nt-alert .t span { font-size: 13.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-alert .go { font-weight: 800; color: var(--teal); font-size: 14px; white-space: nowrap; }
.kind { flex: none; font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
.kind.k-recipe { background: var(--teal); color: #fff; }
.kind.k-manual { background: #161616; color: #fff; }
.nt-list { display: grid; gap: 12px; }
.nt { padding: 16px; }
.nt.new { border: 2px solid var(--teal); }
.nt-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.nt-h time { font-size: 13px; color: var(--text-3); font-weight: 600; }
.nt-new { font-style: normal; font-size: 11px; font-weight: 900; color: var(--teal); letter-spacing: .04em; }
.nt h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.4; }
.nt-b { font-size: 15px; color: var(--text-2); }
.nt-b p { margin: 0 0 6px; }
.nt-b h4 { margin: 12px 0 4px; font-size: 14.5px; color: var(--text); }
.nt-b ul { margin: 0 0 6px; padding-left: 18px; }
.nt-b li { margin: 2px 0; }
.nt-form select, .nt-form textarea { display: block; width: 100%; margin-top: 5px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); padding: 10px 14px; font: inherit; font-size: 16px; }
.nt-form select { height: 50px; }
.nt-form textarea { resize: vertical; min-height: 220px; line-height: 1.55; }
.admin-tiles { margin-bottom: 4px; }

/* 발뮤다 사용 조리법 (메뉴별) */
.bal-ways { display: grid; gap: 10px; margin-bottom: 14px; }
@media (min-width: 1024px) { .bal-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bal-way { padding: 14px 16px; }
.bal-way > b { display: block; font-size: 16px; margin-bottom: 4px; }
/* 세트메뉴: 메뉴 사진 */
.set-items { display: flex; align-items: flex-start; gap: 6px; margin-top: 10px; overflow-x: auto; padding-bottom: 2px; }
.set-items .si { flex: 1 1 0; min-width: 84px; max-width: 150px; text-decoration: none; color: var(--text); display: flex; flex-direction: column; gap: 5px; }
.set-items .sp { aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; }
.set-items .sp img { width: 100%; height: 100%; object-fit: contain; }
.set-items .sp svg { width: 30px; height: 30px; color: var(--text-3); }
.set-items span { font-size: 13px; font-weight: 700; line-height: 1.3; text-align: center; word-break: keep-all; }
.set-items .si.off span { color: var(--text-3); }
.set-items .plus { flex: none; align-self: center; margin-top: -18px; font-style: normal; font-weight: 800; color: var(--teal); }

.hq-tools { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.hq-frame { min-height: 85vh; }

.nt-admin { display: flex; gap: 8px; margin-bottom: 14px; }
.nt-admin .btn.primary { flex: 1; }