/* ⑬ 하루 종일 매출 — 흰 제목(382) + 낮/밤 대각선 분할(696) (시안 y 11560~12638, 높이 1078) */
.s13 {
  --s13-green: #005633;
  --s13-night-bg: #17150f;
  --s13-night-text: #eae9e9;
  --s13-desc: #1f1c0d;
  background: var(--c-white);
  color: #000;
}
.s13-title { color: #000; }
.s13-green { color: var(--s13-green); }
.s13-sub { color: #111; letter-spacing: -0.05em; }
.s13-kanji { margin: 0; line-height: 1; letter-spacing: 0; user-select: none; }
.s13-kanji-day { color: var(--s13-green); }
.s13-kanji-night { color: var(--c-khaki); }
.s13-when { font: 700 40px/1.2 var(--f-body); letter-spacing: -0.05em; }
.s13-day .s13-when { color: #000; }
.s13-day .s13-desc { color: var(--s13-desc); }
.s13-night .s13-when { color: #fff; }
.s13-night .s13-desc { color: var(--s13-night-text); }
.s13-desc { letter-spacing: -0.05em; }
.s13-pot, .s13-room { position: absolute; top: 0; max-width: none; }
.s13-room { clip-path: polygon(13.49% 0, 100% 0, 100% 100%, 0.38% 100%); }
/* 10-27 힉스필드 52번 야간 매장 반복 영상 — PC는 매장 사진 자리(대각선 그대로), 좁은 화면은 夜 판 배경. 원래 사진은 밑에 남겨 둠 */
.s13-vis > video.loopv { position: absolute; top: 0; max-width: none; object-fit: cover; clip-path: polygon(13.49% 0, 100% 0, 100% 100%, 0.38% 100%); }
.s13-staged { position: absolute; z-index: 5; right: 12px; bottom: 10px; font-size: 11px; line-height: 1; font-weight: 400; letter-spacing: 0; color: rgba(255, 255, 255, .6); text-shadow: 0 1px 2px rgba(0, 0, 0, .5); pointer-events: none; user-select: none; }

/* 1일 최대 회전율 원 + 초록 라인 채우기 */
.s13-ring { border-radius: 50%; background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); text-align: center; color: #000; }
.s13-arc { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.s13-arc circle { fill: none; stroke-width: 11; }
.s13-arc-bg { stroke: none; }
.s13-arc-fg { stroke: var(--s13-green); stroke-dasharray: 34 100; stroke-linecap: butt; }
.js .s13-ring.in .s13-arc-fg { animation: s13-fill 1.6s cubic-bezier(.3,.6,.2,1) .2s both; }
@keyframes s13-fill { from { stroke-dasharray: 0 100; } to { stroke-dasharray: 34 100; } }
.js .s13-ring.in .s13-ring-v { animation: s13-hit .7s ease-out 1.5s both; }
@keyframes s13-hit { 0% { transform: none; } 40% { transform: scale(1.1); color: var(--s13-green); } 100% { transform: none; } }
.s13-ring-k { font: 700 26px/1.2 var(--f-body); letter-spacing: -0.05em; }
.s13-ring-v { font-size: 86px; line-height: 1; letter-spacing: -0.05em; }

/* ---------- PC: 시안 좌표 (가운데 960 기준) ---------- */
@media (min-width: 1280px) {
  .s13 { height: 1078px; }
  .s13-head { position: absolute; left: 0; right: 0; top: 140px; text-align: center; }
  .s13-title { font-size: 59px; line-height: 72px; letter-spacing: -0.02em; }
  .s13-sub { margin-top: 19px; font-size: 20px; line-height: 30px; }
  .s13-band {
    position: absolute; left: 0; right: 0; top: 382px; height: 696px;
    background:
      linear-gradient(90deg, transparent calc(50% + 40px), var(--s13-night-bg) calc(50% + 40px)),
      repeating-linear-gradient(90deg, rgba(110,90,20,.13) 0 2px, transparent 2px 33px) calc(50% - 940px) 0 / 33px 100% ,
      repeating-linear-gradient(180deg, rgba(110,90,20,.13) 0 2px, transparent 2px 125px) 0 83px / 100% 125px,
      var(--c-khaki);
  }
  .s13-day { position: absolute; z-index: 4; left: max(24px, calc(50% - 719px)); top: 0; width: 300px; height: 100%; }
  .s13-kanji-day { position: absolute; left: -42px; top: 124px; font-size: 236px; }
  .s13-day .s13-when { position: absolute; left: 0; top: 424px; white-space: nowrap; }
  .s13-day .s13-desc { position: absolute; left: 0; top: 503px; font-size: 20px; line-height: 33px; white-space: nowrap; }
  .s13-vis { position: absolute; z-index: 1; top: 0; left: calc(50% - 490px); width: 1450px; height: 696px; }
  .s13-pot { left: 0; width: 542px; height: 696px; z-index: 1; }
  .s13-room { left: 390px; width: 1060px; height: 696px; z-index: 2; }
  .s13-vis > video.loopv { left: 390px; width: 1060px; height: 696px; z-index: 2; }
  .s13-night > video.loopv { display: none; }
  .s13-staged { right: max(12px, calc(50% - 948px)); }
  .s13 .s13-ring { position: absolute; z-index: 3; left: 299px; top: 177px; width: 381px; height: 381px; }
  .s13-ring-k { position: absolute; left: 0; right: 0; top: 125px; }
  .s13-ring-v { position: absolute; left: 0; right: 0; top: 159px; }
  .s13 .s13-night { position: absolute; z-index: 4; right: max(24px, calc(50% - 716px)); top: 0; width: 460px; height: 100%; text-align: right; }
  .s13-night .s13-when { position: absolute; right: 0; top: 153px; white-space: nowrap; }
  .s13-night .s13-desc { position: absolute; right: 0; top: 230px; font-size: 20px; line-height: 32px; white-space: nowrap; }
  .s13-kanji-night { position: absolute; right: -4px; top: 336px; font-size: 230px; }
}
/* 1280~1485px: 낮 글은 왼쪽 24px에서 멈추는데 사진 묶음은 계속 왼쪽으로 와서 냄비가 '아침·점심' 글을 덮던 것 →
   사진 묶음도 시안 간격(낮 글 시작 + 229px)에서 멈추고, 밤 배경색 경계도 같은 만큼 옮김 */
@media (min-width: 1280px) and (max-width: 1485px) {
  .s13-vis { left: 253px; }
  .s13-band {
    background-image:
      linear-gradient(90deg, transparent 783px, var(--s13-night-bg) 783px),
      repeating-linear-gradient(90deg, rgba(110,90,20,.13) 0 2px, transparent 2px 33px),
      repeating-linear-gradient(180deg, rgba(110,90,20,.13) 0 2px, transparent 2px 125px);
  }
}

/* ---------- 좁은 화면(1279px 이하): 낮 → 사진(원) → 밤 순서로 쌓기 ---------- */
@media (max-width: 1279px) {
  .s13-head { padding: 60px 16px 40px; text-align: center; }
  .s13-title { font-size: clamp(27px, 6.2vw, 56px); line-height: 1.28; letter-spacing: -0.06em; }
  .s13-sub { margin-top: 12px; font-size: clamp(15px, 2.2vw, 19px); line-height: 1.55; }
  .s13-day {
    position: relative; padding: 36px 20px 40px; min-height: 230px; overflow: hidden;
    background:
      repeating-linear-gradient(90deg, rgba(110,90,20,.13) 0 2px, transparent 2px 33px),
      repeating-linear-gradient(180deg, rgba(110,90,20,.13) 0 2px, transparent 2px 125px) 0 60px,
      var(--c-khaki);
  }
  .s13-kanji-day { position: absolute; right: 18px; top: 18px; font-size: clamp(120px, 30vw, 200px); }
  .s13-when { font-size: clamp(26px, 6vw, 38px); position: relative; z-index: 1; }
  .s13-desc { position: relative; z-index: 1; margin-top: 12px; font-size: clamp(15px, 2.4vw, 19px); line-height: 1.65; }
  .s13-vis { position: relative; width: 100%; aspect-ratio: 980 / 696; overflow: hidden; background: var(--c-khaki); }
  .s13-pot { left: 0; width: 55.31%; height: auto; z-index: 1; }
  .s13-room { left: 39.8%; width: 108.16%; height: 100%; object-fit: cover; z-index: 2; }
  .s13 .s13-ring { position: absolute; z-index: 3; left: 50%; top: 52.87%; width: max(38.3%, 200px); aspect-ratio: 1; height: auto; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .s13-ring-k { position: relative; font-size: clamp(15px, 3.2vw, 24px); }
  .s13-ring-v { position: relative; margin-top: 4px; font-size: clamp(48px, 10vw, 80px); }
  .s13 .s13-night {
    position: relative; padding: 40px 20px 28px; text-align: right; overflow: hidden;
    background: linear-gradient(rgba(10,9,6,.62), rgba(10,9,6,.72)), var(--s13-night-bg) url(../assets/s13/interior_m.jpg) 60% center / cover no-repeat;
  }
  .s13-kanji-night { margin-top: 6px; font-size: clamp(110px, 28vw, 200px); }
  /* 夜 판 배경을 반복 영상으로(사진 배경은 영상 못 받을 때 대비로 남김) + 글 읽히게 어둡게 한 겹 */
  .s13-band { position: relative; }
  .s13-vis > video.loopv { display: none; }
  .s13-night > video.loopv { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
  .s13 .s13-night::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(10,9,6,.28), rgba(10,9,6,.5)); pointer-events: none; }
  .s13-night .s13-when, .s13-night .s13-desc, .s13-kanji-night { position: relative; z-index: 2; }
}