/* ============================================================
   SJ.Company Display — 뷰어 레이아웃
   ============================================================ */
.stage { position: fixed; inset: 0; }
.stage.no-cursor { cursor: none; }

/* 시계는 화면 정중앙에 고정하고, 메시지는 아래쪽에 둔다.
   위·아래 칸을 minmax(0,1fr) 로 똑같이 잡아 두었기 때문에 메시지 길이가
   바뀌어도 가운데 칸(시계)의 위치는 변하지 않는다. */
.content {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  gap: clamp(10px, 1.6vh, 26px);
  padding: clamp(22px, 3.4vw, 60px);
  /* 하단 문구·티커와 겹치지 않도록 아래쪽을 더 비워 둔다 */
  padding-bottom: calc(clamp(22px, 3.4vw, 60px) + 26px);
  animation: sjFadeIn 1.1s var(--ease) both;
}
.ticker-on .content { padding-bottom: calc(clamp(42px, 5.4vh, 62px) + 34px); }

.clock-block { grid-row: 2; }
.message-box { grid-row: 3; align-self: end; }

@keyframes sjFadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ── 브랜드 ────────────────────────────────── */
.brand {
  position: absolute;
  top: clamp(22px, 3.4vw, 56px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: center;
  max-width: 70vw;
}

.brand-logo {
  width: var(--logo-size);
  height: var(--logo-size);
  object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .5));
}

.brand-name {
  font-size: calc(clamp(1.3rem, 2.4vw, 2.6rem) * var(--scale));
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.15;
  background: linear-gradient(120deg, #fff, rgba(255, 255, 255, .72));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .35);
}

.brand-slogan {
  margin-top: 4px;
  font-size: calc(clamp(.72rem, 1vw, 1rem) * var(--scale));
  font-weight: 300;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .72;
}

/* ── 날씨 ──────────────────────────────────── */
.weather {
  position: absolute;
  top: clamp(22px, 3.4vw, 56px);
  right: clamp(22px, 3.4vw, 56px);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: clamp(14px, 1.4vw, 22px) clamp(18px, 1.8vw, 28px);
  transform: scale(var(--scale));
  transform-origin: top right;
}

.weather-main { display: flex; align-items: center; gap: 10px; }

.weather-icon {
  width: clamp(44px, 4.2vw, 68px);
  height: clamp(44px, 4.2vw, 68px);
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, .4));
}

.weather-temp {
  font-family: var(--clock-font);
  font-size: clamp(1.9rem, 3vw, 3.1rem);
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: flex-start;
}
.weather-unit { font-size: .5em; margin-top: .25em; opacity: .8; }

.weather-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.weather-desc { font-size: clamp(.82rem, 1.05vw, 1.05rem); font-weight: 500; }
.weather-place { font-size: clamp(.7rem, .85vw, .85rem); opacity: .68; letter-spacing: .04em; }
.weather-sub {
  display: flex;
  gap: 12px;
  font-size: clamp(.66rem, .8vw, .82rem);
  opacity: .62;
  font-weight: 300;
  flex-wrap: wrap;
}
.weather-sub span:empty { display: none; }

/* ── 시계 ──────────────────────────────────── */
.clock-block { text-align: center; }

.clock-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-family: var(--clock-font);
  font-weight: var(--clock-weight);
  font-size: calc(clamp(3.4rem, 15vw, 17rem) * var(--clock-size) * var(--scale));
  line-height: .98;
  letter-spacing: var(--clock-ls);
  color: var(--clock-color);
  text-shadow:
    0 0 calc(18px * var(--clock-glow)) rgba(255, 255, 255, calc(.55 * var(--clock-glow))),
    0 0 calc(60px * var(--clock-glow)) rgba(140, 200, 255, calc(.45 * var(--clock-glow))),
    0 14px 60px rgba(0, 0, 0, .55);
  font-variant-numeric: tabular-nums;
}

body.clock-gradient .clock-row {
  background: linear-gradient(160deg, var(--clock-grad-from), var(--clock-grad-to) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 0 calc(16px * var(--clock-glow)) rgba(160, 210, 255, calc(.6 * var(--clock-glow))))
    drop-shadow(0 12px 42px rgba(0, 0, 0, .5));
  text-shadow: none;
}

.ampm {
  display: inline-block;
  min-width: 2.6em;
  text-align: center;
  font-size: .26em;
  font-weight: 500;
  letter-spacing: .1em;
  margin-right: .5em;
  opacity: .8;
  align-self: center;
}

/* ── 흔들림 없는 자릿수 ─────────────────────
   숫자마다 폭이 다른 글꼴에서도 시계가 좌우로 움직이지 않도록
   각 자리를 '0' 글자폭(1ch)의 고정 칸에 가운데 정렬해 넣는다. */
.digit { display: inline-block; }
.digit .d {
  display: inline-block;
  width: 1ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.digit .d.blank { visibility: hidden; }

.colon {
  display: inline-block;
  width: .46ch;
  text-align: center;
  opacity: .85;
}
body.blink-colon .colon { animation: sjBlink 2s steps(1, end) infinite; }
@keyframes sjBlink { 0%, 49% { opacity: .9; } 50%, 100% { opacity: .22; } }

/* 초 : 위 / 가운데 / 아래 위치 선택 */
.sec-wrap {
  font-size: .46em;
  opacity: .82;
  margin-left: .14em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.sec-wrap .colon { animation: none; }
.sec-wrap.pos-top { align-self: flex-start; margin-top: .18em; }
.sec-wrap.pos-middle { align-self: center; }
.sec-wrap.pos-bottom { align-self: flex-end; margin-bottom: .12em; }

.date-row {
  margin-top: clamp(6px, 1.2vh, 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: calc(clamp(.9rem, 1.7vw, 1.7rem) * var(--scale));
  font-weight: 300;
  letter-spacing: .12em;
  opacity: .92;
  text-shadow: 0 4px 22px rgba(0, 0, 0, .5);
}

.dow {
  font-weight: 500;
  padding: .12em .7em;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  font-size: .78em;
  letter-spacing: .08em;
}
.dow-0 { color: #ffb4b4; border-color: rgba(255, 120, 120, .4); background: rgba(255, 80, 80, .16); }
.dow-6 { color: #b4d4ff; border-color: rgba(120, 170, 255, .4); background: rgba(80, 140, 255, .16); }
.dow:empty { display: none; }

.extra-row { font-size: .9rem; opacity: .6; margin-top: 6px; }

/* ── 메시지 ────────────────────────────────── */
.message-box {
  max-width: min(1100px, 88vw);
  padding: clamp(12px, 1.4vh, 22px) clamp(20px, 2.4vw, 40px);
  text-align: center;
  transform: scale(var(--scale));
}

.message-inner {
  font-size: calc(clamp(1rem, 1.7vw, 1.7rem) * var(--msg-size));
  color: var(--msg-color);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .02em;
  text-shadow: 0 4px 20px rgba(0, 0, 0, .5);
}

/* textContent 로 넣은 \n 을 줄바꿈으로 보이게 한다 (연속 공백은 접힌 채로) */
.msg-line { white-space: pre-line; }
.msg-line + .msg-line { margin-top: .3em; }
.msg-line.rotate {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  min-height: 1.7em;
}
.msg-line.rotate.show { opacity: 1; transform: none; }

/* ── 하단 티커 ─────────────────────────────── */
.ticker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(42px, 5.4vh, 62px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .3), rgba(0, 0, 0, .55));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, .14);
  z-index: 6;
}

.ticker::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--msg-accent), transparent);
  opacity: .85;
}

.ticker-track {
  display: flex;
  white-space: nowrap;
  will-change: transform;
  animation: sjTicker 40s linear infinite;
}

.ticker-item {
  padding-right: 3rem;
  font-size: calc(clamp(.95rem, 1.25vw, 1.35rem) * var(--msg-size));
  color: var(--msg-color);
  letter-spacing: .04em;
  font-weight: 400;
}

@keyframes sjTicker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── 푸터 ──────────────────────────────────── */
.foot-note {
  position: absolute;
  bottom: clamp(16px, 2vh, 28px);
  left: 50%;
  transform: translateX(-50%);
  font-size: .78rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  opacity: .42;
  z-index: 6;
  white-space: nowrap;
}
.ticker-on .foot-note { bottom: calc(clamp(42px, 5.4vh, 62px) + 12px); }

/* ── 설정 버튼 ─────────────────────────────── */
.gear {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, .78);
  opacity: .28;
  transition: all .35s var(--ease);
  z-index: 20;
}
.gear:hover { opacity: 1; transform: rotate(90deg) scale(1.06); background: rgba(255, 255, 255, .2); }
.ticker-on .gear { bottom: calc(clamp(42px, 5.4vh, 62px) + 14px); }

/* ============================================================
   레이아웃 프리셋
   ============================================================ */

/* 좌측 정렬 */
/* 그리드에서는 가로 정렬이 justify-items 이다 (align-items 는 세로) */
.layout-split .content { justify-items: start; padding-left: clamp(30px, 7vw, 130px); }
.layout-split .brand { left: clamp(30px, 7vw, 130px); transform: none; text-align: left; }
.layout-split .clock-block,
.layout-split .message-box { text-align: left; }
.layout-split .clock-row,
.layout-split .date-row { justify-content: flex-start; }
.layout-split .message-box { transform-origin: left center; }
.layout-split .foot-note { left: clamp(30px, 7vw, 130px); transform: none; }

/* 코너형 : 브랜드 크게, 시계는 우하단 */
/* 코너형은 의도적으로 우하단에 모으는 배치라 기존 flex 흐름을 유지한다 */
.layout-corner .content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  padding-bottom: clamp(60px, 9vh, 120px);
}
.layout-corner .brand {
  left: clamp(30px, 6vw, 100px);
  top: clamp(30px, 8vh, 110px);
  transform: none;
  text-align: left;
}
.layout-corner .brand-name { font-size: calc(clamp(2rem, 5vw, 5rem) * var(--scale)); }
.layout-corner .brand-slogan { font-size: calc(clamp(.8rem, 1.2vw, 1.15rem) * var(--scale)); }
.layout-corner .clock-row { font-size: calc(clamp(2.8rem, 9vw, 9rem) * var(--clock-size) * var(--scale)); justify-content: flex-end; }
.layout-corner .date-row { justify-content: flex-end; }
.layout-corner .clock-block,
.layout-corner .message-box { text-align: right; }
.layout-corner .message-box { transform-origin: right center; }

/* 미니멀 : 시계 위주 */
.layout-minimal .brand { opacity: .58; }
.layout-minimal .brand-name { font-size: calc(clamp(1rem, 1.5vw, 1.5rem) * var(--scale)); }
.layout-minimal .weather { opacity: .78; }
.layout-minimal .clock-row { font-size: calc(clamp(4rem, 18vw, 22rem) * var(--clock-size) * var(--scale)); }
.layout-minimal .message-box { opacity: .8; }

/* 정렬 보조 */
.align-left .content { align-items: flex-start; }
.align-right .content { align-items: flex-end; }
.align-left .clock-row, .align-left .date-row { justify-content: flex-start; }
.align-right .clock-row, .align-right .date-row { justify-content: flex-end; }
.align-left .clock-block, .align-left .message-box { text-align: left; }
.align-right .clock-block, .align-right .message-box { text-align: right; }

/* ── 반응형 ────────────────────────────────── */
/* 넓은 화면에서는 브랜드·날씨·푸터를 절대배치로 모서리에 고정하지만,
   좁은 화면에서는 그 방식이 가운데 정렬된 시계·메시지와 겹친다.
   또 absolute 요소에 right:50% 만 주면 폭이 화면의 절반으로 제한되어
   날씨 카드 글자가 뭉개진다. 그래서 모바일에서는 전부 일반 흐름으로 되돌려
   위에서 아래로 쌓는다: 브랜드 → 날씨 → 시계 → 메시지 → 푸터 */
@media (max-width: 820px) {
  /* 좁은 화면에서는 브랜드·날씨를 흐름에 넣어 위에 쌓고(겹침 방지),
     그 아래 남는 공간의 가운데에 시계를 고정한다. 메시지는 맨 아래.
     3·5번 칸을 똑같은 minmax(0,1fr) 로 잡아 두어 메시지 길이가 바뀌어도
     시계(4번 칸)는 움직이지 않는다. */
  .content {
    grid-template-rows: auto auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
    overflow-y: auto;
    overflow-x: hidden;
    gap: clamp(10px, 1.6vh, 22px);
    padding: clamp(18px, 4vw, 34px) clamp(14px, 4vw, 30px) clamp(28px, 5vh, 48px);
  }
  .brand { grid-row: 1; }
  .weather { grid-row: 2; }
  .clock-block { grid-row: 4; }
  /* 메시지는 auto 칸이 아니라 고정 비율 칸(5번) 안에서 아래 정렬해야
     길이가 늘어나도 위쪽 여백을 잠식하지 않아 시계가 고정된다 */
  .message-box { grid-row: 5; align-self: end; }
  .foot-note { grid-row: 6; }

  .brand,
  .weather,
  .foot-note {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    /* 기본 규칙의 translateX(-50%) 를 지우지 않으면 왼쪽으로 밀려 잘린다 */
    transform: none;
    margin-inline: auto;
    max-width: 100%;
  }

  .brand { justify-content: center; }

  /* width:max-content 로 내용만큼만 차지하게 하고 화면 폭으로만 제한한다 */
  .weather {
    width: max-content;
    max-width: 100%;
    transform: scale(var(--scale));
    transform-origin: center;
  }

  .foot-note { white-space: normal; text-align: center; }

  /* 한글은 기본적으로 글자 단위로 끊어져 "날씨 불/러오는 중" 처럼 보인다 */
  .weather-desc,
  .weather-place,
  .brand-slogan,
  .message-inner,
  .foot-note { word-break: keep-all; }

  .layout-corner .content,
  .layout-split .content { align-items: center; padding-left: clamp(14px, 4vw, 30px); }
  .layout-corner .clock-row, .layout-split .clock-row,
  .layout-corner .date-row, .layout-split .date-row { justify-content: center; }
  .layout-corner .brand, .layout-split .brand,
  .layout-corner .clock-block, .layout-split .clock-block,
  .layout-corner .message-box, .layout-split .message-box { text-align: center; }
}