/* 윤우푸드 시안 공통 스타일
   색·글꼴·간격은 :root 토큰만 바꾸면 사이트 전체에 반영된다. */

:root {
  --bg: #FBF7EF;
  --surface: #FFFFFF;
  --shell: #F4EBDC;
  --shell-2: #EADBC2;
  --yolk: #F2A413;
  --yolk-hover: #E39608;
  --yolk-deep: #B86E04;
  --yolk-soft: #FFF2D2;
  --ink: #2A2119;
  --ink-2: #5A4D41;
  --ink-3: #8A7D70;
  --line: #E7DCCB;
  --leaf: #3D6A48;
  --leaf-deep: #2C5236;
  --leaf-soft: #E6EFE4;
  --red: #B8452A;
  --footer: #221A13;

  --radius-lg: 28px;
  --radius: 18px;
  --radius-sm: 10px;
  --shadow-sm: 0 2px 8px rgba(70, 45, 10, .06);
  --shadow: 0 14px 36px rgba(70, 45, 10, .10);

  --sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --serif: 'Noto Serif KR', 'Nanum Myeongjo', 'AppleMyungjo', serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --container: 1200px;
  --header-h: 72px;

  /* 달걀 움직임 — 시간 */
  --t-xs: .2s;            /* 색·작은 전환 */
  --t-s: .35s;            /* 숫자 톡, 뱃지 */
  --t-m: .55s;            /* 계란 안착·도장 */
  --t-l: .9s;             /* 굴러 들어오기·흔들기 한 번 */
  --t-xl: 1.8s;           /* 무대 장면(해 뜨기) */
  --stagger: 40ms;        /* 계란 한 알 사이 */
  --stagger-row: 120ms;   /* 카드·줄·단계 사이 */
  --loop-idle: 8s;        /* 쉬다가 뒤뚱 */
  --loop-peck: 5.6s;      /* 닭 쪼기(닭마다 조금씩 더 길다) */
  --loop-breathe: 6s;     /* 빛무리 숨쉬기 */
  --loop-drift: 18s;      /* 구름 */
  /* 달걀 움직임 — 이징 */
  --ease-out-soft: cubic-bezier(.2, .8, .2, 1);   /* 미끄러져 들어옴(넘침 없음) — 숫자·패널·토스트 */
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);  /* 퐁·톡 (조금 넘쳤다 돌아옴) */
  --ease-drop: cubic-bezier(.3, 1.3, .6, 1);      /* 내려앉으며 통 튐 */
  --ease-fall: cubic-bezier(.55, 0, 1, .45);      /* 중력으로 떨어짐 */
  --ease-io: cubic-bezier(.65, 0, .35, 1);        /* 선 그리기·차오름 */
  --ease-sway: cubic-bezier(.45, 0, .55, 1);      /* 출렁·흔들 반복 */
}

/* ---------- 기본 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
body.no-scroll { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5 { margin: 0; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
:focus-visible { outline: 3px solid var(--yolk); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 700;
}
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 860px; }
@media (max-width: 768px) { .container { padding: 0 16px; } }

/* ---------- 글자 ---------- */
.eyebrow {
  display: inline-block; margin-bottom: 12px;
  font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--yolk-deep);
}
.title-xl { font-family: var(--serif); font-size: clamp(34px, 5.2vw, 62px); font-weight: 900; letter-spacing: -.035em; line-height: 1.18; }
.title-lg { font-family: var(--serif); font-size: clamp(28px, 3.6vw, 42px); font-weight: 700; letter-spacing: -.025em; line-height: 1.25; }
.title-md { font-size: clamp(20px, 2.2vw, 24px); font-weight: 800; }
.title-sm { font-size: 18px; font-weight: 800; }
.lead { font-size: clamp(16px, 1.6vw, 19px); color: var(--ink-2); line-height: 1.75; }
.muted { color: var(--ink-3); }
.small { font-size: 14px; }
.text-center { text-align: center; }
.serif { font-family: var(--serif); }
.hl { background: linear-gradient(transparent 62%, var(--yolk-soft) 62%); }

/* 세로 간격 */
.stack-xs > * + * { margin-top: 6px; }
.stack-sm > * + * { margin-top: 10px; }
.stack > * + * { margin-top: 16px; }
.stack-lg > * + * { margin-top: 28px; }
.mt-0 { margin-top: 0 !important; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 700; font-size: 15px; white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.btn:active { transform: translateY(1px); }
.btn .ico-svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--yolk); color: var(--ink); }
.btn-primary:hover { background: var(--yolk-hover); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #3b2f25; }
.btn-leaf { background: var(--leaf); color: #fff; }
.btn-leaf:hover { background: var(--leaf-deep); }
.btn-outline { border-color: var(--ink); background: transparent; color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-ghost { background: var(--shell); color: var(--ink); }
.btn-ghost:hover { background: var(--shell-2); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--yolk-soft); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }
.btn-lg { height: 56px; padding: 0 28px; font-size: 16px; }
.btn-block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
.link-arrow .ico-svg { width: 16px; height: 16px; transition: transform .15s; }
.link-arrow:hover .ico-svg { transform: translateX(3px); }

/* ---------- 상단 띠·머리글 ---------- */
.preview-bar { background: var(--yolk-soft); color: var(--ink-2); font-size: 13px; line-height: 1.5; text-align: center; padding: 7px 16px; border-bottom: 1px solid var(--line); word-break: keep-all; text-wrap: balance; }
.preview-bar strong { color: #8A5203; font-weight: 700; margin-right: 4px; } /* 노른자 띠 위 5.7:1(AA) */
.topbar { background: var(--ink); color: #F3E7D3; font-size: 13px; text-align: center; padding: 8px 0; word-break: keep-all; }
.topbar strong { color: var(--yolk); font-weight: 700; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topbar-util { display: flex; align-items: center; flex: none; }
.topbar-util a { display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; color: #CDBFAE; font-weight: 600; }
.topbar-util a + a { border-left: 1px solid rgba(255, 255, 255, .18); }
.topbar-util a:last-child { padding-right: 0; }
.topbar-util a:hover, .topbar-util a[aria-current="page"] { color: #fff; }
.topbar-util .ico-svg { width: 14px; height: 14px; color: var(--yolk); }
@media (max-width: 900px) {
  .topbar-inner { justify-content: center; }
  .topbar-util { display: none; }
}

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 247, 239, .92);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 28px; height: var(--header-h); }
.logo { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.logo svg { width: 30px; height: 36px; }
.logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.logo-text b { font-family: var(--serif); font-weight: 900; font-size: 21px; letter-spacing: -.03em; }
.logo-text small { font-size: 10px; font-weight: 700; letter-spacing: .18em; color: var(--ink-3); margin-top: 3px; }
.gnb { display: flex; gap: 2px; flex: 1; }
.gnb a { padding: 8px 13px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--ink-2); transition: background-color .15s, color .15s; }
.gnb a:hover { background: var(--shell); color: var(--ink); }
.gnb a[aria-current="page"] { color: var(--ink); background: var(--yolk-soft); }
.header-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px; border: 0; background: transparent;
}
.icon-btn:hover { background: var(--shell); }
.icon-btn .ico-svg { width: 23px; height: 23px; }
.cart-count {
  position: absolute; top: 3px; right: 1px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; background: var(--yolk); color: var(--ink);
  font-size: 11px; font-weight: 800; line-height: 19px; text-align: center;
}
.menu-btn { display: none; }
@media (max-width: 1080px) {
  .gnb { display: none; }
  .menu-btn { display: inline-flex; }
}

/* 모바일 메뉴 */
.drawer { position: fixed; inset: 0; z-index: 120; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(30, 20, 10, .45); }
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 88vw);
  background: var(--bg); display: flex; flex-direction: column; padding: 16px 20px 24px;
  box-shadow: -10px 0 40px rgba(0, 0, 0, .15); overflow-y: auto;
  animation: drawer-in .22s ease-out;
}
@keyframes drawer-in { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.drawer-nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 4px; border-bottom: 1px solid var(--line); font-size: 18px; font-weight: 700;
}
.drawer-nav a[aria-current="page"] { color: var(--yolk-deep); }
.drawer-nav .ico-svg { width: 18px; height: 18px; color: var(--ink-3); }
.drawer-util { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 18px; }
.drawer-util a { padding: 7px 12px; border-radius: 999px; background: var(--shell); font-size: 14px; font-weight: 700; color: var(--ink-2); }
.drawer-foot { margin-top: auto; padding-top: 24px; font-size: 14px; color: var(--ink-3); }
.drawer-foot a { display: block; font-size: 22px; font-weight: 800; color: var(--ink); margin-top: 4px; }

/* ---------- 구역 ---------- */
.section { padding: 104px 0; }
.section-sm { padding: 64px 0; }
.section-alt { background: var(--shell); }
.section-dark { background: var(--ink); color: #F3E7D3; }
.section-dark .lead, .section-dark .muted { color: #CDBFAE; }
.section-dark .eyebrow { color: var(--yolk); }
.section-head { max-width: 720px; margin-bottom: 44px; }
.section-head > * + * { margin-top: 14px; }
.section-head.center { text-align: center; margin-left: auto; margin-right: auto; }
.section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.section-head-row .section-head { margin-bottom: 0; }
@media (max-width: 768px) {
  .section { padding: 68px 0; }
  .section-sm { padding: 48px 0; }
  .section-head { margin-bottom: 32px; }
  .section-head-row { flex-direction: column; align-items: flex-start; }
}

/* 하위 페이지 머리 */
.page-hero {
  padding: 64px 0 56px;
  background: linear-gradient(180deg, var(--shell) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
}
.page-hero .lead { max-width: 680px; margin-top: 16px; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--ink-3); margin-bottom: 18px; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb li + li::before { content: '/'; margin-right: 8px; color: var(--shell-2); }
@media (max-width: 768px) { .page-hero { padding: 44px 0 40px; } }

/* 페이지 안 이동 탭(앵커) */
.subnav { position: sticky; top: var(--header-h); z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); }
.subnav ul { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a { display: block; padding: 14px 16px; font-weight: 700; font-size: 15px; color: var(--ink-3); border-bottom: 2px solid transparent; white-space: nowrap; }
.subnav a:hover, .subnav a.is-active { color: var(--ink); border-color: var(--ink); }

/* ---------- 배치 ---------- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.split-wide { grid-template-columns: 1.15fr .85fr; }
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { gap: 48px; }
}
@media (max-width: 768px) {
  .split, .split-wide { grid-template-columns: 1fr; gap: 36px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { gap: 14px; }
}

/* ---------- 카드 ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.card-soft { background: var(--shell); border-color: transparent; }
.card-yolk { background: var(--yolk-soft); border-color: transparent; }
.card h3 + p { margin-top: 8px; color: var(--ink-2); }
@media (max-width: 768px) { .card { padding: 22px; } }

.feature { display: flex; gap: 16px; align-items: flex-start; }
.feature .ico {
  flex: none; width: 52px; height: 52px; border-radius: 16px;
  background: var(--yolk-soft); color: var(--yolk-deep);
  display: grid; place-items: center;
}
.feature .ico .ico-svg { width: 26px; height: 26px; }
.feature .ico.leaf { background: var(--leaf-soft); color: var(--leaf); }
.feature h3 { font-size: 18px; font-weight: 800; }
.feature p { margin-top: 6px; color: var(--ink-2); font-size: 15px; }

/* ---------- 배지·칩 ---------- */
.badge {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  background: var(--leaf-soft); color: var(--leaf-deep);
}
.badge-yolk { background: var(--yolk-soft); color: #8A5300; }
.badge-dark { background: var(--ink); color: #fff; }
.badge-red { background: var(--red); color: #fff; }
.badge-line { background: transparent; border: 1px solid var(--line); color: var(--ink-2); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); font-weight: 700; font-size: 14px; color: var(--ink-2);
  transition: background-color .15s, color .15s, border-color .15s;
}
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip[aria-pressed="true"], .chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- 상품 카드 ---------- */
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; }
@media (max-width: 1024px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; } }
.product-card { position: relative; display: flex; flex-direction: column; }
.product-card .thumb {
  position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: var(--radius); background: var(--shell);
}
.product-card .thumb svg { width: 100%; height: 100%; transition: transform .4s ease; }
.product-card:hover .thumb svg { transform: scale(1.04); }
.product-card .flags { position: absolute; top: 12px; left: 12px; display: flex; gap: 4px; }
.product-card .body { padding-top: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-card .name { font-size: 16px; font-weight: 800; line-height: 1.4; }
.product-card .name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.product-card .summary { font-size: 14px; color: var(--ink-3); line-height: 1.5; }
.product-card .sub-note { font-size: 13px; font-weight: 700; color: var(--leaf); }
.product-card .card-actions { display: flex; gap: 8px; margin-top: 10px; }
.product-card .card-actions .btn { flex: 1; }
.rating { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ink-3); }
.rating b { color: var(--ink); }
.rating .star { color: var(--yolk); }

.price { display: flex; align-items: baseline; gap: 6px 8px; flex-wrap: wrap; }
.price .rate { color: var(--red); font-weight: 800; font-size: 17px; }
.price .now { font-size: 18px; font-weight: 800; }
.price .was { color: var(--ink-3); text-decoration: line-through; font-size: 14px; }
.price-lg .rate { font-size: 24px; }
.price-lg .now { font-size: 28px; }

/* ---------- 폼 ---------- */
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field > label, .field .label { font-size: 14px; font-weight: 700; }
.field .req { color: var(--red); margin-left: 2px; }
/* 도움말·오류 문구는 .field 밖(약관 동의 묶음 등)에서도 같은 모양 */
.hint { font-size: 13px; color: var(--ink-3); }
.error { font-size: 13px; color: var(--red); font-weight: 600; }
.input, .select, .textarea {
  width: 100%; height: 50px; padding: 0 15px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.textarea { height: auto; min-height: 130px; padding: 13px 15px; resize: vertical; line-height: 1.6; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A4D41' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 42px; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--yolk); box-shadow: 0 0 0 3px var(--yolk-soft); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--red); }
.input-row { display: flex; gap: 8px; }
.input-row .input { flex: 1; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); flex: none; }

/* 고르는 카드(라디오·체크) */
.option-list { display: grid; gap: 10px; }
.option-card {
  display: flex; align-items: center; gap: 12px; padding: 15px 16px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.option-card input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); flex: none; }
.option-card .opt-main { flex: 1; display: flex; flex-direction: column; }
.option-card .opt-main b { font-size: 15px; }
.option-card .opt-main span { font-size: 13px; color: var(--ink-3); }
.option-card .opt-side { font-weight: 800; white-space: nowrap; }
.option-card:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.option-card:has(input:disabled) { opacity: .5; cursor: not-allowed; }

/* 수량 */
.qty { display: inline-flex; align-items: center; height: 42px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.qty button { width: 40px; height: 40px; border: 0; background: transparent; font-size: 19px; line-height: 1; border-radius: 999px; }
.qty button:hover { background: var(--shell); }
.qty input { width: 42px; height: 40px; border: 0; text-align: center; font-weight: 800; background: transparent; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- 탭·아코디언·표 ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 15px 18px; border: 0; background: none; white-space: nowrap;
  font-weight: 700; font-size: 15px; color: var(--ink-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-color: var(--ink); }
.tab-panel { padding-top: 32px; }

.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; position: relative; cursor: pointer;
  padding: 22px 44px 22px 0; font-weight: 700; font-size: 17px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 26px; font-weight: 300; color: var(--ink-3);
}
.faq details[open] summary::after { content: '−'; }
.faq summary .q { color: var(--yolk-deep); font-family: var(--serif); font-weight: 900; margin-right: 10px; }
.faq .answer { padding: 0 0 24px 30px; color: var(--ink-2); }
.faq .answer > * + * { margin-top: 8px; }

.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); background: #fff; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table tr:last-child td, .table tr:last-child th { border-bottom: 0; }
.table thead th { background: var(--shell); font-weight: 800; color: var(--ink-2); white-space: nowrap; }
.table tbody th { font-weight: 700; white-space: nowrap; background: #FDFAF4; }

/* 정의 목록(상품 정보 고시 등) */
.spec { display: grid; grid-template-columns: 140px 1fr; border-top: 2px solid var(--ink); }
.spec dt, .spec dd { margin: 0; padding: 14px 12px; border-bottom: 1px solid var(--line); font-size: 15px; }
.spec dt { font-weight: 700; color: var(--ink-2); background: #FDFAF4; }
@media (max-width: 640px) { .spec { grid-template-columns: 110px 1fr; } }

/* ---------- 숫자·연혁 ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.stat .num { font-family: var(--serif); font-size: clamp(34px, 4.2vw, 52px); font-weight: 900; letter-spacing: -.03em; line-height: 1.1; white-space: nowrap; }
/* 반쪽 칸(.split) 안에서는 네 칸이 좁아 2×2로 둔다 */
.split .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
.stat .num small { font-size: .45em; margin-left: 3px; font-weight: 700; }
.stat .label { margin-top: 6px; font-size: 14px; color: var(--ink-3); }
@media (max-width: 768px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; } }

.timeline { position: relative; margin-left: 8px; padding-left: 32px; border-left: 2px solid var(--line); }
.timeline > li { position: relative; padding-bottom: 36px; }
.timeline > li:last-child { padding-bottom: 0; }
.timeline > li::before {
  content: ''; position: absolute; left: -42px; top: 7px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--yolk); border: 4px solid var(--bg); box-shadow: 0 0 0 1px var(--line);
}
.timeline .year { font-family: var(--serif); font-size: 26px; font-weight: 900; line-height: 1.2; }
.timeline .year + ul { margin-top: 8px; color: var(--ink-2); }
.timeline .year + ul li + li { margin-top: 4px; }

/* 단계 */
.steps { display: grid; grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr)); gap: 20px; counter-reset: step; }
.step { position: relative; padding: 28px 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); counter-increment: step; }
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block; font-family: var(--serif); font-size: 15px; font-weight: 900; color: var(--yolk-deep); margin-bottom: 12px;
}
.step h3 { font-size: 18px; font-weight: 800; }
.step p { margin-top: 6px; font-size: 15px; color: var(--ink-2); }
@media (max-width: 1024px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .steps { grid-template-columns: 1fr; } }

/* ---------- 목록 ---------- */
.post-list { border-top: 2px solid var(--ink); }
.post-list li a, .post-list li > div {
  display: flex; align-items: baseline; gap: 16px; padding: 18px 4px; border-bottom: 1px solid var(--line);
}
.post-list li a:hover .title { text-decoration: underline; text-underline-offset: 3px; }
.post-list .cat { flex: none; width: 56px; font-size: 13px; font-weight: 800; color: var(--yolk-deep); }
.post-list .title { flex: 1; font-weight: 600; }
.post-list .date { flex: none; font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .post-list li a, .post-list li > div { flex-wrap: wrap; gap: 4px 12px; }
  .post-list .title { flex-basis: 100%; order: 3; }
}

/* ---------- 띠 배너 ---------- */
.cta-band {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding: 56px 60px; border-radius: var(--radius-lg);
  background: var(--ink); color: #F3E7D3;
}
.cta-band .lead { color: #CDBFAE; margin-top: 10px; }
.cta-band:not(.yolk) .eyebrow { color: var(--yolk); } /* 어두운 띠 위 작은 글자 대비 */
.cta-band .actions { display: flex; gap: 10px; flex-wrap: wrap; flex: none; position: relative; z-index: 1; }
.cta-band.yolk { background: var(--yolk); color: var(--ink); }
.cta-band.yolk .lead { color: var(--ink-2); }
.cta-band.leaf { background: var(--leaf); }
@media (max-width: 768px) { .cta-band { flex-direction: column; align-items: flex-start; padding: 40px 24px; } }

/* ---------- 알림·빈 상태 ---------- */
.notice-box { display: flex; gap: 12px; padding: 16px 18px; border-radius: var(--radius-sm); background: var(--yolk-soft); color: #6B4300; font-size: 14px; }
.notice-box .ico-svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.notice-box.leaf { background: var(--leaf-soft); color: var(--leaf-deep); }
.empty { text-align: center; padding: 88px 16px; color: var(--ink-3); }
.empty .ico-svg { width: 56px; height: 56px; margin: 0 auto 16px; color: var(--shell-2); }
.empty h2, .empty h3 { color: var(--ink); font-size: 20px; margin-bottom: 8px; }
.empty .btn { margin-top: 24px; }

.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 150;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; border-radius: 999px; background: var(--ink); color: #fff;
  font-weight: 600; font-size: 15px; box-shadow: var(--shadow);
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  transition: opacity .22s, transform .34s var(--ease-out-soft); width: max-content; max-width: calc(100vw - 32px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast a { color: var(--yolk); font-weight: 800; white-space: nowrap; }

/* ---------- 바닥글 ---------- */
.site-footer { background: var(--footer); color: #CDBFAE; padding: 72px 0 40px; font-size: 14px; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.site-footer .logo-text b { color: #fff; }
.site-footer .logo-text small { color: #9F9283; }
.footer-about { margin-top: 16px; max-width: 300px; line-height: 1.7; }
.footer-col h4 { color: #fff; font-size: 15px; margin-bottom: 14px; }
.footer-col li + li { margin-top: 8px; }
.footer-col a:hover { color: #fff; }
.footer-cs .tel { display: block; font-family: var(--serif); font-size: 28px; font-weight: 900; color: #fff; margin: 4px 0 6px; }
.footer-info { padding-top: 28px; font-size: 13px; line-height: 1.9; color: #9F9283; }
.footer-info .row span:not(:last-child)::after { content: '|'; margin: 0 9px; opacity: .35; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 14px; }
.footer-legal a { color: #E6D9C6; font-weight: 600; }
.footer-legal a.strong { color: #fff; font-weight: 800; }
.proto-note { display: inline-block; margin-top: 14px; padding: 5px 10px; border: 1px dashed rgba(255, 255, 255, .25); border-radius: 6px; font-size: 12px; color: #CDBFAE; }
@media (max-width: 1024px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .footer-info .row span { display: block; }
  .footer-info .row span::after { display: none; }
}

/* ---------- 메인: 첫 화면 ---------- */
.hero { position: relative; padding: 64px 0 88px; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; right: -10%; top: -30%; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(242, 164, 19, .18), rgba(242, 164, 19, 0));
  pointer-events: none;
}
.hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.hero .lead { margin: 22px 0 34px; max-width: 540px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-facts { display: flex; gap: 36px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.hero-facts strong { display: block; font-family: var(--serif); font-size: 28px; font-weight: 900; letter-spacing: -.02em; }
.hero-facts span { font-size: 13px; color: var(--ink-3); }
.hero-art { position: relative; }
.hero-art .illust { width: 100%; max-width: 500px; margin-left: auto; }
.float-card {
  position: absolute; display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 16px; background: #fff; box-shadow: var(--shadow);
  font-size: 13px; line-height: 1.4;
}
.float-card b { display: block; font-size: 15px; }
.float-card .dot { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--leaf-soft); color: var(--leaf); flex: none; }
.float-card .dot .ico-svg { width: 18px; height: 18px; }
.float-card .code { font-family: var(--mono); font-weight: 700; letter-spacing: .08em; }
.float-card .code em { font-style: normal; color: #fff; background: var(--leaf); border-radius: 4px; padding: 0 4px; margin-left: 2px; }
.float-card.fc-1 { left: -4%; top: 16%; animation: float 6s ease-in-out infinite; }
.float-card.fc-2 { right: -2%; bottom: 12%; animation: float 6s ease-in-out -3s infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 900px) {
  .hero { padding: 40px 0 64px; }
  .hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .hero-art { order: -1; }
  .hero-art .illust { max-width: 300px; margin: 0 auto; }
  .float-card.fc-1 { left: 0; top: 10%; }
  .float-card.fc-2 { right: 0; bottom: 4%; }
  .hero-facts { gap: 20px; justify-content: space-between; margin-top: 36px; }
  .hero-facts strong { font-size: 22px; }
}
@media (max-width: 480px) {
  .float-card { padding: 9px 12px; font-size: 12px; }
  .float-card b { font-size: 13px; }
  .float-card .dot { display: none; }
}

/* 신뢰 띠 */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.trust ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.trust li { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 22px 8px; font-weight: 700; font-size: 15px; }
.trust li + li { border-left: 1px solid var(--line); }
.trust .ico-svg { width: 24px; height: 24px; color: var(--leaf); flex: none; }
@media (max-width: 900px) {
  .trust ul { display: flex; overflow-x: auto; scrollbar-width: none; }
  .trust ul::-webkit-scrollbar { display: none; }
  .trust li { flex: none; padding: 18px 20px; font-size: 14px; }
}

/* 그림 틀 */
.illust-frame { border-radius: var(--radius-lg); overflow: hidden; background: var(--shell); }
.illust-frame svg { width: 100%; height: auto; }

/* ---------- 난각번호 읽기 ---------- */
.shell-decoder { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.shell-egg { position: relative; max-width: 360px; margin: 0 auto; }
.shell-egg svg { width: 100%; }
.shell-form { display: flex; gap: 8px; margin-top: 24px; }
.shell-form .input { font-family: var(--mono); font-size: 20px; letter-spacing: .14em; text-transform: uppercase; height: 56px; }
.shell-form .btn { height: 56px; }
.shell-samples { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--ink-3); }
.shell-samples button { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 10px; font-family: var(--mono); font-size: 13px; }
.shell-samples button:hover { border-color: var(--ink-3); }
.decoded { display: grid; grid-template-columns: 1fr 1.1fr .9fr; gap: 12px; margin-top: 24px; }
.decoded .part { padding: 18px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.decoded .part .k { font-size: 13px; color: var(--ink-3); font-weight: 700; }
.decoded .part .v { font-family: var(--mono); font-size: 22px; font-weight: 800; letter-spacing: .06em; margin-top: 4px; }
.decoded .part .d { font-size: 14px; color: var(--ink-2); margin-top: 6px; line-height: 1.5; }
.decoded .part.env { background: var(--leaf-soft); border-color: transparent; }
.decoded .part.env .v { color: var(--leaf-deep); }
.decode-msg { margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--red); min-height: 1.4em; }
@media (max-width: 900px) {
  .shell-decoder { grid-template-columns: 1fr; gap: 32px; }
  .shell-egg { max-width: 260px; }
}
@media (max-width: 560px) {
  .decoded { grid-template-columns: 1fr; }
  .shell-form { flex-direction: column; }
}

/* ---------- 오늘의 출고 ([data-ship-card], common.js HG.shipCard) ---------- */
.ship-card {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.4fr) auto; gap: 28px 32px; align-items: center;
  padding: 26px 30px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.ship-date { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--leaf-deep); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); animation: live 2s ease-out infinite; flex: none; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(61, 106, 72, .45); } 70%, 100% { box-shadow: 0 0 0 8px rgba(61, 106, 72, 0); } }
.ship-head { margin-top: 6px; font-family: var(--serif); font-size: clamp(20px, 2vw, 24px); font-weight: 900; letter-spacing: -.02em; line-height: 1.35; }
.ship-head em { font-style: normal; background: linear-gradient(transparent 58%, var(--yolk-soft) 58%); }
.ship-sub { margin-top: 4px; font-size: 14px; color: var(--ink-2); }
.ship-sub b { color: var(--ink); font-weight: 800; }
.ship-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ship-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; font-size: 13px; }
.ship-steps li + li::before { content: ''; position: absolute; top: 13px; right: 50%; width: 100%; height: 2px; background: var(--line); }
.ship-steps li.is-done::before, .ship-steps li.is-next::before { background: var(--leaf); }
.ship-steps .dot {
  position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 6px;
  border-radius: 50%; border: 2px solid var(--line); background: var(--surface); color: #fff;
}
.ship-steps .dot .ico-svg { width: 15px; height: 15px; }
.ship-steps .is-done .dot { background: var(--leaf); border-color: var(--leaf); }
.ship-steps .is-next .dot { border-color: var(--yolk); background: var(--yolk-soft); box-shadow: 0 0 0 4px rgba(242, 164, 19, .16); }
.ship-steps b { font-weight: 800; }
.ship-steps .t { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.ship-steps .is-off b { color: var(--ink-3); }
.ship-steps .is-off .t { font-family: var(--sans); }
.ship-egg { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border-radius: var(--radius); background: var(--shell); }
.ship-egg .k, .ship-egg .d { font-size: 12px; color: var(--ink-3); }
.ship-egg .k { font-weight: 700; }
.ship-egg .code { font-family: var(--mono); font-size: 19px; font-weight: 800; letter-spacing: .06em; white-space: nowrap; }
@media (max-width: 1080px) {
  .ship-card { grid-template-columns: minmax(0, 1fr) auto; }
  .ship-steps { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 640px) {
  .ship-card { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 22px 18px; }
  .ship-steps { grid-row: auto; }
  .ship-steps li { font-size: 12px; }
  .ship-egg { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
  .ship-egg .k { flex-basis: 100%; }
  .ship-egg .code { font-size: 17px; }
}

/* ---------- 레시피 카드 ---------- */
.recipe-card { display: flex; flex-direction: column; }
.recipe-card .thumb { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; }
.recipe-card .thumb svg { width: 100%; height: 100%; transition: transform .4s ease; }
.recipe-card:hover .thumb svg { transform: scale(1.04); }
.recipe-card .meta { display: flex; gap: 12px; margin-top: 14px; font-size: 13px; color: var(--ink-3); }
.recipe-card .meta span { display: inline-flex; align-items: center; gap: 4px; }
.recipe-card .meta .ico-svg { width: 14px; height: 14px; }
.recipe-card h3 { margin-top: 6px; font-size: 18px; font-weight: 800; }
.recipe-card p { margin-top: 6px; font-size: 14px; color: var(--ink-2); }

/* ---------- 달걀 움직임 ----------
   세 층: 무대(한 번, 크게) · 배경 반복(작고 느리게, 대부분 '쉬다가 잠깐') · 반응(건드린 곳에서 0.9초 이하).
   - 기본 스타일이 곧 완성 그림이다. 들어올 때 효과는 keyframes에 from(과 중간값)만 적고 to를 비운 채 backwards로 건다.
     반복 효과는 0%·100%를 원래 그림과 같은 '쉬는 자세'로 둔다. 그래서 움직임을 줄이면 모두 완성 그림에서 멈춘다.
   - 재생 신호는 data-motion 하나다. common.js가 처음 충분히 보이면 .is-in(+ hg:in 이벤트), 보이는 동안 .is-on을 붙이고
     .is-on이 아닌 [data-motion] 안의 애니메이션은 아래 규칙이 멈춰 둔다(들어올 때 효과는 첫 장면에서 기다린다).
   - SVG 함정 (가) transform 속성이 있는 요소에는 CSS transform을 걸지 않는다 — g를 한 겹 더 두고 그 g에 건다
     (나) SVG 안에서 rotate·scale을 쓰면 transform-box: fill-box와 transform-origin을 함께 준다(translate만이면 필요 없다)
     (다) 같은 요소에 들어올 때 효과와 hover·상태 효과를 함께 걸지 않는다 — 안팎 g로 나누거나 HG.play(WAAPI)를 쓴다.
     SVG 안에서는 개별 속성 translate 대신 transform을 쓰는 slide-in-t를 쓴다.
   - transform·opacity·개별 translate/scale만 움직인다. 예외는 짧은 1회 재생 셋: 선 그리기(line-draw, pathLength="1" 필수),
     글자색 반짝임(seg-flash), 잉크 인쇄(ink-print, clip-path).
   - 상한: 작은 계란 회전 8° 이하, 지름 200px 넘는 그림 2° 이하, 이동 6px 이하(구름 22px 예외), 반복 확대 1.06배·1회 1.15배 이하,
     반복 주기 2.4초 이상(처리 중 표시만 예외). 정보 글자는 반복하지 않는다. hover 효과는 @media (hover: hover) 안에만 둔다.
   - 범위 선택자는 :where()로 써서 명시도를 낮게 둔다. 페이지는 같은 대상을 한 단계 구체적으로 써서 덮는다. */

/* 한 글자 변수 --fx·--fy는 그 요소에만 쓴다(부모에서 물려받아 안쪽 그림이 엉뚱한 방향에서 들어오지 않게) */
@property --fx { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --fy { syntax: '<length>'; inherits: false; initial-value: 10px; }

/* 보이지 않는 [data-motion] 안은 모두 멈춘다(가상 요소 포함). 움직임을 줄였으면 멈추지 않고 아래 안전장치가 끝 장면으로 보낸다.
   html.js(common.js 첫 줄, 첫 그리기 전에 붙음)에 묶는다 — JS가 꺼졌거나 common.js를 못 읽으면 .is-on을 붙일 쪽이 없으므로
   멈추지 않고 그대로 재생해 완성 그림으로 끝난다(들어올 때 투명인 글자가 첫 장면에 갇혀 안 보이지 않게) */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.no-motion) [data-motion]:not(.is-on),
  html.js:not(.no-motion) [data-motion]:not(.is-on)::before,
  html.js:not(.no-motion) [data-motion]:not(.is-on)::after,
  html.js:not(.no-motion) [data-motion]:not(.is-on) *,
  html.js:not(.no-motion) [data-motion]:not(.is-on) *::before,
  html.js:not(.no-motion) [data-motion]:not(.is-on) *::after { animation-play-state: paused !important; }
}
/* 움직이는 요소가 잠깐 오른쪽으로 넘쳐도 가로 스크롤이 생기지 않게(clip은 sticky를 깨지 않는다) */
main { overflow-x: clip; }

/* keyframes 라이브러리 — 들어올 때 효과(from만) */
@keyframes egg-drop { 0% { transform: translateY(calc(var(--fall, 14px) * -1)); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, 1, .45); } 20% { opacity: 1; } 55% { transform: scale(1.04, .94); animation-timing-function: ease-out; } 78% { transform: translateY(-1px) scale(.99, 1.02); } }
/* 껍데기 계란은 찌그러지지 않고 살포시 놓인 뒤 ±2°로 한 번 자리를 잡는다 */
@keyframes egg-settle { 0% { transform: translateY(calc(var(--fall, 14px) * -1)) rotate(0deg); opacity: 0; animation-timing-function: cubic-bezier(.3, .6, .4, 1); } 30% { opacity: 1; } 60% { transform: translateY(0) rotate(-2deg); animation-timing-function: ease-in-out; } 82% { transform: translateY(0) rotate(1deg); } }
@keyframes egg-pop { 0% { transform: scale(var(--pop-from, 0)); opacity: 0; animation-timing-function: cubic-bezier(.2, .7, .3, 1); } 60% { transform: scale(1.05); opacity: 1; animation-timing-function: ease-in-out; } }
@keyframes egg-roll-in { 0% { transform: translateX(var(--roll-x, 46px)) rotate(var(--roll-r, 125deg)); opacity: 0; } 25% { opacity: 1; } 70% { transform: translateX(-3px) rotate(-8deg); } 86% { transform: translateX(1px) rotate(3deg); } }
@keyframes white-spread { 0% { transform: scale(.55); opacity: 0; } 70% { transform: scale(1.04); opacity: 1; } }
@keyframes puff-up { 0% { transform: scale(.86); } 55% { transform: scale(1.06); } 75% { transform: scale(.98); } }
@keyframes sun-rise { from { transform: translateY(var(--rise, 120px)); } }
/* 그림자는 투명에서 커지며 나타난다(지연 동안 계란보다 회색 얼룩이 먼저 보이지 않게). opacity 속성(.1·.14)이 그대로 끝값이 된다 */
@keyframes shadow-in { from { transform: scale(var(--shadow-from, .5)); opacity: 0; } }
@keyframes line-draw { from { stroke-dasharray: 1 2; stroke-dashoffset: 1.001; } to { stroke-dasharray: 1 2; stroke-dashoffset: 0; } }
/* 도장: 빠르게 내려와 한 번만 멈춘다(출렁임 없음). 인증·대표·사육환경 도장에만 쓴다 */
@keyframes stamp-thunk { 0% { transform: scale(var(--stamp-s, 1.3)) rotate(var(--stamp-r, -12deg)); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, .85, .35); } 30% { opacity: 1; } 72% { transform: scale(.97) rotate(0deg); animation-timing-function: ease-out; } }
/* 잉크 인쇄: 난각번호처럼 찍히는 글자는 왼쪽부터 인쇄된다(도장 대신) */
@keyframes ink-print { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes slide-in { from { translate: var(--fx, 0px) var(--fy, 10px); opacity: 0; } }
@keyframes slide-in-t { from { transform: translate(var(--fx, 0px), var(--fy, 10px)); opacity: 0; } }
/* 투명 없이 미끄러져 자리 잡기(개별 속성 translate) — 정보 글자가 든 칸처럼 들어오기 전에도 보여야 하는 것 */
@keyframes lift-in { from { translate: var(--fx, 0px) var(--fy, 10px); } }
@keyframes swing-in { 0% { transform: translateY(-6px) rotate(var(--sw, -22deg)); opacity: 0; } 45% { transform: rotate(7deg); opacity: 1; } 72% { transform: rotate(-3deg); } }
@keyframes turn-in { from { transform: rotate(var(--turn, 40deg)); } }
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes grow-y { from { transform: scaleY(0); } }
@keyframes fade-from { from { opacity: var(--o0, 1); } }
/* 한 번 반응(끝나면 원래 모습) */
@keyframes egg-wobble { 25% { transform: rotate(calc(var(--amp, 1) * -8deg)); } 50% { transform: rotate(calc(var(--amp, 1) * 6deg)); } 75% { transform: rotate(calc(var(--amp, 1) * -3deg)); } }
@keyframes egg-hop { 0%, 100% { transform: none; } 35% { transform: translateY(calc(var(--hop, 5px) * -1)) scale(.98, 1.02); } 62% { transform: scale(1.03, .97); } 80% { transform: scale(.99, 1.01); } }
@keyframes egg-hop-again { 0%, 100% { transform: none; } 35% { transform: translateY(calc(var(--hop, 5px) * -1)) scale(.98, 1.02); } 62% { transform: scale(1.03, .97); } 80% { transform: scale(.99, 1.01); } }
@keyframes egg-nope { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(1px); } }
@keyframes egg-shake { 20%, 60% { transform: rotate(calc(var(--amp, 1) * -7deg)); } 40%, 80% { transform: rotate(calc(var(--amp, 1) * 7deg)); } }
@keyframes yolk-jiggle { 30% { transform: scale(1.1, .9); } 55% { transform: scale(.95, 1.06); } 80% { transform: scale(1.03, .98); } }
@keyframes hen-hop { 40% { transform: translateY(calc(var(--hop, 6px) * -1)); } }
@keyframes num-pop { 40% { scale: var(--num, 1.08); } 75% { scale: .97; } }
@keyframes seg-flash { 40% { fill: #B86E04; } }
@keyframes egg-burst { from { transform: rotate(var(--a, 0deg)) translateY(0) scale(.3); opacity: 1; } to { transform: rotate(var(--a, 0deg)) translateY(calc(var(--burst, 46px) * -1)) scale(1); opacity: 0; } }
@keyframes ink-ring { from { transform: none; opacity: var(--o, .5); } to { transform: scale(var(--ring, 1.3)); opacity: 0; } }
@keyframes dust-puff { 0% { transform: scale(.2); opacity: .8; } 100% { transform: translate(calc(var(--x, 0) * 10px), -8px) scale(1.3); opacity: 0; } }
@keyframes crack-flash { 0% { opacity: 1; stroke-dasharray: 1 2; stroke-dashoffset: 1.001; } 20%, 75% { opacity: 1; stroke-dasharray: 1 2; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dasharray: 1 2; stroke-dashoffset: 0; } }
/* 반복(0%·100% = 쉬는 자세). rock·sway는 한 번에 왼쪽·오른쪽을 모두 오간다(alternate 없이도 이어진다) */
@keyframes egg-idle { 0%, 82%, 100% { transform: none; } 86% { transform: rotate(calc(var(--amp, 1) * -7deg)); } 90% { transform: rotate(calc(var(--amp, 1) * 6deg)); } 94% { transform: rotate(calc(var(--amp, 1) * -3deg)); } }
@keyframes egg-hop-idle { 0%, 84%, 100% { transform: none; } 88% { transform: translateY(calc(var(--hop, 5px) * -1)) rotate(calc(var(--amp, 0) * -6deg)) scale(.98, 1.02); } 92% { transform: scale(1.03, .97); } 96% { transform: rotate(calc(var(--amp, 0) * 3deg)); } }
@keyframes rock { 0%, 100% { transform: none; animation-timing-function: ease-out; } 25% { transform: rotate(calc(var(--amp, 1) * -4deg)); animation-timing-function: ease-in-out; } 75% { transform: rotate(calc(var(--amp, 1) * 4deg)); animation-timing-function: ease-in; } }
@keyframes sway { 0%, 100% { transform: none; animation-timing-function: ease-out; } 25% { transform: translateY(calc(var(--lift, 2px) * -1)) rotate(calc(var(--amp, 1) * -7deg)); animation-timing-function: ease-in-out; } 75% { transform: translateY(calc(var(--lift, 2px) * -1)) rotate(calc(var(--amp, 1) * 7deg)); animation-timing-function: ease-in; } }
@keyframes yolk-idle { 0%, 40%, 100% { transform: none; } 9% { transform: scale(1.06, .94); } 18% { transform: scale(.97, 1.03); } 27% { transform: scale(1.02, .99); } }
/* 김: 흐린 안개가 테두리 위에서 커지며 바깥(--sx)·위로 번지고 사라진다. 가장 진할 때도 opacity .35 */
@keyframes steam-rise { 0% { transform: translateY(4px) scale(.55); opacity: 0; } 40% { opacity: .35; } 100% { transform: translate(var(--sx, 0px), -14px) scale(1.4, 1.25); opacity: 0; } }
@keyframes simmer { 0%, 55%, 100% { transform: none; } 72% { transform: scale(1.2); } 84% { transform: scale(.88); } }
@keyframes hen-peck { 0%, 62%, 100% { transform: none; } 66%, 74% { transform: rotate(28deg); } 70% { transform: rotate(6deg); } 79% { transform: none; } }
@keyframes cloud-drift { to { transform: translateX(var(--drift, 22px)); } }
/* 새: 쉬다가(앞 74%) 날개를 두 번 접었다 펴며 오른쪽 위로 살짝 떠오른 뒤 미끄러지듯 제자리로(이동 6px 이하) */
@keyframes bird-glide {
  0%, 74%, 100% { transform: none; }
  76% { transform: translate(1px, -2px) scaleY(.5); }
  78.5% { transform: translate(2px, -3.5px) scaleY(1); }
  81% { transform: translate(3px, -5px) scaleY(.5); }
  83.5% { transform: translate(4px, -6px) scaleY(1); }
}
@keyframes breathe { to { transform: scale(var(--breathe, 1.06)); } }
@keyframes glow-pulse { from { opacity: var(--o-lo, .15); } to { opacity: var(--o-hi, .8); } }
@keyframes ring-ping { 0% { transform: scale(.9); opacity: .6; } 70%, 100% { transform: scale(var(--ping, 1.6)); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes dash-flow { to { stroke-dashoffset: -14; } }
@keyframes sweep { 0% { transform: translateX(0); opacity: 1; } 14% { transform: translateX(var(--sweep, 700px)); opacity: 1; } 15%, 100% { transform: translateX(var(--sweep, 700px)); opacity: 0; } }
@keyframes twinkle { 0%, 100% { transform: none; } 50% { transform: scale(.6) rotate(45deg); opacity: .4; } }
@keyframes blink { 0%, 94%, 100% { transform: none; } 96% { transform: scaleY(.15); } }
@keyframes nudge { 50% { transform: translate(var(--nx, 4px), var(--ny, 0px)); } }
@keyframes shadow-hop { 0%, 84%, 100% { transform: none; } 88% { transform: scale(.82); } 92% { transform: scale(1.04); } }

/* 숫자 세기(HG.countUp): 세는 동안은 countUp이 자리 폭을 최종값 폭으로 잡고(단위가 움찔하지 않게), 세기 전에는 숨겨 둔다(최종값 → 0 깜박임 방지).
   페이지에서 min-width를 따로 줄 필요는 없다. 준다면 ch는 글꼴에 따라 tabular 숫자보다 넓으니(Noto Serif KR 30px: ch 18.4px, 숫자 15.6px) 실제 폭을 재서 em으로 */
[data-count] { display: inline-block; font-variant-numeric: tabular-nums; text-align: right; }
html.can-motion [data-motion]:not(.is-in) [data-count]:not([data-counted]),
html.can-motion [data-motion][data-count]:not(.is-in):not([data-counted]) { opacity: 0; }
/* 값이 바뀐 숫자가 톡(HG.popIfChanged · HG.kick(el, 'is-pop')) */
.is-pop { animation: num-pop var(--t-s) var(--ease-out-soft); }
:where(b, strong, em, span, small).is-pop { display: inline-block; }
/* data-reveal 블록 안에 자기 무대가 있으면 data-stage를 달아 위로 떠오르는 효과를 끈다(두 번 들어오지 않게) */
.js [data-reveal][data-stage] { transform: none; }

/* 상품 그림(.pa, HG.productArt) — 큰 그림은 알마다, 메인 인기 상품은 줄마다 내려앉는다 */
:where(.pa) :is(.pa-egg, .pa-egg-in, .pa-egg-sh, .pa-row, .pa-stamp, .pa-stamp-ring, .pa-tag, .pa-lid, .pa-bow) { transform-box: fill-box; }
:where(.pa) :is(.pa-egg, .pa-row) { transform-origin: 50% 100%; }
:where(.pa) .pa-egg-in { transform-origin: 50% 92%; }
:where(.pa) :is(.pa-egg-sh, .pa-stamp, .pa-stamp-ring) { transform-origin: 50% 50%; }
:where(.pa) .pa-tag { transform-origin: 8% 50%; }
:where(.pa) .pa-lid { transform-origin: 0% 100%; transition: transform .45s var(--ease-out-soft); }
:where(.pa) .pa-bow { transform-origin: 50% 80%; }
:where(.trial-art, .promo-art, .pd-art, .biz-thumb) .pa-egg { animation: egg-settle var(--t-m) var(--ease-out-soft) calc(var(--k, 0) * 38ms + .1s) backwards; --fall: 16px; }
:where(.trial-art, .promo-art, .pd-art, .biz-thumb) .pa-egg-sh { animation: shadow-in var(--t-m) ease-out calc(var(--k, 0) * 38ms + .1s) backwards; }
:where(.trial-art, .promo-art, .pd-art, .biz-thumb) .pa-stamp { animation: stamp-thunk .46s linear .9s backwards; }
:where(.trial-art, .promo-art, .pd-art, .biz-thumb) .pa-tag { animation: swing-in .8s var(--ease-drop) .35s backwards; }
:where(.trial-art, .promo-art, .pd-art, .biz-thumb) .pa-label { animation: slide-in-t .5s var(--ease-out-soft) .95s backwards; --fy: 12px; }
:where(.trial-art, .promo-art, .pd-art, .biz-thumb) .pa-crate-back { animation: slide-in-t .5s var(--ease-out-soft) backwards; --fx: 16px; --fy: -8px; }
:where(.trial-art, .promo-art, .pd-art, .biz-thumb) .pa-bow { animation: egg-pop .5s var(--ease-spring) .3s backwards; }
/* 상품 목록 카드는 카드마다 1회 요소 둘(도장·꼬리표)만. 다시 그릴 때 연달아 찍히지 않게 하려면 목록에 .is-settled를 붙인다 */
:where(.product-grid:not(.is-settled)) .pa-stamp { animation: stamp-thunk .46s linear calc(var(--card, 0) * var(--stagger-row) + .45s) backwards; }
:where(.product-grid:not(.is-settled)) .pa-tag { animation: swing-in .7s var(--ease-drop) calc(var(--card, 0) * var(--stagger-row) + .25s) backwards; }
:where(#best-products) .pa-row { animation: egg-settle .6s var(--ease-out-soft) calc(var(--card, 0) * var(--stagger-row) + var(--r, 0) * 90ms + .1s) backwards; --fall: 12px; }
/* 반응: 마우스를 올린 카드 한 장에서만 계란 물결. 키보드 포커스(:focus-visible)도 같고, 계란이 날지 못한 담기(.is-added)는 이름이 다른 keyframes로 다시 재생.
   :focus-within은 쓰지 않는다 — 폰에서 '담기'를 누르면 단추에 포커스가 가서 날아가는 계란과 물결이 겹친다 */
@media (hover: hover) {
  :where(.product-card, .trial-band, .promo, .pair-card, .biz-card):hover .pa-egg-in { animation: egg-hop .5s var(--ease-out-soft) calc(var(--k, 0) * var(--stagger)) both; }
  :where(.product-card):hover .pa-stamp-ring { animation: spin 6s linear infinite; }
  :where(.product-card, .promo):hover .pa-lid { transform: translateY(-12px) rotate(-4deg); }
}
:where(.product-card, .trial-band, .pair-card):has(:focus-visible) .pa-egg-in { animation: egg-hop .5s var(--ease-out-soft) calc(var(--k, 0) * var(--stagger)) both; }
:where(.is-added) .pa-egg-in { animation: egg-hop-again .5s var(--ease-out-soft) calc(var(--k, 0) * var(--stagger)) both; }

/* 레시피 그림(.ra, HG.recipeArt) — 흰자가 퍼지고 노른자가 톡. 김·거품·출렁임 반복은 큰 그림(.plate-stack·.recipe-visual)에서만 */
:where(.ra) :is(.ra-yolk, .ra-yolk-in, .ra-white, .ra-bubble, .ra-custard, .ra-slice, .ra-steam) { transform-box: fill-box; }
:where(.ra) :is(.ra-yolk, .ra-slice) { transform-origin: 50% 100%; }
:where(.ra) .ra-yolk-in { transform-origin: 50% 60%; }
:where(.ra) :is(.ra-white, .ra-bubble, .ra-custard, .ra-steam) { transform-origin: 50% 50%; }
:where(.ra) .ra-steam { opacity: 0; }
:where(.recipe-card, .plate-stack, .recipe-visual) .ra-white { animation: white-spread .5s cubic-bezier(.2, .9, .3, 1.2) calc(var(--y, 0) * .12s) backwards; }
:where(.recipe-card, .plate-stack, .recipe-visual) .ra-yolk { animation: egg-drop .55s var(--ease-drop) calc(var(--y, 0) * .12s + .22s) backwards; --fall: 26px; }
:where(.recipe-card, .plate-stack, .recipe-visual) :where(.ra[data-art="boiled"]) .ra-yolk { animation: none; }
:where(.recipe-card, .plate-stack, .recipe-visual) :where(.ra[data-art="bowl"]) .ra-yolk { animation-delay: 1s; }
:where(.recipe-card, .plate-stack, .recipe-visual) .ra-half { animation: slide-in-t .7s var(--ease-out-soft) .15s backwards; --fx: calc(var(--d, 1) * -14px); --fy: 4px; }
:where(.recipe-card, .plate-stack, .recipe-visual) .ra-slice { animation: egg-drop .6s var(--ease-drop) calc(.15s + var(--s, 0) * .11s) backwards; --fall: 24px; }
:where(.recipe-card, .plate-stack, .recipe-visual) .ra-sando { animation: slide-in-t .7s var(--ease-out-soft) .15s backwards; --fx: calc(var(--d, 1) * -18px); --fy: 0px; }
:where(.recipe-card, .plate-stack, .recipe-visual) .ra-custard { animation: puff-up 1.1s cubic-bezier(.3, .7, .4, 1) .15s backwards; }
:where(.recipe-card, .plate-stack, .recipe-visual) .ra-soy { animation: line-draw 1s ease-out .2s backwards; }
:where(.recipe-card, .plate-stack, .recipe-visual) .ra-herbs { animation: slide-in-t .5s ease-out .55s backwards; --fy: 6px; }
:where(.plate-stack, .recipe-visual) .ra-yolk-in { animation: yolk-idle 4s var(--ease-sway) calc(1.2s + var(--y, 0) * .25s) infinite; }
:where(.plate-stack, .recipe-visual) .ra-bubble { animation: simmer 2.6s ease-in-out calc(var(--b, 0) * -.9s) infinite; }
/* 김은 요리가 다 놓인 뒤(흰자·노른자 .9초, 찜 부풀기 1.25초)부터 한 덩이씩 피어오른다 */
:where(.plate-stack, .recipe-visual) .ra-steam { animation: steam-rise 3.2s ease-out calc(1.2s + var(--s, 0) * 1.07s) infinite; }
:where(.plate-stack, .recipe-visual) .ra-custard { animation: puff-up 1.1s cubic-bezier(.3, .7, .4, 1) .15s backwards, breathe 4.5s ease-in-out 1.3s infinite alternate; --breathe: 1.025; }
@media (hover: hover) {
  :where(.recipe-card):hover .ra-yolk-in { animation: yolk-jiggle .6s var(--ease-out-soft) calc(var(--y, 0) * 80ms); }
  :where(.recipe-card):hover .ra-steam { animation: steam-rise 3.2s ease-out calc(var(--s, 0) * -1.07s) infinite; }
  :where(.recipe-card):hover .ra-bubble { animation: simmer 2.6s ease-in-out calc(var(--b, 0) * -.9s) infinite; }
}
:where(.recipe-card):has(:focus-visible) .ra-yolk-in { animation: yolk-jiggle .6s var(--ease-out-soft) calc(var(--y, 0) * 80ms); }

/* 풍경 부품(닭·구름·새·해 빛무리) — 첫 화면 달걀 창(.se)·농장 풍경(.fs)·회사소개 농장 카드 공용.
   닭마다 쪼는 주기를 조금씩 다르게 해(5.6·6.5·7.4s…) 메트로놈처럼 들리지 않게 한다.
   그림 하나에 계속 움직이는 것은 둘 이하: 하늘마다 첫 구름 하나만 흐르고(뒤 구름은 멈춤) 해 빛무리가 숨쉰다(.se는 둘 다 끔 — 아래).
   새는 '쉬다가 잠깐' — 앞 새(.bird) 한 마리가 20초마다 한 번 날갯짓하며 떠올랐다 내려앉는다(뒤 새는 그대로). 첫 날갯짓은 15.5초쯤:
   달걀 창(.se)의 알 낳기(같은 20초 박자, 5.4~14초)가 끝난 뒤라 두 사건이 겹치지 않는다 */
.hen, .hen-head, .sun-glow, .bird { transform-box: fill-box; }
.hen { transform-origin: 50% 100%; }
.hen-head { transform-origin: 12% 80%; animation: hen-peck calc(var(--loop-peck) + var(--h, 0) * .9s) ease-in-out calc(var(--h, 0) * -1.7s) infinite; }
.hen-rest .hen-head { animation: none; }
.cloud { animation: cloud-drift calc(var(--loop-drift) + var(--c, 0) * 6s) ease-in-out infinite alternate; }
.cloud ~ .cloud { animation: none; }
.bird { transform-origin: 50% 50%; animation: bird-glide 20s ease-in-out .7s infinite; }
.sun-glow { transform-origin: 50% 50%; animation: breathe 8s ease-in-out 2s infinite alternate; --breathe: 1.05; }

/* 첫 화면 달걀 창(.se, HG.illust.sunriseEgg) — 무대: 새벽 어스름이 걷히며 해가 뜨고 테두리가 그려진다.
   그림 위에 떠 있는 카드 두 장(.fc-1·.fc-2)이 계속 둥실거리므로 그림 안에는 계속 움직이는 것을 두지 않는다(빛무리 숨쉬기·구름 흐름 끔).
   반복은 모두 쉬다가 잠깐 — 닭 두 마리 쪼기·20초마다 알 낳기(첫 알은 6초쯤)·새 날갯짓(알 낳기 사이). 빛 띠는 해가 다 뜬 뒤 한 번만 지나간다 */
.se :is(.sun-glow, .cloud) { animation: none; }
.se .se-outline { animation: line-draw 1.4s var(--ease-io) backwards; }
.se .se-sun { animation: sun-rise var(--t-xl) cubic-bezier(.16, .84, .3, 1) .3s backwards; --rise: 120px; }
/* 어스름은 푸른 새벽빛(위)·복숭앗빛(지평선)·푸른 그늘(땅) 그라데이션 — 진하기는 그라데이션이 정하고, 시작하자마자 1.2초 동안 걷힌다.
   시작 전(나타나기를 기다리는 첫 장면)에도 이 어스름이 보이므로 연하게 둔다(진하면 첫 인상이 흐리고 탁한 보라색 덩어리) */
.se .se-dawn { animation: fade-from 1.2s ease-out backwards; --o0: 1; }
.se .se-glint { animation: sweep 9s ease-in-out 2.4s 1; --sweep: 700px; }
/* 층 깊이: HG.followPointer가 svg에 --mx·--my를 준다. 움직임을 줄이면(바닥글 단추 포함) 층을 옮기지 않는다 */
html.can-motion .se :is(.se-l1, .se-l2, .se-l3) { transition: transform .6s var(--ease-out-soft); }
html.can-motion .se .se-l1 { transform: translate(calc(var(--mx, 0) * -2px), calc(var(--my, 0) * -1px)); }
html.can-motion .se .se-l2 { transform: translate(calc(var(--mx, 0) * -5px), calc(var(--my, 0) * -2.5px)); }
html.can-motion .se .se-l3 { transform: translate(calc(var(--mx, 0) * -10px), calc(var(--my, 0) * -5px)); }
/* 알 낳기: 닭이 들썩 → 알이 퐁 → 왼쪽 빈 풀밭으로 데굴데굴 굴러가 멈춤 → 스르르 사라짐(네 요소가 같은 20초 박자) */
.se :is(.laid-pop, .laid-spin) { transform-box: fill-box; }
.se .hen-lay { animation: se-lay-hen 20s -5.2s infinite; }
.se .laid-pop { transform-origin: 50% 100%; opacity: 0; animation: se-lay 20s -5.2s infinite; }
.se .laid-roll { animation: se-roll 20s -5.2s infinite; }
.se .laid-spin { transform-origin: 50% 50%; animation: se-spin 20s -5.2s infinite; }
@keyframes se-lay-hen { 0%, 53%, 59%, 100% { transform: none; } 56% { transform: translateY(-6px); } }
@keyframes se-lay { 0%, 56% { transform: scale(0); opacity: 0; } 59% { transform: scale(1.1, .92); opacity: 1; } 62% { transform: none; } 90% { opacity: 1; } 96%, 100% { transform: none; opacity: 0; } }
@keyframes se-roll { 0%, 62% { transform: none; animation-timing-function: cubic-bezier(.2, .7, .3, 1); } 80%, 100% { transform: translateX(-32px); } }
@keyframes se-spin { 0%, 62% { transform: none; animation-timing-function: cubic-bezier(.2, .7, .3, 1); } 80% { transform: rotate(-210deg); } 84% { transform: rotate(-222deg); } 87% { transform: rotate(-204deg); } 90%, 100% { transform: rotate(-210deg); } }

/* 농장 풍경(.fs, HG.illust.farmScene) — 둥지 알이 퐁 생겼다가 가끔 뒤뚱, 넷째 닭이 들썩하며 갓 낳은 알이 생긴다 */
.fs :is(.fs-egg, .fs-nest-egg) { transform-box: fill-box; transform-origin: 50% 100%; }
.fs .fs-nest-egg { animation: egg-pop .45s var(--ease-spring) calc(var(--n, 0) * .12s + .4s) backwards, egg-idle var(--loop-idle) ease-in-out calc(var(--n, 0) * 2.3s + 1.5s) infinite; }
.fs .hen-lay { animation: hen-hop .3s ease-out .8s; }
.fs .fs-egg { animation: egg-pop .5s var(--ease-spring) 1.05s backwards; }

/* 포장 상자 단면(.pb, HG.illust.packBox) — 보이면 약 3초 동안 한 번 조립한다(탭에 숨어 있으면 탭을 열 때) */
.pb :is(.pb-flap, .pb-egg, .pb-num, .pb-snow) { transform-box: fill-box; }
.pb .pb-flap-l { transform-origin: 0% 100%; animation: turn-in .55s var(--ease-drop) backwards; --turn: 125deg; }
.pb .pb-flap-r { transform-origin: 0% 0%; animation: turn-in .55s var(--ease-drop) backwards; --turn: -125deg; }
.pb .pb-cup { animation: line-draw .35s ease-out calc(.3s + var(--k, 0) * .06s) backwards; }
.pb .pb-egg { transform-origin: 50% 100%; animation: egg-settle .55s var(--ease-out-soft) calc(.55s + var(--k, 0) * .1s) backwards; --fall: 40px; }
.pb .pb-lid { animation: slide-in-t .4s var(--ease-out-soft) 1.35s backwards; --fx: 0px; --fy: -36px; }
.pb .pb-wrap { animation: fade-from .35s ease-out 1.7s backwards; --o0: 0; }
.pb .pb-ice { animation: slide-in-t .45s var(--ease-out-soft) 1.95s backwards; --fx: 24px; --fy: 0px; }
.pb .pb-lead { animation: fade-from .3s ease-out calc(2.1s + var(--m, 0) * .1s) backwards; --o0: 0; }
.pb .pb-num { transform-origin: 50% 50%; animation: egg-pop .35s var(--ease-spring) calc(2.2s + var(--m, 0) * .1s) backwards; --pop-from: .4; }
.pb .pb-snow { transform-origin: 50% 50%; animation: spin 12s linear 2.6s infinite; }

/* 낙하 시험(.dt, HG.illust.dropTest) — 축만 정한다. 움직임은 메인(index.html)의 .drop-stage 규칙 */
.dt :is(.dt-idle, .dt-puff, .dt-ok) { transform-box: fill-box; }
.dt .dt-idle { transform-origin: 50% 0%; }
.dt :is(.dt-puff, .dt-ok) { transform-origin: 50% 50%; }

/* 난각번호 계란(.sh, HG.illust.shellEgg)과 결과 칸 — 살포시 놓이고 번호가 왼쪽부터 인쇄된다. 10초마다 아주 살짝 뒤뚱 */
.sh :is(.sh-egg, .sh-tilt, .sh-shadow) { transform-box: fill-box; }
.sh :is(.sh-egg, .sh-tilt) { transform-origin: 50% 100%; }
.sh .sh-shadow { transform-origin: 50% 50%; animation: shadow-in 1.1s ease-out .2s backwards; --shadow-from: .6; }
.sh .sh-egg { animation: sh-settle 1.1s var(--ease-out-soft) .2s backwards, egg-idle 10s ease-in-out 3s infinite; --amp: .28; }
/* 계란은 이 그림의 틀이라 투명에서 시작하지 않는다 — 시작 전(키 큰 블록이 화면 끝에 걸쳐 기다릴 때)에도 살짝 떠 있는 계란이 보이고,
   시작하면 10px 내려와 살포시 놓인다(그림자는 shadow-in으로 따로 나타남) */
@keyframes sh-settle { 0% { transform: translateY(-10px) rotate(-2deg); } 35% { transform: translateY(0) rotate(1.5deg); } 55% { transform: translateY(0) rotate(-.8deg); } 75% { transform: translateY(0) rotate(.3deg); } }
.sh .sh-code { animation: ink-print .7s cubic-bezier(.4, 0, .2, 1) .9s backwards; }
.sh .sh-shine { animation: glow-pulse 4s ease-in-out 2s infinite alternate; --o-lo: .45; --o-hi: .7; }
/* 읽기(.is-read): 인쇄가 지나가는 박자에 맞춰 세 묶음이 차례로 노른자색으로 빛난다 */
.sh.is-read .sh-seg { animation: seg-flash .5s ease .55s; }
.sh.is-read .sh-seg[data-seg="2"] { animation-delay: .78s; }
.sh.is-read .sh-seg[data-seg="3"] { animation-delay: .98s; }
/* 결과 칸에 마우스를 올리면 같은 자리 번호만 진하게(HG.linkShellParts) */
.sh .sh-seg { transition: fill-opacity .2s, fill .2s; }
.sh[data-hl] .sh-seg { fill-opacity: .3; }
.sh[data-hl="1"] .sh-seg[data-seg="1"], .sh[data-hl="2"] .sh-seg[data-seg="2"], .sh[data-hl="3"] .sh-seg[data-seg="3"] { fill-opacity: 1; fill: #B86E04; }
/* 결과 칸은 읽을 때마다 새로 그려져 저절로 다시 떠오른다. 정보 글자라 투명에서 시작하지 않고 자리만 잡는다(lift-in) —
   화면 끝에 걸쳐 시작 전으로 멈춰 있어도 칸과 글자는 보인다 */
:where([data-decoder], .pd-shell) .decoded .part { animation: lift-in .42s var(--ease-out-soft) .7s backwards; --fy: 8px; }
:where([data-decoder], .pd-shell) .decoded .part:nth-child(2) { animation-delay: .82s; }
:where([data-decoder], .pd-shell) .decoded .part:nth-child(3) { animation-delay: .94s; }

/* 머리글: 로고 해 뜨기(세션 첫 화면·메뉴 열 때), 로고 hover 뒤뚱, 장바구니 속 계란, 바로가기 계란 아이콘 */
.logo-mark { transform-origin: 50% 92%; }
html.is-intro .site-header .logo-sun, .drawer:not([hidden]) .logo-sun { animation: sun-rise 1.1s var(--ease-out-soft) .25s backwards; --rise: 9px; }
@media (hover: hover) { .site-header .logo:hover .logo-mark { animation: egg-wobble .7s ease-in-out; } }
.site-header .logo:focus-visible .logo-mark { animation: egg-wobble .7s ease-in-out; }
.cart-egg { display: none; fill: #F2D3A8; stroke: currentColor; stroke-width: 1.4; transform-box: fill-box; transform-origin: 50% 100%; }
.site-header .icon-btn[data-has-items] .cart-egg { display: inline; }
.site-header .icon-btn.is-new .cart-egg { animation: egg-pop .45s var(--ease-spring) backwards; --pop-from: .6; }
.topbar-util .ico-egg { transform-origin: 50% 92%; }
@media (hover: hover) { .topbar-util a:hover .ico-egg { animation: egg-wobble .6s ease-in-out; } }
.topbar-util a:focus-visible .ico-egg { animation: egg-wobble .6s ease-in-out; }

/* 담기: 날아가는 계란(HG.flyEgg)과 토스트 아이콘(정지 그림) */
.fly-egg { position: fixed; z-index: 160; width: 22px; height: 26px; pointer-events: none; will-change: transform; }
.fly-egg-y, .fly-egg svg { display: block; width: 100%; height: 100%; }
.toast-ico { width: 28px; height: 21px; flex: none; margin-right: -6px; overflow: visible; }

/* 오늘의 출고(.ship-card) — 처음 보일 때만 선이 차오르고 완료 점이 퐁, 난각번호가 인쇄된다(1분마다 다시 그릴 땐 .is-settled로 정지) */
.ship-steps li { --d: calc(var(--i, 0) * .35s); }
[data-ship-card]:not(.is-settled) .ship-steps li:is(.is-done, .is-next)::before { transform-origin: 0 50%; animation: grow-x .35s ease-out var(--d) backwards; }
[data-ship-card]:not(.is-settled) .ship-steps .is-done .dot { animation: egg-pop .35s var(--ease-spring) calc(var(--d) + .3s) backwards; --pop-from: .5; }
[data-ship-card]:not(.is-settled) .ship-steps .is-done .dot path { animation: line-draw .3s ease-out calc(var(--d) + .45s) backwards; }
.ship-steps .is-next .dot { color: var(--yolk-deep); }
.ship-steps .is-next .dot .ico-egg { width: 14px; height: 16px; transform-origin: 50% 90%; animation: egg-idle var(--loop-idle) ease-in-out 1.5s infinite; }
[data-ship-card]:not(.is-settled) .ship-egg .code { display: inline-block; animation: ink-print .8s cubic-bezier(.4, 0, .2, 1) 1.5s backwards; }
.ship-egg .k { display: inline-flex; align-items: center; gap: 5px; }
.ship-egg .k .ico-svg { width: 13px; height: 15px; color: var(--yolk-deep); flex: none; }

/* 처리 중 단추(aria-busy="true"): 글자 왼쪽 여백에서 작은 계란이 흔들린다. 단추 폭은 그대로 둔다 */
.btn[aria-busy="true"] { position: relative; opacity: .85; cursor: progress; }
.btn[aria-busy="true"]::before {
  content: ''; position: absolute; left: 16px; top: 50%; width: 12px; height: 15px; margin-top: -8px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: currentColor;
  transform-origin: 50% 90%; animation: rock .9s linear infinite; --amp: 2;
}
.btn-sm[aria-busy="true"]::before { left: 11px; }
.btn-lg[aria-busy="true"]::before { left: 22px; }
.btn[aria-busy="true"]:not(.btn-block) { padding-left: 38px; padding-right: 6px; }
.btn-sm[aria-busy="true"]:not(.btn-block) { padding-left: 30px; padding-right: 2px; }
.btn-lg[aria-busy="true"]:not(.btn-block) { padding-left: 46px; padding-right: 10px; }

/* 수량 −/+ 계란(HG.qtyEgg): '+'는 위에서 수량 칸으로 쏙 들어가고, '−'는 칸에서 위로 빠져나가 흐려진다 */
.qty { position: relative; }
.qty-egg {
  position: absolute; top: -10px; width: 12px; height: 15px; pointer-events: none; opacity: 0;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 36% 30%, #F7E0C0, #DDAF80 55%, #B8875A);
}
.qty-egg.is-up { animation: qty-in .6s var(--ease-out-soft) forwards; }
.qty-egg.is-down { animation: qty-out .55s ease-out forwards; }
@keyframes qty-in { 0% { transform: translateY(-14px); opacity: 0; } 30% { opacity: 1; } 70% { transform: translateY(12px); opacity: 1; } 100% { transform: translateY(16px) scale(.6); opacity: 0; } }
@keyframes qty-out { 0% { transform: translateY(16px) scale(.6); opacity: 0; } 30% { transform: translateY(8px); opacity: 1; } 100% { transform: translateY(-16px) rotate(-14deg); opacity: 0; } }

/* 체크 계란(HG.eggCheck): [data-motion] 안에서 계란이 퐁 → 체크가 그어진다. 차례는 --ec-i */
.egg-check { display: inline-block; width: 16px; height: 19px; vertical-align: -3px; margin-right: 6px; color: var(--leaf); overflow: visible; }
.egg-check .ec-shell { fill: var(--leaf-soft); transform-box: fill-box; transform-origin: 50% 100%; }
[data-motion] .egg-check .ec-shell { animation: egg-pop .45s var(--ease-spring) calc(.3s + var(--ec-i, 0) * .12s) backwards; }
[data-motion] .egg-check .ec-tick { animation: line-draw .35s ease-out calc(.65s + var(--ec-i, 0) * .12s) backwards; }

/* 완료 조각(HG.eggBurst)과 완료 원 — 숨김이 풀리는 순간 저절로 재생된다 */
.done-ico, .feature .ico { position: relative; }
.egg-burst { position: absolute; inset: 0; pointer-events: none; }
.egg-burst i {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 10px; margin: -5px 0 0 -4px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--yolk); opacity: 0;
}
.egg-burst i:nth-child(even) { background: #DDAF80; }
:is(.inq-done, .inquiry-done, .join-done, .done-card):not([hidden]) .egg-burst i { animation: egg-burst .7s cubic-bezier(.2, .7, .3, 1) .85s; }
:is(.inq-done, .inquiry-done, .join-done):not([hidden]) .done-ico { animation: egg-pop .55s var(--ease-spring) backwards; --pop-from: .5; }
:is(.inq-done, .inquiry-done, .join-done):not([hidden]) .done-ico path { animation: line-draw .4s ease-out .25s backwards; }

/* 완료 표시(.done-mark — 주문 완료 그림, HG.doneMark): 계란이 내려앉고 초록 원이 퐁, 체크가 그어지고 조각이 퍼진다 */
.done-mark { overflow: visible; }
.done-mark :is(.dm-shadow, .dm-egg, .dm-idle, .dm-badge, .dm-bit) { transform-box: fill-box; transform-origin: 50% 50%; }
.done-mark .dm-egg { transform-origin: 50% 100%; animation: egg-settle .6s var(--ease-out-soft) .1s backwards; --fall: 30px; }
/* 다 놓인 뒤 9초마다 계란이 초록 원과 함께 살짝 뒤뚱(dm-egg 안쪽 g — 들어올 때 효과와 따로) */
.done-mark .dm-idle { transform-origin: 50% 100%; animation: egg-idle 9s ease-in-out 2.6s infinite; --amp: .65; }
.done-mark .dm-shadow { animation: shadow-in .5s ease-out .15s backwards; }
.done-mark .dm-badge { animation: egg-pop .4s var(--ease-spring) .5s backwards; }
.done-mark .dm-check { animation: line-draw .35s ease-out .8s backwards; }
/* 조각은 빨리 흐려지므로 초록 원(반지름 21) 밖까지 멀리 퍼뜨린다(44px이면 원 위에서 사라져 잘 안 보였다) */
.done-mark .dm-bit { opacity: 0; animation: egg-burst .7s var(--ease-out-soft) 1.05s; --burst: 56px; }

/* 빈 화면 계란 아이콘(.empty 안의 HG.icon('egg')): 퐁 나타난 뒤 가끔 뒤뚱 */
.empty .ico-egg { transform-origin: 50% 88%; animation: egg-pop .45s var(--ease-spring) backwards, egg-idle var(--loop-idle) ease-in-out 1s infinite; }

/* 빈 장바구니·빈 주문서 그림(svg.empty-art, cart·checkout 공용): 계란이 굴러 들어와 가끔 깡충, 빈 칸 점선이 은은히 */
.empty-art :is(.ce-egg, .ce-egg-hop, .ce-ghost, .ce-egg-shadow) { transform-box: fill-box; }
.empty-art .ce-egg { transform-origin: 50% 50%; animation: egg-roll-in .9s var(--ease-out-soft) .2s backwards; }
.empty-art .ce-egg-hop { transform-origin: 50% 100%; animation: egg-hop-idle 6s ease-in-out 1.6s infinite; --hop: 10px; --amp: 1; }
.empty-art .ce-egg-shadow { transform-origin: 50% 50%; animation: shadow-in .9s ease-out .2s backwards, shadow-hop 6s ease-in-out 1.6s infinite; --shadow-from: .3; }
.empty-art .ce-ghost { animation: glow-pulse 3.2s ease-in-out 1.4s infinite alternate; --o-lo: .45; --o-hi: .15; }
@media (hover: hover) { .cart-empty:has(.btn-primary:hover) .empty-art .ce-egg-hop { animation: egg-hop .5s var(--ease-out-soft); } }

/* 주문 단계(.order-steps, cart·checkout 공용): 지금 단계 고리가 세 번 퍼지고 멈춘다, 끝난 단계 체크가 퐁, 이음선이 차오른다 */
.order-steps .num { position: relative; }
.order-steps [aria-current="step"] .num::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--yolk); opacity: 0; pointer-events: none;
  animation: ring-ping 2.4s ease-out .6s 3; --ping: 1.5;
}
.order-steps .is-done .num .ico-svg { animation: egg-pop .4s var(--ease-spring) backwards; --pop-from: .4; }
.order-steps .is-done + li::before { transform-origin: 0 50%; animation: grow-x .5s var(--ease-out-soft) .15s backwards; }

/* 띠 큰 계란(data-egg를 단 .cta-band): 띠 오른쪽 아래 큰 계란 실루엣이 한 번 떠오른다. 띠에 data-motion도 단다 */
.cta-band { isolation: isolate; }
/* 넓은 화면은 계란 끝과 어깨까지 보이게 올리고(아래만 보이면 언덕처럼 읽힘), 좁은 화면(단추가 세로로 쌓임)은 줄여서 단추 오른쪽 빈 귀퉁이에만 둔다 */
.cta-band[data-egg]::before {
  content: ''; position: absolute; right: -40px; bottom: -56px; width: 220px; height: 270px; z-index: -1; pointer-events: none;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: rgba(242, 164, 19, .12);
  animation: slide-in .9s var(--ease-out-soft) backwards; --fy: 30px;
}
.cta-band.yolk[data-egg]::before { background: rgba(255, 255, 255, .2); }
@media (max-width: 768px) { .cta-band[data-egg]::before { width: 140px; height: 172px; right: -28px; bottom: -58px; } }

/* 계란 줄(HG.eggRow — 통계 '4만 개' 칸 등): [data-motion] 안에서 차례로 퐁 */
.egg-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.egg-row i { width: 9px; height: 11px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--yolk); transform-origin: 50% 100%; }
[data-motion] .egg-row i { animation: egg-pop .35s var(--ease-spring) calc(.4s + var(--n, 0) * .06s) backwards; }

/* 바닥글 '움직임 줄이기' 단추 */
.motion-toggle { padding: 0; border: 0; background: none; color: #E6D9C6; font: inherit; font-weight: 600; }
.motion-toggle:hover { color: #fff; }
.motion-toggle[aria-pressed="true"] { color: var(--yolk); }
.motion-toggle[aria-pressed="true"]::after { content: ' 켜짐'; content: ' 켜짐' / ''; }

/* ---------- 나타나기 효과 ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .float-card, .live-dot { animation: none !important; }
  .drawer-panel { animation: none; }
  .product-card .thumb svg, .recipe-card .thumb svg { transition: none; }
  /* 전역 안전장치: 모든 애니메이션을 마지막 장면에서 끝낸다(들어올 때 효과는 완성 그림, 반복은 쉬는 자세) */
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
  /* 잠깐만 보이는 장식은 아예 숨긴다 */
  .ra-steam, .sh-scan, .se-glint, .dt-puff, .dt-hit, .egg-burst, .dm-burst, .qty-egg, .fly-egg { display: none !important; }
  .motion-toggle { display: none; } /* 이미 OS 설정으로 줄였다 */
}
/* 바닥글 '움직임 줄이기'(html.no-motion)도 같은 안전장치를 쓴다. html 자신의 부드러운 스크롤(맨 위 html 규칙)도 끈다(아래 * 규칙은 html에 닿지 않는다) */
html.no-motion { scroll-behavior: auto; }
html.no-motion *, html.no-motion *::before, html.no-motion *::after {
  animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
  transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}
html.no-motion :is(.ra-steam, .sh-scan, .se-glint, .dt-puff, .dt-hit, .egg-burst, .dm-burst, .qty-egg, .fly-egg) { display: none !important; }
html.js.no-motion [data-reveal] { opacity: 1; transform: none; transition: none; }

@media print {
  .topbar, .site-header, .drawer, .site-footer, .toast, .fly-egg, .qty-egg { display: none !important; }
  /* 움직임 없이 완성 그림으로 찍는다(아직 스크롤하지 않은 블록·세기 전 숫자도 보이게) */
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-count] { opacity: 1 !important; }
}