/* 첫 화면 (2026-10-29 원장님: toss.im 처럼) — 흰 바탕 · 큰 글자 · 넓은 여백 · 스크롤에 맞춘 움직임
   효과는 js/pages/home.js 와 짝. sticky 는 쓰지 않는다. (바로 전 어두운 · 골드 판은 커밋 1318aca) */

.is-home {
  --t-ink: #191f28;
  --t-sub: #4e5968;
  --t-mute: #b0b8c1;
  --t-accent: #c7801a;
  --t-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.t {
  background: #fff;
  color: var(--t-ink);
  overflow: clip;
}

.t p,
.t h1,
.t h2,
.t h3 {
  text-align: start;
  word-break: keep-all;
}

.t .t-center {
  text-align: center;
}

.t-wrap {
  width: min(100% - 2 * var(--gutter), 1140px);
  margin-inline: auto;
}

.t-eyebrow {
  font-size: 1.0625rem;
  font-weight: var(--weight-bold);
  color: var(--t-accent);
}

.t-eyebrow--light {
  color: #f0c27a;
}

.t-h2 {
  margin-top: var(--space-3);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  font-weight: var(--weight-bold);
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: var(--t-ink);
}

.t-h2--light {
  color: #fff;
}

.t-p {
  margin-top: var(--space-5);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.75;
  color: var(--t-sub);
}

.t-p--light {
  color: rgba(255, 255, 255, 0.78);
}

.t-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin-top: var(--space-6);
  font-size: 1.0625rem;
  font-weight: var(--weight-bold);
  color: var(--t-accent);
  text-decoration: none;
}

.t-link::after {
  content: "›";
  font-size: 1.3em;
  line-height: 1;
  transition: transform 0.3s var(--t-ease);
}

.t-link:hover::after {
  transform: translateX(4px);
}

.t-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 10rem;
  padding: 1em 1.8em;
  border-radius: 16px;
  background: var(--t-ink);
  color: #fff;
  font-size: 1.0625rem;
  font-weight: var(--weight-bold);
  text-decoration: none;
  transition: transform 0.25s var(--t-ease);
}

.t-btn:hover {
  transform: scale(0.97);
}

.t-btn--light {
  margin-top: var(--space-7);
  background: #fff;
  color: var(--t-ink);
}

/* 떠오르기 */
.js-motion [data-up] {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.9s var(--t-ease), transform 0.9s var(--t-ease);
  transition-delay: var(--d, 0s);
}

.js-motion [data-up].is-in {
  opacity: 1;
  transform: none;
}

/* ───────── 1. 히어로 — 스크롤하면 둥근 카드로 ───────── */
.t-hero {
  height: 100vh;
  height: 100svh;
  min-height: 560px;
}

.t-hero__frame {
  --s: 0;
  position: relative;
  height: 100%;
  overflow: hidden;
  clip-path: inset(calc(var(--s) * 7%) calc(var(--s) * 5%) round calc(var(--s) * 40px));
  will-change: clip-path;
}

.t-hero__img {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  transform: scale(calc(1.08 - var(--s) * 0.08));
}

.t-hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.6) 100%);
}

.t-hero__inner {
  position: absolute;
  left: max(var(--gutter), 6vw);
  right: max(var(--gutter), 6vw);
  bottom: max(var(--space-8), 11vh);
}

.t .t-hero__title {
  display: grid;
  font-size: clamp(2.75rem, 1.4rem + 5.6vw, 6.5rem);
  font-weight: var(--weight-bold);
  line-height: 1.12;
  letter-spacing: -0.04em;
  color: #fff;
}

.t .t-hero__brand {
  margin-top: var(--space-5);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.375rem);
  font-weight: var(--weight-bold);
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.85);
}

.t-line {
  display: block;
}

.js-motion .t-line {
  opacity: 0;
  transform: translateY(40px);
  animation: t-in 1s var(--t-ease) forwards;
  animation-delay: var(--d, 0s);
}

@keyframes t-in {
  to { opacity: 1; transform: none; }
}

.t-hero__winter {
  position: absolute;
  right: max(var(--gutter), 6vw);
  bottom: max(var(--space-8), 11vh);
  display: grid;
  gap: var(--space-1);
  min-width: 250px;
  padding: var(--space-5) var(--space-6);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: #fff;
  text-decoration: none;
  transition: background 0.3s;
}

.t-hero__winter:hover {
  background: rgba(255, 255, 255, 0.28);
}

.t-hero__winter-tag {
  justify-self: start;
  padding: 0.2em 0.7em;
  border-radius: 999px;
  background: var(--t-accent);
  font-size: 0.75rem;
  font-weight: var(--weight-bold);
}

.t-hero__winter-title {
  margin-top: var(--space-2);
  font-size: 1.375rem;
  font-weight: var(--weight-bold);
}

.t-hero__winter-more {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.85);
}

.t-hero__winter-more::after {
  content: " ›";
}

@media (max-width: 860px) {
  .t-hero__inner { bottom: calc(var(--space-8) + 130px); }
  .t-hero__winter { left: var(--gutter); right: var(--gutter); bottom: var(--space-7); }
}

/* ───────── 2. 한 문장 ───────── */
.t-intro {
  padding-block: calc(var(--space-9) * 1.6) var(--space-9);
}

.t .t-intro__text {
  font-size: clamp(1.625rem, 1.1rem + 2.2vw, 3rem);
  font-weight: var(--weight-bold);
  line-height: 1.45;
  letter-spacing: -0.03em;
  color: var(--t-mute);
  text-align: center;
}

.t-intro__text b {
  color: var(--t-ink);
}

/* ───────── 3. 글 + 떠오르는 폰 ───────── */
.t-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-8);
  padding-block: var(--space-9);
}

.t-feature--flip .t-feature__text {
  order: 2;
}

.t-feature__phone {
  --p: 0;
  position: relative;
  display: flex;
  justify-content: center;
  perspective: 1400px;
}

.t-feature__phone::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -30px;
  width: 70%;
  height: 60px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(25, 31, 40, 0.18), transparent);
  filter: blur(8px);
}

.t-feature__phone img {
  --tilt: -8deg;
  position: relative;
  width: min(300px, 70%);
  border: 10px solid #1d2128;
  border-radius: 44px;
  box-shadow: 0 50px 80px -30px rgba(25, 31, 40, 0.35);
  transform:
    translateY(calc((1 - var(--p)) * 120px))
    rotateX(calc((1 - var(--p)) * 24deg))
    rotateZ(calc((1 - var(--p)) * var(--tilt)));
  opacity: calc(0.3 + var(--p) * 0.7);
  will-change: transform;
}

.t-feature--flip .t-feature__phone img {
  --tilt: 8deg;
}

@media (max-width: 860px) {
  .t-feature { grid-template-columns: 1fr; gap: var(--space-7); padding-block: var(--space-8); }
  .t-feature--flip .t-feature__text { order: 0; }
  .t-p br { display: none; }
  .t-feature__phone img { width: min(240px, 66%); border-width: 8px; border-radius: 34px; }
}

/* ───────── 4. 색 카드 세 장 ───────── */
.t-contents {
  padding-block: var(--space-9);
}

.t-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.t-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 440px;
  padding: var(--space-6);
  overflow: hidden;
  border-radius: 28px;
  color: var(--t-ink);
  text-decoration: none;
  transition: transform 0.4s var(--t-ease);
}

.t-tile:hover {
  transform: translateY(-6px);
}

.t-tile--a { background: linear-gradient(160deg, #fdf3e3, #f6e2c2); }
.t-tile--b { background: linear-gradient(160deg, #f4f4f3, #e6e5e2); }
.t-tile--c { background: linear-gradient(160deg, #ecebe8, #d9d7d2); }

.t-tile__label {
  font-size: 0.9375rem;
  font-weight: var(--weight-bold);
  color: var(--t-sub);
}

.t-tile b {
  margin-top: var(--space-2);
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.t-tile__img {
  margin-top: auto;
  height: 230px;
  border-radius: 18px;
  background: center / cover no-repeat;
  box-shadow: 0 24px 40px -20px rgba(25, 31, 40, 0.35);
  transition: transform 0.6s var(--t-ease);
}

.t-tile:hover .t-tile__img {
  transform: scale(1.04);
}

@media (max-width: 860px) {
  .t-tiles { grid-template-columns: 1fr; }
  .t-tile { min-height: 360px; }
}

/* ───────── 5. 어두운 큰 사진 ───────── */
.t-dark {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: #0b0b0c;
  isolation: isolate;
}

.t-dark__img {
  --z: 0;
  position: absolute;
  inset: 0;
  z-index: -2;
  background: center / cover no-repeat;
  transform: scale(calc(1.25 - var(--z) * 0.25));
  opacity: 0.6;
}

.t-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(11, 11, 12, 0.85) 0%, rgba(11, 11, 12, 0.15) 75%);
}

.t-dark__inner {
  padding-block: var(--space-9);
}

/* ───────── 6. 모이는 콜라주 ───────── */
.t-collage {
  padding-block: var(--space-9);
}

.t-collage__stage {
  --c: 0;
  position: relative;
  height: 560px;
  margin-block: var(--space-8) var(--space-5);
}

.t-collage__stage img {
  position: absolute;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 30px 60px -30px rgba(25, 31, 40, 0.45);
  will-change: transform;
}

.t-collage__stage .c1 { left: 30%; top: 8%;  width: 40%; height: 76%; z-index: 2; transform: scale(calc(0.88 + var(--c) * 0.12)); }
.t-collage__stage .c2 { left: 4%;  top: 12%; width: 23%; height: 42%; transform: translate(calc((1 - var(--c)) * -160px), calc((1 - var(--c)) * -60px)) rotate(calc((1 - var(--c)) * -8deg)); }
.t-collage__stage .c3 { left: 10%; top: 60%; width: 18%; height: 32%; transform: translate(calc((1 - var(--c)) * -110px), calc((1 - var(--c)) * 90px)) rotate(calc((1 - var(--c)) * 6deg)); }
.t-collage__stage .c4 { left: 73%; top: 4%;  width: 21%; height: 38%; transform: translate(calc((1 - var(--c)) * 160px), calc((1 - var(--c)) * -70px)) rotate(calc((1 - var(--c)) * 8deg)); }
.t-collage__stage .c5 { left: 72%; top: 50%; width: 25%; height: 42%; transform: translate(calc((1 - var(--c)) * 130px), calc((1 - var(--c)) * 90px)) rotate(calc((1 - var(--c)) * -6deg)); }

@media (max-width: 760px) {
  .t-collage__stage { height: 380px; }
  .t-collage__stage .c1 { left: 22%; width: 56%; height: 62%; top: 16%; }
  .t-collage__stage .c2 { left: 0; width: 30%; height: 32%; top: 4%; }
  .t-collage__stage .c3 { left: 2%; width: 28%; height: 30%; top: 66%; }
  .t-collage__stage .c4 { left: 70%; width: 30%; height: 30%; top: 2%; }
  .t-collage__stage .c5 { left: 68%; width: 32%; height: 34%; top: 62%; }
}

/* ───────── 7. 소식 ───────── */
.t-news {
  padding-block: var(--space-9);
}

.t-news__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-7);
}

.t-news__card {
  display: grid;
  gap: var(--space-2);
  align-content: center;
  justify-items: center;
  text-align: center;
  min-height: 200px;
  padding: var(--space-6);
  border-radius: 24px;
  background: #f4f5f7;
  color: var(--t-ink);
  text-decoration: none;
  transition: background 0.3s, transform 0.3s var(--t-ease);
}

.t-news__card:hover {
  background: #eceef1;
  transform: translateY(-4px);
}

.t-news__card span {
  font-size: 0.875rem;
  font-weight: var(--weight-bold);
  color: var(--t-accent);
}

.t-news__card b {
  font-size: 1.375rem;
  letter-spacing: -0.02em;
}

.t-news__card em {
  font-style: normal;
  line-height: 1.6;
  color: var(--t-sub);
}

@media (max-width: 860px) {
  .t-news__cards { grid-template-columns: 1fr; }
  .t-news__card { min-height: 0; }
}

/* ───────── 8. 마무리 — 흰 바탕, 검은 글자 (2026-10-31 원장님) ───────── */
.t-final {
  padding-block: calc(var(--space-9) * 1.8);
  background: #fff;
}

.t .t-final__title {
  font-size: clamp(2.5rem, 1.4rem + 4.6vw, 5.5rem);
  font-weight: var(--weight-bold);
  line-height: 1.15;
  letter-spacing: -0.04em;
  color: var(--t-ink);
  text-align: center;
}

.t-final__actions {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.t-final__actions p {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
}

.t-final__actions p a {
  color: var(--t-ink);
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .t-hero__frame { clip-path: none; }
}