@charset "utf-8";

/* ══════════════════════════════════════════════════════════
   Sushi On · 담백판(plain) 전용 · 처음 제안한 A안 계열
   크림 종이 · 모션 없음 · 사진 한 장.
   site.css 를 부르지 않는 독립 스타일이다 (남색판과 섞이면 안 됨).

   2026-08-25 2차: "흰색 말고 우리 색" 지시 반영.
   크림은 브랜드 BASE 라 종이로 유지하되, 남색 머리 · 중간 띠 · 꼬리로 지면을 감싼다.
   크림(첫 화면) → 사진 → 크림(가치·세트) → 남색(인기 롤·리뷰) → 크림(지점) → 남색(꼬리).
   괘선과 라벨도 회색 대신 금색으로 바꿔서 종이 위에서도 브랜드 색이 계속 보인다.

   토큰 근거: brand-spec.md — BASE #F0EADB · PRIMARY #274262 · ACCENT #C39D65
   크림 위에서 원 골드는 본문 대비가 1.9:1 밖에 안 나온다.
   그래서 종이 위 글자용 금색은 --gold-ink(4.9:1), 남색 위에서는 원 골드를 그대로 쓴다.
   ══════════════════════════════════════════════════════════ */

:root {
  /* 지면(종이)과 남색 위 글자색을 분리한다.
     --paper 는 Lauren 지시로 아이보리에서 황갈색 쪽으로 옮긴 값이다(금색 색상각 39도에서
     채도를 낮추고 명도만 올린 것). --rice 는 남색 위 글자용이라 원래 크림 그대로 둔다.
     톤을 조절하려면 --paper / --paper-dim 두 줄만 바꾸면 된다. */
  --paper:     #F0EADB;
  --paper-dim: #E7DFCC;
  --rice:     #F0EADB;
  --rice-dim: #E7DFCC;
  --navy:     #274262;
  --navy-deep:#1D3552;
  --navy-ink: #16283D;
  --gold:     #C39D65;
  --gold-soft:#D9BC8D;
  --gold-ink: #7C5E2C;
  --line:     rgba(39, 66, 98, 0.22);
  --line-soft:rgba(39, 66, 98, 0.14);
  --line-gold:rgba(124, 94, 44, 0.50);
  --muted:    rgba(22, 40, 61, 0.70);
  /* 종이 위 굵은 선은 진한 금색(--bar, 크림 대비 4.9:1). 원 금색(#C39D65)은 크림 위에서
     2.5:1 이라 선으로는 약하고 글자로는 못 쓴다. 원 금색은 남색 위에서만 쓴다.
     2026-08-26: 가격과 라벨을 --gold-ink(4.9:1)에서 남색(10:1)으로 올렸다.
     황갈 지면에서 금색 글자가 3.6:1 까지 떨어져 안 읽힌다는 지적이 있었고,
     크림으로 되돌린 뒤에도 작은 글자는 남색이 확실하다. 금색은 큰 제목의 이탤릭과
     괘선에만 남겨서 강조 역할만 하게 한다. */
  --bar:      #7C5E2C;

  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  --wrap: 1080px;
  --gut: clamp(20px, 5vw, 56px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  margin: 0; background: var(--paper); color: var(--navy-ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; top: -100px; left: 12px; z-index: 200;
  background: var(--navy); color: var(--rice); padding: 10px 16px; font-size: 14px;
}
.skip:focus { top: 12px; }

/* ── 머리 (남색) ─────────────────────────────────────────── */
.nav { background: var(--navy); }
.nav .wrap { display: flex; align-items: center; gap: 22px; min-height: 74px; flex-wrap: wrap; }
.nav .logo { width: 138px; flex-shrink: 0; }
.nav ul {
  list-style: none; display: flex; gap: clamp(16px, 2.4vw, 30px);
  margin: 0 0 0 auto; padding: 0;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
}
.nav ul a { color: rgba(240, 234, 219, 0.72); }
.nav ul a:hover, .nav ul a[aria-current] { color: var(--rice); }

.btn {
  display: inline-block; padding: 12px 22px; background: var(--navy); color: var(--rice);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
  min-height: 44px; line-height: 20px;
}
.btn:hover { background: var(--navy-ink); }
.btn.ghost { background: transparent; color: var(--navy); border: 1px solid var(--line-gold); }
.btn.ghost:hover { background: var(--paper-dim); border-color: var(--gold-ink); }

/* ── 첫 화면 (종이 위 글자만) ────────────────────────────── */
.top { padding: clamp(58px, 10vw, 122px) 0 clamp(44px, 7vw, 80px); }
/* 첫 화면 금색 막대는 뺐다. 표시가 없어도 제목이 충분히 앞선다 */
.top h1 {
  font-family: var(--serif); font-weight: 400; margin: 0;
  font-size: clamp(40px, 7.6vw, 82px); line-height: 1.06; letter-spacing: -0.02em;
  color: var(--navy);
}
.top h1 em { font-style: italic; color: var(--gold-ink); }
.top .sub {
  margin: 22px 0 0; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
}
.cta { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
.top .cta { margin-top: 30px; }

/* ── 사진 한 장 ──────────────────────────────────────────── */
/* 원본(3600x2400)에서 직접 자른 plain-shot 을 쓴다. 예전 hero-spread 는 아웃페인트본이라
   캔버스의 절반 남짓만 진짜 촬영 픽셀이어서 음식이 작아 보였다. */
.shot { margin: 0; }
.shot img { width: 100%; aspect-ratio: 1.55; object-fit: cover; }

/* ── 구간 ────────────────────────────────────────────────── */
.sec { padding: clamp(52px, 8vw, 96px) 0; }
.sec + .sec { padding-top: 0; }
.lab {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--navy); font-weight: 600; margin: 0 0 14px;
}
.sec h2 {
  font-family: var(--serif); font-weight: 400; margin: 0;
  font-size: clamp(27px, 4vw, 42px); line-height: 1.14; letter-spacing: -0.015em;
  color: var(--navy);
}
.sec > .wrap > p.lede { margin: 14px 0 0; max-width: 60ch; color: var(--muted); font-size: 15px; }
/* 구간 사이 괘선은 뺐다. .sec 패딩이 이미 구간을 갈라준다 */
.rule { display: none; }

/* 세 가지 가치 */
.vals { display: grid; gap: clamp(30px, 4.4vw, 52px); margin-top: clamp(34px, 4.4vw, 54px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.vals > div { padding-top: 2px; }
.vals h3 { font-family: var(--serif); font-weight: 400; font-size: 23px; margin: 0 0 8px;
  color: var(--navy); line-height: 1.2; }
.vals p { margin: 0; font-size: 14.5px; color: var(--muted); }

/* 활자 목록 */
.list { list-style: none; margin: clamp(26px, 4vw, 40px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  column-gap: clamp(32px, 5vw, 68px); }
/* 행마다 밑줄을 깔면 점선과 겹쳐 두 겹이 된다. 점선만 남긴다 */
.list li { display: flex; align-items: baseline; gap: 13px; padding: 13px 0; }
.list b { font-family: var(--serif); font-weight: 400; font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.22; color: var(--navy); }
.list i { flex: 1 1 auto; min-width: 16px; height: 1px;
  background: rgba(124, 94, 44, 0.45); }
.list span { flex-shrink: 0; font-size: 14px; color: var(--navy);
  font-variant-numeric: tabular-nums; }
.more { margin: 26px 0 0; font-size: 14px; }
.more a { color: var(--navy); border-bottom: 1px solid var(--bar);
  padding-bottom: 2px; }
.more a:hover { color: var(--navy-ink); border-color: var(--navy-ink); }

/* ── 남색 띠 (인기 롤 + 리뷰) ────────────────────────────── */
.band { background: var(--navy); color: var(--rice); padding: clamp(52px, 8vw, 96px) 0; }
.band .lab { color: var(--gold); }
.band h2 { font-family: var(--serif); font-weight: 400; margin: 0;
  font-size: clamp(27px, 4vw, 42px); line-height: 1.14; letter-spacing: -0.015em;
  color: var(--rice); }
.band p.lede { margin: 14px 0 0; max-width: 60ch; font-size: 15px;
  color: rgba(240, 234, 219, 0.74); }
.band .rule { display: none; }
.band .rev { margin-top: clamp(46px, 7vw, 78px); }

/* ── 인기 롤 순위 ────────────────────────────────────────
   전에는 이름을 크게 흩뿌리는 방식(.names)이었는데 줄바꿈이 들쭉날쭉하고
   가격이 이름 뒤에 조각처럼 붙어 읽기 어려웠다. 한 줄에 하나씩,
   번호와 가격을 세로로 맞춘 순위표로 바꾼다. 이름은 크게 남겨서
   사진이 적은 이 판의 볼거리 역할은 유지한다. */
.rank {
  list-style: none; margin: clamp(28px, 4vw, 42px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  column-gap: clamp(34px, 5vw, 76px);
}
.rank li { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; }
.rank .rn {
  flex: 0 0 26px; font-family: var(--serif); font-size: 14px; line-height: 1;
  color: var(--gold); font-variant-numeric: tabular-nums;
}
.rank b {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(21px, 2.3vw, 29px); line-height: 1.2; letter-spacing: -0.015em;
  color: var(--rice);
}
.rank i { flex: 1 1 auto; min-width: 18px; height: 1px; background: rgba(240, 234, 219, 0.2); }
.rank .rp {
  flex-shrink: 0; font-size: 13px; color: var(--gold); font-variant-numeric: tabular-nums;
}
.rank a { display: contents; }
.rank li:hover b { color: var(--gold-soft); }

.rev { display: grid; gap: clamp(30px, 5vw, 60px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: center; }
.rev blockquote { margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(23px, 3.2vw, 33px); line-height: 1.28; letter-spacing: -0.01em; }
.rev cite { display: block; margin-top: 16px; font-style: normal;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(240, 234, 219, 0.62); }
.rev .stats { display: flex; gap: clamp(22px, 4vw, 46px); flex-wrap: wrap; }
.rev .stats b { display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(30px, 4.4vw, 44px); line-height: 1; color: var(--rice); }
.rev .stats i { font-style: normal; font-size: 0.5em; color: var(--gold); margin-left: 3px; }
.rev .stats span { display: block; margin-top: 8px; font-size: 12px;
  color: rgba(240, 234, 219, 0.66); line-height: 1.5; }
.rev .links { margin: 18px 0 0; font-size: 13px; display: flex; gap: 20px; flex-wrap: wrap; }
.rev .links a { color: var(--gold); border-bottom: 1px solid rgba(195, 157, 101, 0.45);
  padding-bottom: 2px; }
.rev .links a:hover { color: var(--rice); border-color: var(--rice); }

/* ── 지점 ────────────────────────────────────────────────── */
.locs { display: grid; gap: clamp(30px, 4vw, 48px); margin-top: clamp(32px, 4vw, 48px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.loc { padding-top: 2px; }
.loc h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; margin: 0 0 4px;
  color: var(--navy); line-height: 1.2; }
.loc .soon { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--navy); font-weight: 600; }
.loc p { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.loc .act { margin-top: 16px; display: flex; gap: 9px; flex-wrap: wrap; }
.loc .act a { font-size: 11px; padding: 11px 15px; min-height: 44px; line-height: 22px; }
.loc a[href^="tel:"] { white-space: nowrap; }

/* ── 꼬리 (남색) ─────────────────────────────────────────── */
.foot { background: var(--navy); color: var(--rice);
  padding: clamp(44px, 6vw, 68px) 0 34px; margin-top: clamp(48px, 7vw, 84px); }
/* 남색 띠 바로 뒤에 꼬리가 오면 사이에 크림 줄이 생긴다 (소개 페이지).
   띠는 <main> 안이고 꼬리는 밖이라 인접 선택자로는 못 잡아서 빌더가 클래스를 붙인다 */
.foot.tight { margin-top: 0; }
.foot .grid { display: grid; gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.foot .logo { width: 124px; margin-bottom: 14px; }
.foot p { margin: 0; font-size: 13.5px; color: rgba(240, 234, 219, 0.72); max-width: 34ch; }
.foot h4 { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 12px; font-weight: 600; }
.foot ul { list-style: none; margin: 0; padding: 0; font-size: 13.5px;
  color: rgba(240, 234, 219, 0.72); }
.foot ul li { margin-bottom: 9px; }
.foot ul b { font-weight: 600; color: var(--rice); }
.foot ul a:hover { color: var(--gold-soft); }
.fine { margin-top: 38px;
  display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap;
  font-size: 12px; color: rgba(240, 234, 219, 0.55); }

/* ── 소개 ────────────────────────────────────────────────
   사진과 글을 붙여 한 덩어리로 만들고 그 덩어리를 한쪽으로 몬다. 남는 쪽은 비워 둔다.
   전에는 사진을 오른쪽 끝으로 보내 둘이 멀리 떨어져 있었다.
   오른쪽으로 몰려면 .abgroup 의 margin 을 auto 0 0 auto 로 바꾸면 된다. */
.abgroup {
  display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: clamp(26px, 3.4vw, 46px); align-items: start;
  max-width: 960px; margin: clamp(28px, 4vw, 42px) auto 0 0;
}
/* 자를 위치는 자산(about-chirashi-tall)을 만들 때 이미 정했다. 자산도 4:5 라 여기서
   object-position 으로 또 자르지 않는다. 두 번 자르면 위치를 옮길 때 결과가 예측이 안 된다 */
.abfig { margin: 0; }
.abfig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.abtext .lead {
  font-family: var(--serif); font-weight: 400; color: var(--navy);
  font-size: clamp(20px, 2vw, 25px); line-height: 1.36; letter-spacing: -0.01em;
  margin: 0 0 20px;
}
.abtext p { margin: 0 0 16px; font-size: 15.5px; color: var(--muted); }
.abtext p:last-child { margin-bottom: 0; }

/* 글 칸 안, 문단 아래에 세운다. 사진이 세로라 글이 그만큼 길어야 아래가 안 빈다.
   아이콘은 단어 옆으로 눕혀 한 항목이 두 줄에 들어가게 한다 */
.valslead {
  margin: clamp(26px, 3.4vw, 34px) 0 0 !important;
  font-size: 13.5px !important; color: var(--muted); max-width: 40ch;
}
.vals.words {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px) clamp(18px, 2.4vw, 30px);
  margin: clamp(16px, 2vw, 22px) 0 0;
}
.vals.words .val { display: block; }
.vals.words .pic {
  width: 22px; height: 22px; color: var(--bar);
  display: inline-block; vertical-align: -4px; margin: 0 10px 0 0;
}
.vals.words b {
  display: inline; font-family: var(--serif); font-weight: 400;
  font-size: clamp(19px, 1.9vw, 23px); line-height: 1.2; color: var(--navy);
}
.vals.words span {
  display: block; margin-top: 2px; font-size: 13px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* 폰에서도 2x2 를 유지한다. 380 아래에서만 한 줄로 떨어뜨린다 */
@media (max-width: 380px) { .vals.words { grid-template-columns: 1fr; } }

@media (max-width: 760px) {
  .abgroup { grid-template-columns: 1fr; max-width: none; gap: clamp(22px, 5vw, 30px); }
  .abfig img { aspect-ratio: 1 / 1; }
}

/* ── 그림기호 ────────────────────────────────────────────
   assets/icons/*.svg 를 인라인으로 박는다. currentColor 라 지면에 따라 색이 따라온다.
   사진이 한 장뿐인 판이라 아이콘이 유일한 볼거리가 된다. 크기를 아끼지 않는다. */
.vals .pic { width: 40px; height: 40px; color: var(--bar); margin: 0 0 16px; }
.loc .facts li { align-items: flex-start; }
.loc .facts .fic { width: 16px; height: 16px; color: var(--bar); margin-top: 3px; }
.gtitle { display: flex; align-items: center; gap: 13px; }
.gtitle .gic { flex: 0 0 30px; width: 30px; height: 30px; color: var(--bar); }
@media (max-width: 720px) {
  .gtitle .gic { flex-basis: 26px; width: 26px; height: 26px; }
}

/* ── 손가락 크기 (2026-08-27 모바일 점검) ────────────────
   상단 차림표 글자가 15px 높이라 폰에서 누르기 어려웠다. 글자 크기는 그대로 두고
   누르는 상자만 44px 로 키운다. 로고와 전화번호도 같이. */
.nav ul a { display: inline-flex; align-items: center; min-height: 44px; }
.nav .logo { display: inline-flex; align-items: center; min-height: 44px; }
.foot ul a, .foot ul a[href^="tel:"] { display: inline-block; padding: 11px 0; }
.foot ul li { margin-bottom: 0; }
.more a, .note a, .rev .links a { display: inline-block; padding: 11px 0; }
.skip { display: inline-block; min-height: 44px; }

/* ── 메뉴 페이지 ─────────────────────────────────────────── */
/* 구간 이동 바. 스크롤해도 화면 위에 붙어 있어야 하므로 .wrap 안에 두면 안 된다.
   sticky 는 부모 박스 안에서만 붙는데 .wrap 은 머리글 높이밖에 안 돼서 바로 흘러가 버린다. */
.menubar {
  position: sticky; top: 0; z-index: 60; background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.menubar .chips { max-width: var(--wrap); margin: 0 auto; padding: 11px var(--gut); }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex-shrink: 0; padding: 11px 14px; border: 1px solid var(--line-gold); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); white-space: nowrap;
  min-height: 44px; line-height: 22px; }
.chip:hover { border-color: var(--navy); color: var(--navy); }
.chip.on { border-color: var(--navy); color: var(--navy); background: var(--paper-dim); }
.chip.pdf { background: var(--navy); border-color: var(--navy); color: var(--rice); }
.chip.pdf:hover { background: var(--navy-ink); color: var(--rice); }
.chip.pdf svg { width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; }

/* 지점 영업중 표시 · 남색판과 같은 규칙(data-hours 를 읽어 점 색과 문구를 바꾼다) */
.loc .stat {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 6px;
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
  color: var(--navy);
}
.loc .stat .dot { width: 7px; height: 7px; border-radius: 50%; background: #2F7D57;
  flex-shrink: 0; }
.loc .stat .dot.shut { background: rgba(22, 40, 61, 0.38); }
.loc .stat .dot.soon { background: var(--bar); }
/* 아이콘 한 칸, 값 한 칸. display:contents 로 li 를 걷어내야 카드끼리 줄이 맞는다 */
.loc .facts {
  margin: 14px 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: 16px 1fr; column-gap: 11px; row-gap: 11px;
  align-items: start; font-size: 14px; color: var(--muted);
}
.loc .facts li { display: contents; }
.loc .hline { display: flex; gap: 8px; }
.loc .hline + .hline { margin-top: 3px; }
.loc .hline i { flex: 0 0 auto; min-width: 104px; white-space: nowrap;
  font-style: normal; color: var(--navy); font-weight: 500; }
.mgrid { display: grid; gap: clamp(28px, 4vw, 52px); margin-top: 26px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.mcat.wide { grid-column: 1 / -1; }
.mcat.wide .rows { columns: 2; column-gap: clamp(32px, 5vw, 64px); }
.mcat .rows .mrow { break-inside: avoid; }
.mcat h3 { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--navy); margin: 0 0 16px; font-weight: 600;
  padding-bottom: 11px; border-bottom: 1px solid var(--bar); }
.mrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 11px; padding: 11px 0; }
.mrow b { font-weight: 500; font-size: 15px; color: var(--navy-ink); }
.mrow i { flex: 1; height: 1px; background: rgba(124, 94, 44, 0.45); }
.mrow span { font-size: 15px; color: var(--navy); font-variant-numeric: tabular-nums;
  flex-shrink: 0; }
.mrow .desc { flex-basis: 100%; font-size: 13px; color: var(--muted); margin-top: 2px; }
.mrow .plines { display: flex; flex-direction: column; gap: 3px; text-align: right; }
.mrow .pline { font-size: 15px; color: var(--navy); font-variant-numeric: tabular-nums;
  white-space: nowrap; display: flex; justify-content: flex-end; align-items: baseline; gap: 7px; }
.mrow .pline em { font-style: normal; font-size: 12px; color: var(--muted); }
.note { margin-top: 28px; font-size: 13px; color: var(--muted); }
.note a { color: var(--navy); border-bottom: 1px solid var(--bar); }

@media (max-width: 720px) {
  .mcat.wide .rows { columns: 1; }
  .nav .wrap { min-height: 64px; }
  .nav .logo { width: 118px; }
  /* 세로 화면에는 가로 사진을 cover 로 깔지 않는다. 원본에서 딴 세로컷을 따로 준다 */
  .shot img { aspect-ratio: 0.95; }
}