@charset "utf-8";

/* ══════════════════════════════════════════════════════════
   Sushi On · 미니멀판(minimal) · 세 번째 드래프트 2026-10-19
   plain.css 위에 덮는다. 메뉴 · 소개 본문은 담백판 스타일 그대로 쓰고,
   여기서는 머리 · 꼬리 · 메인 첫 화면 · 갤러리만 새로 잡는다.

   사장님 메인 시안: 크림 종이 · 잎 그림자 · 가운데 워드마크 · 자간 넓은 작은 대문자.
   시안의 회백색 대신 브랜드 BASE(#F0EADB), 글자는 남색. 워드마크는 재조판하지 않고
   로고 SVG 를 그대로 쓴다(brand-spec §2).
   ══════════════════════════════════════════════════════════ */

:root { --track: 0.32em; }

/* ── 머리 ───────────────────────────────────────── */
.mnav.home { justify-content: flex-end; }
.mnav {
  position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px var(--gut); flex-wrap: wrap;
}
.mlogo { display: inline-flex; align-items: center; min-height: 44px; }
.mlogo img { width: 104px; height: auto; }
.mnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px clamp(16px, 2.6vw, 34px); }
.mnav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 11.5px; font-weight: 500; letter-spacing: var(--track); color: var(--navy);
}
.mnav a[aria-current] { border-bottom: 1px solid var(--navy); }
.mnav a:hover { opacity: 0.6; }

/* ── 메인 첫 화면 ─────────────────────────────────── */
.paper {
  position: relative; overflow: hidden; min-height: 100svh;
  display: flex; flex-direction: column;
  background-color: var(--paper);
  /* 종이 결. 아주 옅은 노이즈만 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .15 0 0 0 0 .2 0 0 0 0 .3 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ── 지면 후보 (build_minimal.TONES) ── */
.paper.dark .mnav a, .paper.dark .tag, .paper.dark .since { color: var(--rice); }
.paper.dark .down i, .paper.dark .hero h1 .logo { color: var(--rice); }
.paper.dark .mnav a[aria-current] { border-color: var(--rice); }
/* 먹색 슬레이트: 메뉴북 재질. 결이 강해서 남색을 살짝 덮어 브랜드 쪽으로 당긴다 */
.paper.slate { background: #1B1E22 url("img/slate-1600.webp") center / 100% auto; }
.paper.slate::before { content: ""; position: absolute; inset: 0; background: rgba(22, 40, 61, 0.45); }
.paper.slate > * { position: relative; }
/* 크림과 남색: 아래 30% 를 남색으로. 경계선이 수평선이 된다 */
.sea { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: var(--navy); }
.paper.split .down i { color: var(--rice); }
.paper.split .down { position: relative; }

.paper main { flex: 1; display: flex; }
.hero {
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 var(--gut);
}
.hero .mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tag {
  margin: 0 0 clamp(34px, 6vh, 56px);
  font-size: 12px; line-height: 2.2; font-weight: 500; letter-spacing: 0.42em;
  text-transform: uppercase; color: var(--navy); padding-left: 0.42em;
}
.hero h1 { margin: 0; line-height: 0; }
.hero h1 .logo { display: block; width: clamp(220px, 34vw, 460px); height: auto; color: var(--navy); overflow: visible; }
.since {
  margin: clamp(22px, 3.4vh, 32px) 0 0;
  font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--navy);
}
.down { display: block; padding: 0 22px 30px; }
/* 세로선 하나. 그 안에서 짧은 빛이 위에서 아래로 흘러내린다 */
.down i {
  position: relative; display: block; width: 1px; height: 64px; overflow: hidden;
  background: currentColor; opacity: 0.35; color: var(--navy);
}
.down i::after {
  content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%;
  background: currentColor; animation: drip 2.4s cubic-bezier(.6,0,.3,1) 2.2s infinite;
}
.down:hover i { opacity: 0.7; }
@keyframes drip { from { top: -40%; } to { top: 100%; } }

/* ── 메인 아래 ──────────────────────────────────── */
.mintro {
  max-width: 640px; margin: 0 auto; padding: clamp(80px, 14vh, 140px) var(--gut) clamp(60px, 10vh, 100px);
  text-align: center;
}
.mintro p {
  margin: 0; font-family: var(--serif); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.38;
  color: var(--navy); text-wrap: balance;
}
.mintro .links, .mloc .act {
  margin-top: 34px; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 30px;
  font-family: var(--sans); font-size: 11.5px; line-height: 1; font-weight: 500;
  letter-spacing: var(--track); text-transform: uppercase;
}
.mintro .links a, .mloc .act a {
  display: inline-flex; align-items: center; min-height: 44px;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.mintro .links a:hover, .mloc .act a:hover { border-color: var(--navy); }

.mlocs {
  max-width: 1200px; margin: 0 auto; padding: 0 var(--gut) clamp(80px, 12vh, 130px);
  scroll-margin-top: 20px;
}
.mlocs h2, .ghead h1, .ggroup h2 {
  margin: 0; text-align: center; font-family: var(--sans); font-weight: 500;
  font-size: 12px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--navy);
}
.mlocs .row {
  margin-top: 44px; display: grid; gap: 0 28px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-soft); padding-top: 40px;
}
/* 이름 · 영업중 · 주소 · 시간 · 주문 · 버튼 여섯 줄을 subgrid 로 묶어 카드끼리 높이를 맞춘다.
   시간이 두 줄인 곳, 세 줄인 곳, 없는 곳(오픈 예정)이 섞여도 버튼 줄이 한 높이에 선다 */
.mloc {
  text-align: center; display: grid; grid-row: span 6;
  grid-template-rows: subgrid; row-gap: 0; align-content: start;
}
.mloc > * { margin: 0; }
.mloc .addr { padding-bottom: 14px; }
.mloc h3 { margin: 0; padding-bottom: 14px; font-family: var(--serif); font-weight: 400; font-size: 28px; color: var(--navy); }
.mloc p { font-size: 14.5px; color: var(--muted); }
/* 영업시간 표: 요일 왼쪽, 시간 오른쪽. 오늘 줄만 진하게 */
.mloc .hrs { margin: 0 auto; border-collapse: collapse; font-size: 13.5px; color: var(--muted); }
.mloc .hrs th, .mloc .hrs td { padding: 5px 0; text-align: left; font-weight: 400; white-space: nowrap; }
.mloc .hrs th { padding-right: 18px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); opacity: 0.7; }
.mloc .hrs tr.today th, .mloc .hrs tr.today td { color: var(--navy); opacity: 1; font-weight: 600; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* 지금 영업 중 표시. 열려 있으면 초록 불이(Lauren 2026-10-19, 신호등 의미라 브랜드 녹색 제외 규칙의 예외) 켜지고 천천히 숨쉰다. 닫혀 있으면 빈 동그라미 */
.mloc .now {
  display: flex; align-items: center; justify-content: center; gap: 9px; padding-bottom: 16px;
  font-size: 12.5px; color: var(--muted);
}
.mloc .now .dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--muted); box-sizing: border-box;
}
.mloc .now.open { color: var(--navy); font-weight: 500; }
.mloc .now.open .dot {
  border: 0; background: #2FA35B;
  box-shadow: 0 0 0 3px rgba(47, 163, 91, 0.22), 0 0 12px 2px rgba(47, 163, 91, 0.6);
  animation: glow 2.4s ease-in-out infinite;
}
.mloc .now.soon .dot { border-style: dashed; }
.mloc .now.soon { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--navy); }
@keyframes glow {
  50% { box-shadow: 0 0 0 5px rgba(47, 163, 91, 0.1), 0 0 18px 4px rgba(47, 163, 91, 0.4); }
}
@media (prefers-reduced-motion: reduce) { .mloc .now.open .dot { animation: none; } }
.mloc .act { margin-top: 0; padding-top: 18px; flex-direction: column; align-items: center; gap: 2px; align-self: start; }
.mloc .act .ph { visibility: hidden; display: inline-flex; align-items: center; min-height: 44px; }
.mloc a[href^="tel:"] { white-space: nowrap; }

/* ── 메인: 메뉴 픽토그램 · 인기 순위 · 리뷰 수 ── */
.mcats, .mrank, .mcount { max-width: 1080px; margin: 0 auto; padding: 0 var(--gut) clamp(80px, 12vh, 130px); text-align: center; }
.mcats h2, .mrank h2 {
  margin: 0; font-family: var(--sans); font-weight: 500; font-size: 12px;
  letter-spacing: 0.42em; text-transform: uppercase; color: var(--navy);
}
.cats {
  margin-top: 40px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.cats a {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 34px 8px 30px; color: var(--navy); transition: background .25s;
}
.cats a + a { border-left: 1px solid var(--line-soft); }
.cats a:hover { background: var(--paper-dim); }
.cats .cic { width: 48px; height: 48px; }
.cats span { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; }
.mrank .note { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.mrank ol { list-style: none; margin: 36px auto 0; padding: 0; max-width: 560px; text-align: left; }
.mrank li {
  display: flex; align-items: baseline; gap: 16px; padding: 15px 0;
  border-bottom: 1px solid var(--line-soft);
}
.mrank .rn { font-size: 11px; letter-spacing: 0.2em; color: var(--muted); }
.mrank b { font-family: var(--serif); font-weight: 400; font-size: 24px; color: var(--navy); }
.mrank li i { flex: 1; }
.mrank .rp { font-size: 14px; color: var(--navy); }
.mrank .links {
  margin-top: 34px; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 30px;
  font-size: 11.5px; font-weight: 500; letter-spacing: var(--track); text-transform: uppercase;
}
.mrank .links a { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--line); }
.mcount p { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--navy); }
.mcount b { font-family: var(--serif); font-weight: 400; font-size: clamp(56px, 8vw, 96px); line-height: 1; }
.mcount span { font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; }
@media (max-width: 720px) {
  .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cats a:nth-child(4) { border-left: 0; }
  .cats a:nth-child(n+4) { border-top: 1px solid var(--line-soft); }
  .mrank b { font-size: 20px; }
}

/* ── 꼬리 ───────────────────────────────────────── */
.mfoot {
  border-top: 1px solid var(--line-soft); text-align: center;
  padding: 54px var(--gut) 40px; color: var(--navy);
}
.mfoot img { margin: 0 auto 26px; }
.mfoot ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 40px; }
.mfoot li { font-size: 13px; display: flex; flex-direction: column; align-items: center; }
.mfoot b { font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; font-size: 11px; }
.mfoot li a, .mfoot li span { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); white-space: nowrap; }
.mfoot p { margin: 28px 0 0; font-size: 11.5px; color: var(--muted); }

/* ── 갤러리 ──────────────────────────────────────── */
.gmain { padding: clamp(40px, 7vh, 72px) var(--gut) clamp(60px, 10vh, 100px); max-width: 1400px; margin: 0 auto; }
.ghead { text-align: center; margin-bottom: clamp(40px, 7vh, 70px); }
.gchips { margin-top: 18px; display: flex; justify-content: center; gap: 4px 28px; flex-wrap: wrap; }
.gchips a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--navy);
  border-bottom: 1px solid transparent;
}
.gchips a:hover { border-color: var(--navy); }
.ggroup { scroll-margin-top: 20px; }
.ggroup + .ggroup { margin-top: clamp(60px, 10vh, 110px); }
.ggroup h2 { margin-bottom: 28px; }
/* 사진 비율이 제각각이라 자르지 않고 세로 단으로 흘린다 */
.shots { columns: 3 320px; column-gap: 14px; }
.shots a { display: block; margin: 0 0 14px; break-inside: avoid; cursor: zoom-in; }
.shots img { width: 100%; height: auto; background: var(--paper-dim); }
.viewer {
  padding: 0; border: 0; background: transparent; max-width: 94vw; max-height: 94vh; cursor: zoom-out;
}
.viewer::backdrop { background: rgba(22, 40, 61, 0.92); }
.viewer img { max-width: 94vw; max-height: 94vh; width: auto; height: auto; }

/* ── 소개(사진 없는 판) ───────────────────────────── */
.abgroup.nofig { grid-template-columns: minmax(0, 640px); }

/* ── 폰 ─────────────────────────────────────────── */
@media (max-width: 720px) {
  .mnav { padding: 14px var(--gut); justify-content: center; }
  .mlogo { width: 100%; justify-content: center; }
  .mnav ul { justify-content: center; gap: 0 16px; }
  .mnav a { font-size: 10.5px; letter-spacing: 0.22em; }
  .tag { font-size: 11px; }
}

/* ── 미리보기 전용 배경 고르기 (PICK). 납품 때는 마크업째 빠진다 ── */
.pick {
  position: fixed; z-index: 90; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 16px;
  background: #fff; color: var(--navy-ink); border-radius: 999px;
  box-shadow: 0 4px 20px rgba(22, 40, 61, 0.22);
  font: 500 13px/1 "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif;
}
.pick span { margin-right: 6px; white-space: nowrap; }
.pick button { white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px; min-height: 40px; min-width: 44px;
  padding: 0 14px; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.pick button small { font-size: 10.5px; color: var(--gold-ink); }
.pick button[aria-pressed="true"] { background: var(--navy); color: var(--rice); border-color: var(--navy); }
.pick button[aria-pressed="true"] small { color: var(--gold-soft); }

/* 지점 칸: 넓으면 4칸, 중간 2칸, 폰 1칸 */
@media (max-width: 1080px) { .mlocs .row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; } }
@media (max-width: 600px)  { .mlocs .row { grid-template-columns: 1fr; } }

/* ── 랜딩 모션 (한 번만, 약 2초) ───────────────────────
   로고에서 온 동작만 쓴다: 밑줄이 가운데서 양쪽으로 그어지고, 원이 그 선 위로 떠오른다(해돋이).
   글자 · 태그라인 · 메뉴는 뒤따라 옅게 들어온다. 줄이기 설정이면 전부 끈다 */
.l-line { transform-box: fill-box; transform-origin: 50% 50%; animation: drawline 0.9s cubic-bezier(.65,0,.35,1) 0.15s both; }
.l-sun  { animation: rise 1.1s cubic-bezier(.2,.7,.2,1) 0.75s both; }
.l-word { animation: fadeup 0.9s ease-out 1.05s both; }
.tag    { animation: track 1.4s cubic-bezier(.2,.7,.2,1) 0.3s both; }
.since  { animation: fade 0.9s ease-out 1.5s both; }
.paper .mnav, .down { animation: fade 1s ease-out 1.7s both; }
.sea    { transform-origin: 50% 100%; animation: tide 1.2s cubic-bezier(.65,0,.35,1) 0s both; }
.paper.slate { animation: settle 2.6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes drawline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rise   { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fadeup { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes track  { from { letter-spacing: 0.75em; opacity: 0; } to { letter-spacing: 0.42em; opacity: 1; } }
@keyframes fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes tide   { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes settle { from { background-size: 112% auto; } to { background-size: 100% auto; } }
@media (prefers-reduced-motion: reduce) {
  .l-line, .l-sun, .l-word, .tag, .since, .paper .mnav, .down, .sea, .paper.slate, .down i::after { animation: none !important; }
}
/* 한 줄에 한 지점씩 쌓이는 폰에서는 옆 칸과 높이를 맞출 일이 없다. 메트로타운 빈칸을 접는다 */
@media (max-width: 600px) { .mloc .ph, .mloc div.hrs { display: none; } }

/* ── '보내주신 영상' 모션 (op-video) ─────────────────────────
   DK 사장님 로고 영상의 흐름을 SVG 부품으로 다시 짠 것. 좌표는 로고 viewBox(360.47x110.78) 기준.
   원 중심 (293.56, 64.21) · 로고 상자 중심 (180.2, 55.4).
   1막(0~3.2초) l-intro: 상자 가운데에 1.5배 심볼. 연기 → 원이 돌며 나타남 → 윗호 → 밑줄 양옆 → 사라짐
   2막(3.3~5.5초) 진짜 로고: 왼쪽부터 밑줄이 그어지며 글자 → 오른쪽 원이 돌며 맺힘 → 짧은 밑줄 → 윗호 */
.l-intro { display: none; }
.op-video .hero .logo .l-word, .op-video .hero .logo .l-sun, .op-video .hero .logo .l-line { animation: none; }
.op-video .hero .logo * { transform-box: view-box; }
.op-video .l-intro { display: inline; transform-origin: 293.56px 64.21px;
  transform: translate(-113.36px, -8.81px) scale(1.5); animation: so-out .4s ease-in 2.75s both; }
.op-video .l-smoke { opacity: 0; transform-origin: 293.56px 64.21px; animation: so-smoke 2.7s ease-out 0.05s both; }
.op-video .i-ring, .op-video .p-ring { transform-origin: 293.56px 64.21px; }
.op-video .i-ring { animation: so-turn 1.2s cubic-bezier(.2,.7,.2,1) 0.25s both; }
.op-video .i-arc  { animation: so-rise .8s cubic-bezier(.2,.7,.2,1) 1.3s both; }
.op-video .i-lr   { transform-origin: 266.5px 0; animation: so-draw .6s cubic-bezier(.65,0,.35,1) 1.95s both; }
/* 1막 왼쪽 밑줄은 원 왼쪽 끝까지만(오른쪽 토막과 대칭, x 226.6 부터) */
.op-video .i-ll   { transform-origin: 252.7px 0; animation: so-draw-l .6s cubic-bezier(.65,0,.35,1) 1.95s both; }
.op-video .p-ll   { transform-origin: 0 0; animation: so-draw 1.3s cubic-bezier(.45,0,.25,1) 3.1s both; }
.op-video .p-ch   { animation: so-ch .5s cubic-bezier(.2,.7,.2,1) calc(3.15s + var(--i) * 0.14s) both; }
.op-video .p-ring { animation: so-turn 1s cubic-bezier(.2,.7,.2,1) 4.2s both; }
.op-video .p-lr   { transform-origin: 266.5px 0; animation: so-draw .45s cubic-bezier(.65,0,.35,1) 4.55s both; }
.op-video .p-arc  { animation: so-rise .7s cubic-bezier(.2,.7,.2,1) 4.75s both; }
.op-video .since  { animation-delay: 5.4s; }
@keyframes so-out    { from { opacity: 1; } to { opacity: 0; } }
@keyframes so-smoke  { 0% { opacity: 0; transform: scale(.8) rotate(0deg); } 30% { opacity: .42; }
                       100% { opacity: 0; transform: scale(1.4) rotate(60deg); } }
@keyframes so-turn   { from { opacity: 0; transform: scaleX(.18); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes so-rise   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes so-draw   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes so-draw-l { from { transform: scaleX(0); } to { transform: scaleX(.1032); } }
@keyframes so-ch     { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .op-video .hero .logo *, .op-video .since { animation: none !important; }
  .op-video .l-intro { display: none; }
}

/* 지점별 주문 버튼 (2026-11-11). 카드마다 자기 지점 주문으로만 간다 */
.mloc .order {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  justify-self: center; align-self: start; margin-top: 24px; padding: 10px 22px; background: var(--navy); color: var(--paper);
  font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: var(--track);
  text-transform: uppercase; text-align: center; line-height: 1.5; max-width: 100%;
  transition: opacity .2s;
}
.mloc .order:hover { opacity: .85; }
.mloc .order.ph { visibility: hidden; }