@charset "UTF-8";

/* ============================================================
   COCKTAIL ARCHIVE — 공통 스타일 (style.css)

   구조
     01. 디자인 토큰
     02. 리셋 / 베이스
     03. 잔 씬 (.scene / .cup)
     04. 내용물 (.liquid / .bubbles / .ices)
     05. 가니시 파츠 (.garnish / .wheel / .wedge / .peel / .pick / .straw)
     06. 사선 경계 (.panel 의 clip-path)
     07. 콘텐츠 패널 (.panel ~ .tagline)
     08. 정보 그리드 (.grid / .field)
     09. 스탯 바 (.stats / .stat)
     10. 트리비아 (.trivia)
     11. 메뉴로 돌아가기 (.back)

   각 페이지는 <head>의 <style>에서 :root 토큰만 덮어쓰면 됩니다.
   위치값(top/left/transform)과 z-index 같은 페이지 고유 배치는
   각 HTML 상단 <style>에 그대로 둡니다.
   ============================================================ */


/* ============================================================
   01. 디자인 토큰
   ============================================================ */
:root {
  /* ── 시리즈 고정 ─────────────────────────── */
  --cream: #F3E9D2;            /* 크림 — 메모지 색 */

  /* 트리비아 손글씨.
     Caveat 에는 한글 글리프가 없어 한글은 Nanum Pen Script 로 떨어진다.
     라틴은 Caveat, 한글은 나눔펜 — 둘 다 펜 계열이라 결이 맞는다.
     연필 느낌을 원하면 Nanum Pen Script 자리에 Gaegu 를 넣으면 된다. */
  --note-font: 'Caveat', 'Nanum Pen Script', cursive;
  --note-size: 21px;
  --gold: #B8901F;             /* 마퀴 골드 — 디바이더/아이브로 */

  /* ── 표면 ────────────────────────────────── */
  /* 다크 테마를 붙일 때 여기 세 줄만 갈아끼우면 된다.
     하드코딩된 #fff 를 남기지 않는 것이 요점. */
  --surface: #FCFAF6;          /* 페이지 종이. 순백을 원하면 #fff */
  --surface-note: var(--cream);/* 그 위에 얹힌 메모지 */
  --ice: #fff;                 /* 얼음 */

  /* ── 사선 경계 / 등장 ────────────────────── */
  --cut: 6vw;                  /* 사선 낙차. vw 라서 각도가 폭과 무관하게 고정 */
  --cut-angle: 3.4336deg;      /* atan(6 / 100) — --cut 을 바꾸면 같이 고칠 것 */
  --enter: 900ms;
  --enter-shift: 72px;
  --ease: cubic-bezier(.22, .8, .28, 1);

  /* ── 페이지 테마 (각 파일에서 덮어씀) ─────── */
  --ink: #2B1B14;              /* 본문 텍스트 */
  --bg: #E2E9ED;               /* 잔 씬 배경 */
  --accent: #6B3F2A;           /* 타이틀 · 불릿 · 트리비아 */
  --label: #B9803F;            /* 소제목 라벨 */
  --tape: rgba(185, 128, 63, .5); /* 트리비아 마스킹테이프 */

  /* ── 잔 ──────────────────────────────────── */
  --glass-rim: #fff;           /* 림(테두리) */
  --glass-rim-w: 16px;         /* 림 두께 */
  --glass-shade: #c4e3f3;      /* 잔 벽 그림자면 */
  --glass-light: var(--bg);    /* 잔 벽 하이라이트면 */
  --glass-shadow-h: 324px;     /* 바닥 그림자 높이 */

  /* ── 리퀴드 ──────────────────────────────── */
  --liquid-inset: 20px;        /* 잔 안쪽 여백 = 액면 크기 */
  --liquid-bg: linear-gradient(200deg, #ccc 0%, #888 100%);
  --liquid-blend: multiply;
  --liquid-opacity: 1;
  --liquid-filter: none;
  --liquid-speed: 1.5s;
  --liquid-sway: 15px;         /* 좌우로 출렁이는 폭 */

  /* ── 기포 ────────────────────────────────── */
  --bubble-color: rgba(255, 240, 210, .55);

  /* ── 얼음 ────────────────────────────────── */
  --ices-spin: 8s;

  /* ── 가니시 ──────────────────────────────── */
  --wheel-size: 140px;         /* 시트러스 휠(온전한 원형 슬라이스) */
  --wheel-rind-w: 12px;
  --wheel-rind: #E8D96A;
  --wheel-flesh: #F3E792;
  --wheel-seg-a: #F6EDA6;
  --wheel-seg-b: #E9DB80;
  --wheel-core: #FBF6D8;

  --wedge-w: 125px;            /* 반달 슬라이스 */
  --wedge-h: 65px;
  --wedge-rind-w: 10px;
  --wedge-rind: #fbe98c;
  --wedge-flesh: #f9d94e;
  --wedge-pip: #d1a824;

  --peel: #F7A83E;             /* 시트러스 필 리본 */
  --peel-fold: #FBD7A8;
  --peel-scale: 1;

  --straw: #2B1B14;            /* 스트로 */
  --straw-dark: #080503;

  --pick: #221c17;             /* 칵테일 픽 */

  --cherry: #dc142c;           /* 줄기 달린 체리 */
  --cherry-stem: var(--cherry);

  /* ── z-index 기본값 (페이지에서 자유롭게 덮어씀) ── */
  --z-ice: 1;
  --z-liquid: 3;
  --z-bubbles: 4;
  --z-garnish: 6;
  --z-peel-bar: 2;
}


/* ============================================================
   02. 리셋 / 베이스
   ============================================================ */
/* NOTE: 전역 box-sizing: border-box 를 쓰지 않습니다.
   빨대(.straw)·잔 벽(.cup::after)·시트러스(.wheel/.wedge)가 모두
   border 로 도형을 그리기 때문에, border-box 를 걸면
   width 안으로 테두리가 먹혀 들어가 모양이 좁아집니다. */

/* 가로 스크롤 차단은 루트에 건다.
   body 에만 걸면 뷰포트로 전파되는 과정에서 브라우저마다 다르게 샌다. */
html { overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg);
  overflow-x: clip;
  font-family: 'Work Sans', sans-serif;
  color: var(--ink);
}


/* ============================================================
   03. 잔 씬
   ============================================================ */
.scene {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 120px 0 calc(80px + var(--cut));

  /* 씬은 우 → 좌로 들어온다.
     왼쪽에서 들여보내면 씬의 오른쪽 clip 경계가 화면 안으로 들어와
     잔 그림자가 수직으로 잘린 채 보인다. */
  animation: scene-in var(--enter) var(--ease) both;

  /* 잔 그림자(.cup::before)와 일부 가니시는 잔 밖으로 크게 뻗어나간다.
     좁은 화면에서 가로 스크롤이 생기므로 가로축만 잘라낸다.

     hidden 이 아니라 clip 인 이유:
     한 축이 visible 이고 다른 축이 visible/clip 이 아니면
     visible 쪽이 auto 로 강제 변환된다(= 세로도 잘린다).
     clip 은 그 규칙의 예외라 overflow-y: visible 이 그대로 유지된다. */
  overflow-x: clip;
  overflow-y: visible;
  /* 슬라이드 거리보다 크게 잡아, 애니메이션 도중 clip 경계선이
     화면 안으로 들어오지 않도록 한다 */
  overflow-clip-margin: 120px;
}

/* 잔을 위에서 내려다본 모습. 림 두께로 잔 종류를 표현한다.
   (록스·하이볼 16px / 마티니처럼 얇은 잔 9px) */
.cup {
  position: relative;
  width: 296px;
  height: 296px;
  outline: var(--glass-rim-w) solid var(--glass-rim);
  border-radius: 50%;
  z-index: 10;
}

/* 잔 벽 — border 4방향의 명암 차이로 원통 두께를 만든다 */
.cup::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  width: 0;
  height: 0;
  border-top: 150px solid var(--glass-shade);
  border-right: 150px solid var(--glass-light);
  border-bottom: 150px solid var(--glass-shade);
  border-left: 150px solid var(--glass-shade);
  border-radius: 150px;
}

/* 바닥에 드리운 그림자 */
.cup::before {
  content: '';
  position: absolute;
  top: 50%;
  width: 390px;
  height: var(--glass-shadow-h);
  transform: translateY(-50%) rotate(45deg);
  transform-origin: 20% 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, .2) -60%, rgba(0, 0, 0, 0));
  z-index: -10;
}


/* ============================================================
   04. 내용물
   ============================================================ */

/* ── 리퀴드 ─────────────────────────────────── */
.liquid {
  position: absolute;
  z-index: var(--z-liquid);
  inset: var(--liquid-inset);
  border-radius: 50%;
  background: var(--liquid-bg);
  mix-blend-mode: var(--liquid-blend);
  opacity: var(--liquid-opacity);
  filter: var(--liquid-filter);
  animation: liquid var(--liquid-speed) ease-in-out infinite;
}

@keyframes liquid {
  from { transform: translateX(calc(var(--liquid-sway) * -1)); }
  50%  { transform: translateX(var(--liquid-sway)); }
  to   { transform: translateX(calc(var(--liquid-sway) * -1)); }
}

/* ── 기포 ───────────────────────────────────── */
.bubbles {
  position: absolute;
  z-index: var(--z-bubbles);
  inset: var(--liquid-inset);
  overflow: hidden;
  border-radius: 50%;
}

.bubble {
  position: absolute;
  border-radius: 50%;
  background: var(--bubble-color);
  opacity: 0;
  z-index: 30;
  mix-blend-mode: overlay;
  animation: rise 3.4s ease-in infinite;
}

.bubble-1  { left: 30px;  bottom: 10px;  width: 10px; height: 10px; animation-delay: 0s;   }
.bubble-2  { left: 110px; bottom: 30px;  width: 6px;  height: 6px;  animation-delay: .8s;  }
.bubble-3  { left: 150px; bottom: 0;     width: 8px;  height: 8px;  animation-delay: 1.6s; }
.bubble-4  { left: 90px;  bottom: 50px;  width: 5px;  height: 5px;  animation-delay: 2.2s; }
.bubble-5  { left: 190px; bottom: 20px;  width: 7px;  height: 7px;  animation-delay: 1.1s; }
.bubble-6  { left: 60px;  bottom: 70px;  width: 9px;  height: 9px;  animation-delay: .4s;  }
.bubble-7  { left: 200px; bottom: 60px;  width: 5px;  height: 5px;  animation-delay: 1.9s; }
.bubble-8  { left: 20px;  bottom: 90px;  width: 6px;  height: 6px;  animation-delay: 2.6s; }
.bubble-9  { left: 130px; bottom: 100px; width: 8px;  height: 8px;  animation-delay: .6s;  }
.bubble-10 { left: 170px; bottom: 110px; width: 4px;  height: 4px;  animation-delay: 1.3s; }
.bubble-11 { left: 80px;  bottom: 120px; width: 7px;  height: 7px;  animation-delay: 2.9s; }
.bubble-12 { left: 220px; bottom: 40px;  width: 5px;  height: 5px;  animation-delay: .2s;  }
.bubble-13 { left: 50px;  bottom: 150px; width: 6px;  height: 6px;  animation-delay: 1.7s; }
.bubble-14 { left: 140px; bottom: 160px; width: 9px;  height: 9px;  animation-delay: 2.4s; }
.bubble-15 { left: 100px; bottom: 20px;  width: 5px;  height: 5px;  animation-delay: 3.0s; }
.bubble-16 { left: 180px; bottom: 170px; width: 6px;  height: 6px;  animation-delay: .9s;  }
.bubble-17 { left: 40px;  bottom: 190px; width: 4px;  height: 4px;  animation-delay: 1.5s; }
.bubble-18 { left: 210px; bottom: 130px; width: 7px;  height: 7px;  animation-delay: 2.1s; }
.bubble-19 { left: 120px; bottom: 60px;  width: 5px;  height: 5px;  animation-delay: .5s;  }
.bubble-20 { left: 160px; bottom: 80px;  width: 8px;  height: 8px;  animation-delay: 2.8s; }

@keyframes rise {
  0%   { transform: translateY(0) scale(1);        opacity: 0;  }
  15%  { opacity: .7; }
  80%  { opacity: .5; }
  100% { transform: translateY(-160px) scale(.35); opacity: 0;  }
}

/* ── 얼음 ───────────────────────────────────── */
.ices {
  position: relative;
  width: 280px;
  height: 280px;
  top: 16px;
  left: 8px;
  z-index: var(--z-ice);
  animation: ices var(--ices-spin) ease-in-out infinite;
}

/* 덩어리 얼음 하나를 가운데 놓을 때 */
.ices--center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 큐브 여러 개를 뭉쳐 놓을 때 */
.ices--cluster {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

/* 회전 없이 정지 (구형 얼음 등) */
.ices--still { animation: none; }

@keyframes ices {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}

/* 큰 각얼음 한 덩어리 */
.ice-block {
  width: 168px;
  height: 168px;
  border-radius: 8px;
  background: var(--ice);
  opacity: .88;
}

/* 구형 얼음 */
.ice-ball {
  width: 178px;
  height: 178px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%,
      var(--ice) 0%, var(--ice) 22%, #e9eff2 48%, #ccd8de 74%, #aebdc6 100%);
  animation: ice-bob 5s ease-in-out infinite;
}

@keyframes ice-bob {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(3px, -4px) rotate(2deg); }
  50%      { transform: translate(-3px, 2px) rotate(-3deg); }
  75%      { transform: translate(2px, 3px) rotate(1deg); }
}

/* 큐브를 뭉쳐 놓는 배치 (.ices--cluster 안) */
.ices--cluster .ice {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: var(--ice);
}
.ices--cluster .ice:nth-child(1) { transform: translate(16px, 8px)   rotate(-8deg);  opacity: .35; }
.ices--cluster .ice:nth-child(2) { transform: translate(5px, 40px)   rotate(6deg);   opacity: .9;  }
.ices--cluster .ice:nth-child(3) { transform: translate(-3px, 16px)  rotate(16deg);  opacity: .55; }
.ices--cluster .ice:nth-child(4) { transform: translate(8px, -24px)  rotate(-14deg); opacity: 1;   }
.ices--cluster .ice:nth-child(5) { transform: translate(-9px, -2px)  rotate(17deg);  opacity: .45; }
.ices--cluster .ice:nth-child(6) { transform: translate(4px, -24px)  rotate(-5deg);  opacity: .75; }
.ices--cluster .ice:nth-child(7) { transform: translate(16px, -24px) rotate(-8deg);  opacity: .3;  }
.ices--cluster .ice:nth-child(8) { transform: translate(5px, -16px)  rotate(6deg);   opacity: .65; }
.ices--cluster .ice:nth-child(9) { transform: translate(-8px, -32px) rotate(-16deg); opacity: .95; }

/* 작은 큐브 43개를 나선형으로 흩뿌리는 배치 (.ices--scatter 안) */
.ices--scatter .ice {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 4px;
  background: var(--ice);
}
.ices--scatter .ice:nth-child(1)  { transform: translate(0px, 0px) rotate(16deg);      opacity: .91; }
.ices--scatter .ice:nth-child(2)  { transform: translate(29px, 8px) rotate(16deg);     opacity: .64; }
.ices--scatter .ice:nth-child(3)  { transform: translate(8px, 29px) rotate(20deg);     opacity: .47; }
.ices--scatter .ice:nth-child(4)  { transform: translate(-21px, 21px) rotate(17deg);   opacity: .66; }
.ices--scatter .ice:nth-child(5)  { transform: translate(-29px, -8px) rotate(20deg);   opacity: .87; }
.ices--scatter .ice:nth-child(6)  { transform: translate(-8px, -29px) rotate(-14deg);  opacity: .64; }
.ices--scatter .ice:nth-child(7)  { transform: translate(21px, -21px) rotate(-8deg);   opacity: .41; }
.ices--scatter .ice:nth-child(8)  { transform: translate(54px, 8px) rotate(-18deg);    opacity: .74; }
.ices--scatter .ice:nth-child(9)  { transform: translate(40px, 38px) rotate(12deg);    opacity: .98; }
.ices--scatter .ice:nth-child(10) { transform: translate(10px, 54px) rotate(20deg);    opacity: .77; }
.ices--scatter .ice:nth-child(11) { transform: translate(-24px, 49px) rotate(20deg);   opacity: .36; }
.ices--scatter .ice:nth-child(12) { transform: translate(-49px, 26px) rotate(17deg);   opacity: .39; }
.ices--scatter .ice:nth-child(13) { transform: translate(-54px, -8px) rotate(-18deg);  opacity: .47; }
.ices--scatter .ice:nth-child(14) { transform: translate(-40px, -38px) rotate(-5deg);  opacity: .74; }
.ices--scatter .ice:nth-child(15) { transform: translate(-10px, -54px) rotate(16deg);  opacity: .56; }
.ices--scatter .ice:nth-child(16) { transform: translate(24px, -49px) rotate(20deg);   opacity: .9;  }
.ices--scatter .ice:nth-child(17) { transform: translate(49px, -26px) rotate(17deg);   opacity: .5;  }
.ices--scatter .ice:nth-child(18) { transform: translate(78px, 17px) rotate(6deg);     opacity: .67; }
.ices--scatter .ice:nth-child(19) { transform: translate(63px, 49px) rotate(-14deg);   opacity: .65; }
.ices--scatter .ice:nth-child(20) { transform: translate(36px, 72px) rotate(6deg);     opacity: .61; }
.ices--scatter .ice:nth-child(21) { transform: translate(1px, 80px) rotate(17deg);     opacity: 1;   }
.ices--scatter .ice:nth-child(22) { transform: translate(-34px, 73px) rotate(-14deg);  opacity: .81; }
.ices--scatter .ice:nth-child(23) { transform: translate(-62px, 51px) rotate(9deg);    opacity: .84; }
.ices--scatter .ice:nth-child(24) { transform: translate(-78px, 19px) rotate(17deg);   opacity: .54; }
.ices--scatter .ice:nth-child(25) { transform: translate(-78px, -17px) rotate(-14deg); opacity: .72; }
.ices--scatter .ice:nth-child(26) { transform: translate(-63px, -49px) rotate(-14deg); opacity: .61; }
.ices--scatter .ice:nth-child(27) { transform: translate(-36px, -72px) rotate(6deg);   opacity: .6;  }
.ices--scatter .ice:nth-child(28) { transform: translate(-1px, -80px) rotate(-18deg);  opacity: .9;  }
.ices--scatter .ice:nth-child(29) { transform: translate(34px, -73px) rotate(-18deg);  opacity: .49; }
.ices--scatter .ice:nth-child(30) { transform: translate(62px, -51px) rotate(-18deg);  opacity: .66; }
.ices--scatter .ice:nth-child(31) { transform: translate(78px, -19px) rotate(12deg);   opacity: .62; }
.ices--scatter .ice:nth-child(32) { transform: translate(92px, 43px) rotate(20deg);    opacity: .76; }
.ices--scatter .ice:nth-child(33) { transform: translate(59px, 84px) rotate(6deg);     opacity: .57; }
.ices--scatter .ice:nth-child(34) { transform: translate(9px, 102px) rotate(6deg);     opacity: .57; }
.ices--scatter .ice:nth-child(35) { transform: translate(-43px, 92px) rotate(12deg);   opacity: .84; }
.ices--scatter .ice:nth-child(36) { transform: translate(-84px, 59px) rotate(-14deg);  opacity: .44; }
.ices--scatter .ice:nth-child(37) { transform: translate(-102px, 9px) rotate(-14deg);  opacity: .36; }
.ices--scatter .ice:nth-child(38) { transform: translate(-92px, -43px) rotate(16deg);  opacity: .87; }
.ices--scatter .ice:nth-child(39) { transform: translate(-59px, -84px) rotate(-8deg);  opacity: .79; }
.ices--scatter .ice:nth-child(40) { transform: translate(-9px, -102px) rotate(-5deg);  opacity: .64; }
.ices--scatter .ice:nth-child(41) { transform: translate(43px, -92px) rotate(-5deg);   opacity: .99; }
.ices--scatter .ice:nth-child(42) { transform: translate(84px, -59px) rotate(-8deg);   opacity: .62; }
.ices--scatter .ice:nth-child(43) { transform: translate(102px, -9px) rotate(12deg);   opacity: .43; }


/* ============================================================
   05. 가니시 파츠 라이브러리
   ------------------------------------------------------------
   모양은 여기서 정의하고, 놓이는 위치(top/left/transform)는
   각 페이지 <style>에서 지정합니다.
   ============================================================ */

.garnish {
  position: absolute;
  width: 280px;
  height: 280px;
  z-index: var(--z-garnish);
}

/* ── 시트러스 휠 — 온전한 원형 슬라이스 ─────── */
/*    쓰는 곳: 아마레또 사워(오렌지) · 모스코뮬(라임) · LIIT(레몬)   */
.wheel {
  position: absolute;
  width: var(--wheel-size);
  height: var(--wheel-size);
  border-radius: 50%;
  border: var(--wheel-rind-w) solid var(--wheel-rind);
  background: var(--wheel-flesh);
}

.wheel::before {
  position: absolute;
  content: '';
  inset: var(--wheel-rind-w);
  border-radius: 50%;
  background: repeating-conic-gradient(var(--wheel-seg-a) 0deg 42deg,
                                       var(--wheel-seg-b) 42deg 45deg);
}

.wheel::after {
  position: absolute;
  content: '';
  top: 44%;
  left: 44%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--wheel-core);
}

/* ── 반달 슬라이스 ──────────────────────────── */
/*    쓰는 곳: 카카오피즈 · 셜리 템플(레몬) · 벨리니(복숭아)  */
.wedge {
  position: absolute;
  width: var(--wedge-w);
  height: var(--wedge-h);
  border: var(--wedge-rind-w) solid var(--wedge-rind);
  border-bottom: 0;
  border-radius: 100px 100px 0 0;
  background: var(--wedge-flesh);
}

/* 씨앗 자국 두 개 */
.wedge--pips::before,
.wedge--pips::after {
  position: absolute;
  content: '';
  width: 30px;
  height: 20px;
  border-radius: 50px 0;
  background: var(--wedge-pip);
}
.wedge--pips::after  { top: 30px; left: 30px;  transform: rotate(90deg); }
.wedge--pips::before { top: 30px; right: 30px; transform: rotate(-40deg); }

/* 반달 두 개를 위아래로 붙여 온전한 원형으로 */
.wedge-pair {
  position: absolute;
  width: var(--wedge-w);
  height: calc(var(--wedge-h) * 2);
}
.wedge-pair .wedge { left: 0; top: 0; }
.wedge-pair .wedge:nth-child(2) { top: var(--wedge-h); transform: rotate(180deg); }

/* ── 시트러스 필 트위스트 (지그재그 리본) ───── */
/*    쓰는 곳: 네그로니 · 갓파더 · 올드패션드                */
.peel {
  position: absolute;
  width: 92px;
  height: 182px;
  transform: rotate(40deg) scale(var(--peel-scale));
}

.peel .bar {
  position: absolute;
  left: 0;
  width: 92px;
  height: 36px;
  background: var(--peel);
  z-index: var(--z-peel-bar);
}
.peel .bar-1 { top: 0;     transform: skewY(7deg); }
.peel .bar-2 { top: 76px;  transform: skewY(5deg); }
.peel .bar-3 { top: 148px; transform: skewY(-12deg); }

.peel .fold {
  position: absolute;
  left: 0;
  width: 92px;
  height: 40px;
  background: var(--peel-fold);
  transform-origin: top left;
  z-index: 1;
}
.peel .fold-1 { top: 50px;  transform: skewY(-27deg); }
.peel .fold-2 { top: 154px; transform: skewY(-40deg); }

/* ── 칵테일 픽 ──────────────────────────────── */
/*    쓰는 곳: 마티니(올리브) · 아마레또 사워(체리)          */
.pick {
  position: absolute;
  top: 30px;
  left: 84px;
  width: 160px;
  height: 2.5px;
  background: var(--pick);
  transform: rotate(35deg);
  transform-origin: left center;
  z-index: 7;
}

.pick::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--pick);
  transform: translateY(-50%);
}

/* 픽에 꽂히는 알맹이 — 색은 페이지에서 지정 */
.pick-orb {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  z-index: 9;
}
.pick-orb--1 { top: 34px; left: 92px;  z-index: 8; }
.pick-orb--2 { top: 56px; left: 122px; }

/* ── 줄기 달린 체리 ─────────────────────────── */
/*    쓰는 곳: 셜리 템플 · 위스키 사워                        */
.cherry {
  position: absolute;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--cherry);
  transform-origin: 30% 75%;
  animation: cherry-sway 2.2s ease-in-out infinite;
}

/* 줄기 — 원의 테두리 일부만 남겨 곡선을 만든다 */
.cherry::after {
  position: absolute;
  top: 0;
  left: 24px;
  width: 96px;
  height: 24px;
  content: '';
  transform: rotate(-45deg);
  border: 4px solid transparent;
  border-top-color: var(--cherry-stem);
  border-right-color: var(--cherry-stem);
  border-radius: 50%;
}

@keyframes cherry-sway {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}

/* ── 스트로 ─────────────────────────────────── */
/*    쓰는 곳: 카카오피즈 · 셜리 템플 · 피나콜라다 · LIIT     */
.straw {
  position: absolute;
  z-index: 1;
  bottom: 70px;
  left: 50%;
  width: 20px;
  height: 0;
  transform: translateX(-50%);
  border-top: 300px solid var(--straw);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}
.straw::before {
  position: absolute;
  top: -310px;
  right: 0;
  left: 0;
  height: 20px;
  content: '';
  transform: scale(1.5);
  border-radius: 50%;
  background: var(--straw-dark);
}
.straw::after {
  position: absolute;
  top: -10px;
  right: 0;
  left: 0;
  height: 20px;
  content: '';
  border-radius: 50%;
  background: var(--straw);
}

/* 액면 위로 솟은 부분 — 리퀴드보다 위에 그린다 */
.straw-surface {
  position: absolute;
  z-index: 5;
  bottom: 240px;
  left: 50%;
  width: 25px;
  height: 0;
  transform: translateX(-50%);
  border-top: 100px solid var(--straw);
  border-right: 2px solid transparent;
  border-left: 2px solid transparent;
}
.straw-surface::after {
  position: absolute;
  top: -10px;
  right: 0;
  left: 0;
  height: 20px;
  content: '';
  border-radius: 50%;
  background: var(--straw);
}


/* ============================================================
   06. 사선 경계 — 씬과 패널 사이
   ------------------------------------------------------------
   예전 티켓 퍼포레이션(.tear)을 대신한다.
   ============================================================ */

/* ============================================================
   07. 콘텐츠 패널
   ============================================================ */
.panel {
  position: relative;
  background: var(--surface);

  /* 사선이 씬을 파고들도록 위로 끌어올린다 */
  margin-top: calc(var(--cut) * -1);
  padding: calc(var(--cut) + 48px) 24px 96px;

  /* 왼쪽이 높고 오른쪽으로 내려가는 사선.
     뒤집으려면 polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%) 로 바꾸고
     --cut-angle 에 마이너스를 붙인다. */
  clip-path: polygon(0 0, 100% var(--cut), 100% 100%, 0 100%);

  /* 패널은 좌 → 우. 씬과 반대로 움직여 서로 엇갈린다 */
  animation: panel-in var(--enter) var(--ease) 160ms both;
}

/* 잘린 모서리를 따라 흐르는 점선.
   안쪽 구분선(.field / .stats)이 모두 dashed 라 같은 어휘를 쓴다.
   선을 없애려면 이 블록만 지우면 된다. */
.panel::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 0;

  /* 104% 로 넘기면 그 초과분이 그대로 가로 스크롤이 된다.
     (clip-path 는 그리는 것만 자르고 스크롤 영역에는 관여하지 않는다)
     100% 를 3.43도 돌리면 가로 투영이 99.82% — 0.7px 모자라지만
     그 지점은 사선이 잘려나가는 모서리라 보이지 않는다. */
  width: 100%;
  height: 1px;
  background: repeating-linear-gradient(to right,
      var(--gold) 0 5px, transparent 5px 10px);
  opacity: .5;
  transform-origin: left center;
  transform: rotate(var(--cut-angle));
  pointer-events: none;
}

@keyframes scene-in {
  from { opacity: 0; transform: translateX(var(--enter-shift)); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes panel-in {
  from { opacity: 0; transform: translateX(calc(var(--enter-shift) * -1)); }
  to   { opacity: 1; transform: translateX(0); }
}

.sheet {
  max-width: 880px;
  margin: 0 auto;
}

.masthead {
  text-align: center;
  padding: 8px 0 40px;
}

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.title {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: clamp(48px, 9vw, 92px);
  line-height: .95;
  color: var(--accent);
  margin: 0;
  letter-spacing: .01em;
}

.title-en {
  display: block;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(16px, 2.4vw, 22px);
  color: var(--ink);
  opacity: .55;
  margin-top: 6px;
  letter-spacing: .06em;
}

.tagline {
  margin: 26px auto 0;
  max-width: 480px;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
}

.tagline::before,
.tagline::after {
  content: '';
  display: block;
  width: 44px;
  height: 1px;
  background: var(--gold);
  margin: 18px auto;
}


/* ============================================================
   08. 정보 그리드
   ============================================================ */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
}

@media (max-width: 680px) {
  .grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.field {
  padding: 26px 0;
  border-top: 1px dashed color-mix(in srgb, var(--ink) 25%, transparent);
}

.field--wide { grid-column: 1 / -1; }

.field:first-child,
.grid .field:nth-child(2) { border-top: none; }

.field h3 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--label);
  margin: 0 0 10px;
}

.field p {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
}

.field ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  line-height: 1.9;
}

.field ul li::before {
  content: '· ';
  color: var(--accent);
  font-weight: 700;
}

.field ol {
  margin: 0;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.8;
}

.field ol li { margin-bottom: 6px; }


/* ============================================================
   09. 스탯 바 — 글래스웨어 / 가니시 / 도수
   ============================================================ */
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 40px;
  padding: 30px 0 6px;
  border-top: 1px dashed color-mix(in srgb, var(--ink) 25%, transparent);
  margin-top: 10px;
}

.stat h3 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--label);
  margin: 0 0 6px;
}

.stat p {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 18px;
}


/* ============================================================
   10. 트리비아 — 찢어붙인 메모
   ============================================================ */
.trivia {
  position: relative;
  /* rotate(-2deg) 때문에 바운딩 박스가 실제 폭보다 넓어진다.
     (높이 200px 기준 좌우로 3.4px 씩) 그만큼 미리 빼둔다. */
  max-width: min(420px, calc(100% - 16px));
  margin: 56px auto 0;
  padding: 22px 26px 26px;
  background: var(--surface-note);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ink) 14%, transparent);
  transform: rotate(-2deg);
  border-bottom: 3px solid var(--accent);
}

/* 마스킹테이프 */
.trivia::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  width: 46px;
  height: 22px;
  transform: translateX(-50%) rotate(-3deg);
  background: var(--tape);
}

.trivia h3 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
}

.trivia p {
  margin: 0;
  font-family: var(--note-font);
  font-size: var(--note-size);

  /* 나눔펜은 글자가 em 박스보다 작게 앉아 행간이 붙어 보인다.
     한글 손글씨는 라틴보다 여유가 더 필요해 1.4 → 1.65 */
  line-height: 1.65;
  letter-spacing: .01em;

  /* 한글이 단어 중간에서 잘리지 않도록 */
  word-break: keep-all;

  color: var(--ink);
}


/* ============================================================
   11. 메뉴로 돌아가기 — 모든 스프레드 좌상단 공통
   ------------------------------------------------------------
   잔 씬 위에 얹히는 텍스트 링크. 박스를 두르지 않아
   인쇄된 티켓 느낌을 해치지 않습니다.
   ============================================================ */
.back {
  position: absolute;
  top: 34px;
  left: 36px;
  z-index: 40;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  font-family: 'Work Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;

  color: var(--accent);
  opacity: .7;
  transition: opacity .2s ease;
}

.back:hover { opacity: 1; }

/* 씬·패널보다 한 박자 늦게 도착한다 */
.back { animation: back-in 700ms ease-out 420ms both; }
@keyframes back-in {
  from { opacity: 0; }
  to   { opacity: .7; }
}

/* 화살표 — 호버 시 왼쪽으로 살짝 물러난다 */
.back::before {
  content: '←';
  font-size: 14px;
  letter-spacing: 0;
  color: var(--gold);
  transition: transform .2s ease;
}
.back:hover::before { transform: translateX(-4px); }

/* 밑줄은 호버에서만 */
.back::after {
  content: '';
  position: absolute;
  left: 24px;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .24s ease;
}
.back:hover::after { transform: scaleX(1); }

@media (max-width: 620px) {
  .back { top: 22px; left: 22px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .back::before,
  .back::after { transition: none; }
}


/* ============================================================
   접근성 — 모션 최소화 설정 존중
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .liquid,
  .bubbles,
  .ices,
  .ice-ball,
  .bubble,
  .cherry,
  .scene,
  .panel,
  .back {
    animation: none !important;
  }
  .back { opacity: .7; }
}


/* ============================================================
   12. 패널 구성 v2 — 선택 적용
   ------------------------------------------------------------
   기존 .field ul / .field ol / .stats 는 그대로 둡니다.
   기존 페이지가 이미 그 스타일로 조판되어 있어, 직접 고치면
   전부 한꺼번에 흔들립니다. 대신 새 클래스를 추가해 두고
   페이지를 하나씩 옮겨가는 방식입니다. 중간에 마음이 바뀌어도
   클래스만 떼면 원래대로 돌아갑니다.

   적용 예 (margarita.html 참고)
     <ul class="recipe-list"> ... <span class="amt">50 ml</span>
     <ol class="steps"> ...
     <div class="stats stats--grid"> ...
   ============================================================ */


/* ── 재료 목록 ────────────────────────────────
   분량을 오른쪽 끝에 몰아두면 눈이 재료명만 훑고 내려가다
   필요할 때만 오른쪽을 봅니다. 행마다 점선을 깔아
   이름과 분량이 같은 줄이라는 걸 시선으로 이어줍니다. */
.recipe-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* .field ul li::before 의 가운뎃점 불릿을 끕니다.
   분량 정렬이 있는 줄에는 불릿이 시작점을 흐립니다. */
.field .recipe-list li::before { content: none; }

.recipe-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 0;
  font-size: 15.5px;
  line-height: 1.6;
  border-bottom: 1px dotted color-mix(in srgb, var(--ink) 26%, transparent);
}

.recipe-list li:first-child { padding-top: 0; }
.recipe-list li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.recipe-list .amt {
  margin-left: auto;          /* 분량을 오른쪽 끝으로 */
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--label);
  white-space: nowrap;
}


/* ── 제조 순서 ────────────────────────────────
   기본 ol 의 번호 대신 counter 로 01 · 02 를 찍습니다.
   골드 이탤릭 숫자가 본문에서 분리돼, 문장이 길어져도
   몇 번째 단계인지 왼쪽 끝에서 바로 읽힙니다. */
.steps {
  margin: 0;
  list-style: none;
  counter-reset: step;
}

/* .field ol 의 padding-left: 20px 를 덮으려면
   같은 수 이상의 클래스가 필요합니다 */
.field .steps { padding-left: 0; }
.field .steps li { margin-bottom: 0; }

.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 15px 34px;
  font-size: 15.5px;
  line-height: 1.8;
  word-break: keep-all;
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 1px;
  left: 0;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--gold);
}

.steps li:last-child { padding-bottom: 0; }


/* ── 스탯 그리드 ──────────────────────────────
   기본 .stats 는 flex 라 항목이 왼쪽에 몰립니다.
   칸을 균등하게 나누면 스펙 표처럼 읽혀서, 잔을 고를 때
   페이지끼리 같은 위치를 비교하기 쉬워집니다.

   칸 수는 --stats-cols 로 조절합니다 (기본 5). */
.stats.stats--grid {
  display: grid;
  grid-template-columns: repeat(var(--stats-cols, 5), 1fr);
  gap: 0;
  padding: 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--ink) 25%, transparent);
}

.stats--grid .stat {
  padding: 22px 10px;
  text-align: center;
  border-right: 1px dotted color-mix(in srgb, var(--ink) 22%, transparent);
}

.stats--grid .stat:last-child { border-right: none; }
.stats--grid .stat h3 { margin-bottom: 8px; }
.stats--grid .stat p { font-size: 17px; line-height: 1.3; }

@media (max-width: 680px) {
  /* 좁은 화면에서 5칸은 글자가 세로로 쪼개집니다.
     2칸으로 접고, 접히면서 생기는 행 사이에 가로 점선을 깝니다. */
  .stats.stats--grid { grid-template-columns: repeat(2, 1fr); }
  .stats--grid .stat {
    border-bottom: 1px dotted color-mix(in srgb, var(--ink) 22%, transparent);
  }
  .stats--grid .stat:nth-child(2n) { border-right: none; }
  .stats--grid .stat:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    border-right: none;
  }
  .stats--grid .stat:last-child { border-bottom: none; }
}


/* ============================================================
   13. 가니시 파츠 추가 — 베리
   ------------------------------------------------------------
   05번 라이브러리의 연장입니다. 위치는 아래 --1 / --2 에
   정의해 두었고, 픽(.pick) 위 올리브가 놓이던 자리와 같습니다.
   ============================================================ */

/* ── 베리 — 알알이 뭉친 열매 ──────────────────
   요소 하나로 오돌토돌한 덩어리를 만듭니다.

   가운데 원(요소 본체) 둘레에 같은 색 원 7개를 box-shadow 로
   돌려 붙이는 방식입니다. 자식 요소를 쓰지 않으니 마크업이
   <div class="berry berry--1"></div> 한 줄로 끝나고,
   색은 --berry 하나만 갈아끼우면 전부 따라옵니다.

   좌표는 반지름 11px 원 위에 360/7 도씩 돌린 값입니다.
   spread -3px 은 24px 본체를 18px 알갱이로 줄이는 값이라,
   가운데가 알갱이보다 커서 덩어리가 하나로 뭉쳐 보입니다. */
.berry {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--berry, #C8102E);
  z-index: 9;
  box-shadow:
      0.0px -11.0px 0 -3px var(--berry, #C8102E),
      8.6px  -6.9px 0 -3px var(--berry, #C8102E),
     10.7px   2.4px 0 -3px var(--berry, #C8102E),
      4.8px   9.9px 0 -3px var(--berry, #C8102E),
     -4.8px   9.9px 0 -3px var(--berry, #C8102E),
    -10.7px   2.4px 0 -3px var(--berry, #C8102E),
     -8.6px  -6.9px 0 -3px var(--berry, #C8102E);
}

/* 픽에 꽂히는 자리 — .pick-orb--1 / --2 와 같은 중심점 */
.berry--1 { top: 46px; left: 104px; z-index: 8; }
.berry--2 { top: 68px; left: 134px; }


/* ── 소금 림 ──────────────────────────────────
   쓰는 곳: 마가리타 · 팔로마

   결정 하나하나는 페이지의 HTML 에 <i class="salt"> 로 흩뿌립니다.
   좌표는 극좌표로 뽑되 두 가지를 지켜야 소금으로 보입니다.
     · 각도 — 균등 분할 후 ±1.5도 지터. 정확히 등간격이면 점선이 된다.
     · 반지름 — 가우시안으로 흩기. 한 줄로 서면 붙인 것처럼 보인다.
   .cup 은 296x296 에 outline 16px 이므로 림 중심선은 반지름 156px.

   흰 림 위의 흰 결정은 그림자로만 읽히므로, 쓰는 페이지에서
   --glass-rim 을 반톤 눌러 줘야 합니다. (#EDEDE3 정도) */
.salt-rim {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.salt {
  position: absolute;
  display: block;
  background: var(--salt, #fff);
  box-shadow:
    0 0 0 .5px rgba(120, 130, 100, .18),
    0 1px 1.5px rgba(43, 43, 20, .22);
}

/* 일부 결정만 반짝인다. 전부 깜빡이면 산만하다 */
.salt--tw {
  animation: salt-twinkle 3.6s ease-in-out infinite;
  animation-delay: var(--d);
}

@keyframes salt-twinkle {
  0%, 100% { opacity: .45; }
  50%      { opacity: 1; }
}


/* ── 셀러리 줄기 ──────────────────────────────
   쓰는 곳: 블러디 메리

   시리즈의 다른 파츠와 같은 어휘로 그립니다. 즉 평평한 단색 면을
   나란히 붙일 뿐, 그러데이션으로 입체를 흉내 내지 않습니다.
   (라임 웨지도, 오렌지 휠도, 얼음도 전부 그렇게 그려져 있습니다.)

   줄기는 색면 세 장입니다.
     · 본체    — 가운데 밝은 초록
     · .edge   — 양옆에 붙는 어두운 초록 두 장 = 오목한 홈
   면과 면 사이에 중간톤을 두지 않는 것이 요점입니다. */
.celery {
  position: absolute;
  width: 28px;
  height: 234px;
  border-radius: 12px 12px 5px 5px;
  background: var(--celery, #B7D274);
}

/* 오목한 홈 — 왼쪽 */
.celery::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 8px;
  border-radius: 12px 0 0 5px;
  background: var(--celery-edge, #86A845);
}

/* 오목한 홈 — 오른쪽 */
.celery::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 6px;
  border-radius: 0 12px 5px 0;
  background: var(--celery-edge, #86A845);
}

/* 잘린 단면 — 줄기 안에 한 장 더 얹는다.
   ::before / ::after 를 홈에 썼으므로 요소로 둔다. */
.celery .cut {
  position: absolute;
  right: 4px;
  bottom: 4px;
  left: 4px;
  height: 8px;
  border-radius: 4px;
  background: var(--celery-cut, #E8F0CE);
  z-index: 2;
}

/* 잎 — 마주 보는 두 모서리만 둥글리면 잎사귀가 된다 */
.leaf {
  position: absolute;
  width: 34px;
  height: 22px;
  border-radius: 0 100% 0 100%;
  background: var(--leaf, #4E7A2A);
}
