/* 강다솜 사이트. 방향: 영화 포스터처럼 무대 사진과 큰 글자, 나머지는 흰 바탕에 조용하게. */
:root {
  --bg: #ffffff;
  --ink: #0e0e0d;
  --muted: #84847f;
  --hair: #dededa;
  --stage: #0b0c0f;
  --stage-2: #141a2b;   /* 무대 남색 조명 */
  --stage-3: #1c1c1c;
  --on-stage: #f3f2ee;
  --display: "Geist", "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", system-ui, sans-serif;
  --body: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --gut-l: max(20px, env(safe-area-inset-left, 0px));
  --gut-r: max(20px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: break-word; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid #3d63ff; outline-offset: 3px; }
.wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding-left: var(--gut-l); padding-right: var(--gut-r); }
.mono { font: 400 11.5px/1.45 var(--mono); letter-spacing: 0.03em; text-transform: uppercase; }
.muted { color: var(--muted); }
.small { font-size: 11px; }
.skip { position: absolute; left: 12px; top: -60px; background: #fff; color: #000; padding: 10px 14px; z-index: 100; }
.skip:focus { top: 12px; }

/* ---------- 첫 화면 ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; max-height: 1000px; overflow: hidden; background: var(--stage); color: #fff; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0.35), transparent 22%, transparent 55%, rgba(0,0,0,0.45)); pointer-events: none; }
.nav { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding-top: calc(18px + env(safe-area-inset-top, 0px)); padding-bottom: 18px; }
.nav a, .sec-head a { display: inline-block; padding-block: 6px; margin-block: -6px; }
.nav a { text-decoration: none; }
.nav a:hover { text-decoration: underline; }
.nav-l { display: flex; gap: 18px; }
.nav-c { font: 700 15px/1 var(--display); letter-spacing: 0.04em; }
.nav-r { justify-self: end; }
.hero-cta { position: absolute; z-index: 2; right: var(--gut-r); top: 46%; border: 1px solid rgba(255,255,255,0.9); padding: 10px 15px; font: 500 13px/1 var(--body); text-decoration: none; background: rgba(0,0,0,0.12); backdrop-filter: blur(2px); }
.hero-cta:hover { background: #fff; color: #000; }
.hero-title { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding-bottom: 22px; margin: 0 auto; max-width: none; }
.hero-title .w { display: block; font: 600 clamp(64px, 17.5vw, 290px)/0.82 var(--display); letter-spacing: -0.065em; }
.hero-title .w2 { text-align: right; }
@media (max-width: 640px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav-l { display: none; }
  .hero-cta { top: auto; bottom: calc(22px + 2 * 0.82 * 17.5vw + 18px); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-img { animation: settle 2.4s cubic-bezier(.2,.7,.2,1) both; }
  .hero-title .w { animation: rise 1.1s cubic-bezier(.2,.7,.2,1) both; }
  .hero-title .w2 { animation-delay: 0.12s; }
  @keyframes settle { from { transform: scale(1.06); } to { transform: none; } }
  @keyframes rise { from { transform: translateY(18%); opacity: 0.2; } to { transform: none; opacity: 1; } }
}

/* ---------- 공통 섹션 ---------- */
main { padding-bottom: 24px; }
.sec { padding-top: 88px; display: flex; flex-direction: column; gap: 22px; scroll-margin-top: 12px; }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; border-top: 1px solid var(--ink); padding-top: 12px; }
.sec-head h2 { font: 500 clamp(26px, 3vw, 36px)/1.05 var(--display); letter-spacing: -0.035em; }
.sec-head h2 { min-width: 0; }
.sec-head > :last-child { white-space: nowrap; flex: none; }
.sec-head a { text-decoration: none; }
.sec-head a:hover { text-decoration: underline; }

/* ---------- 소개 ---------- */
.intro { display: grid; grid-template-columns: 1fr; gap: 32px; padding-top: 72px; }
.lead { font: 500 clamp(24px, 3.3vw, 42px)/1.28 var(--body); letter-spacing: -0.035em; text-wrap: balance; max-width: 25ch; }
.aff { display: flex; flex-wrap: wrap; gap: 6px 20px; align-content: start; font: 500 15px/1.5 var(--body); }
.aff .mono { width: 100%; }
@media (min-width: 900px) {
  .intro { grid-template-columns: 1.5fr 1fr; align-items: end; }
  .aff { flex-direction: column; }
}

/* ---------- 공연 카드 ---------- */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
.card { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.poster { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--stage); color: var(--on-stage); display: flex; flex-direction: column; justify-content: space-between; padding: 12px; margin-bottom: 6px; }
.poster.p2 { background: var(--stage-2); }
.poster.p3 { background: var(--stage-3); }
.poster b { font: 700 clamp(30px, 4.4vw, 60px)/0.9 var(--display); letter-spacing: -0.05em; text-transform: uppercase; position: relative; }
.poster .mono { position: relative; opacity: 0.8; }
.poster.has-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.poster.has-img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(0,0,0,0.55)); z-index: 1; }
.poster.has-img > * { z-index: 2; }
.card-t { font: 600 16px/1.35 var(--body); letter-spacing: -0.01em; }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: no-preference) {
  .poster { transition: transform 0.4s cubic-bezier(.2,.7,.2,1); }
  .card:hover .poster { transform: translateY(-4px); }
}

/* ---------- 펼치는 이력 ---------- */
details summary { list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
.cv { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); margin-top: 8px; }
.cv summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 16px; font: 600 17px/1.3 var(--body); }
.cv .tog::before { content: "펼치기 +"; }
.cv[open] .tog::before { content: "접기 −"; }
.academy .tog::before { content: "수업 안내 +"; }
.academy[open] .tog::before { content: "닫기 −"; }
.cv-body { display: grid; grid-template-columns: 1fr; gap: 28px; padding-bottom: 28px; }
.cv-year { display: flex; flex-direction: column; gap: 10px; }
.cv-year ul { display: flex; flex-direction: column; }
.cv-year li { display: flex; flex-direction: column; gap: 2px; padding-block: 10px; border-top: 1px solid var(--hair); font-size: 15px; }
.cv-year li b { font-weight: 600; }
.cv-year li span { color: var(--muted); font-size: 14px; }
@media (min-width: 900px) { .cv-body { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }

/* ---------- 안무·연출 ---------- */
.rows li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 4px 16px; padding-block: 20px; border-bottom: 1px solid var(--hair); align-items: baseline; }
.rows b { font: 600 clamp(22px, 2.8vw, 34px)/1.15 var(--body); letter-spacing: -0.035em; }
.rows li > span:last-child { grid-column: 2; font-size: 15px; }
@media (min-width: 900px) {
  .rows li { grid-template-columns: 120px minmax(0, 1fr) 320px; }
  .rows li > span:last-child { grid-column: 3; text-align: right; }
}

/* ---------- 브랜드 ---------- */
.brands { display: flex; flex-wrap: wrap; gap: 0 0.45em; font: 600 clamp(32px, 6.2vw, 84px)/1.08 var(--display); letter-spacing: -0.055em; }
.brands i { font-style: normal; color: #c4c4bf; font-weight: 400; }
.brand-notes { display: grid; grid-template-columns: 1fr; gap: 6px; font-size: 14px; }
@media (min-width: 900px) { .brand-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 영상 ---------- */
.videos { display: grid; grid-template-columns: 1fr; gap: 14px; }
.videos a { position: relative; display: block; text-decoration: none; overflow: hidden; background: #111; }
.videos img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 0.5s ease; }
.videos a:hover img { transform: scale(1.03); }
.tag { position: absolute; left: 12px; bottom: 12px; background: #fff; color: #000; padding: 7px 11px; font: 500 13px/1 var(--body); }
@media (min-width: 760px) { .videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 프로필 ---------- */
.profile { display: grid; grid-template-columns: 1fr; gap: 28px; }
.portrait { width: 100%; max-width: 420px; aspect-ratio: 3 / 4; object-fit: cover; }
.facts { display: grid; grid-template-columns: 1fr; gap: 26px; align-content: start; }
.facts h3 { margin-bottom: 8px; }
.facts li { padding-block: 8px; border-top: 1px solid var(--hair); font-size: 15px; }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 28px; } }
@media (min-width: 1000px) { .profile { grid-template-columns: 1fr 1.6fr; gap: 48px; } }

/* ---------- 사진 띠 ---------- */
.strip { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; overscroll-behavior-x: contain; }
.strip img { flex: none; height: clamp(300px, 40vw, 480px); width: auto; scroll-snap-align: start; }

/* ---------- 수업 한 줄 ---------- */
.academy { margin-top: 88px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.academy summary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; padding-block: 18px; font: 500 16px/1.4 var(--body); }
.btn { border: 1px solid var(--ink); padding: 7px 11px; font: 500 13px/1 var(--body); }
.academy[open] .btn { background: var(--ink); color: #fff; }
.academy-body { display: grid; grid-template-columns: 1fr; gap: 20px; padding-bottom: 24px; font-size: 15px; }
.academy-body p { max-width: 48ch; }
.academy-body dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 20px; }
.academy-body dt { padding-top: 2px; }
@media (min-width: 900px) { .academy-body { grid-template-columns: 1fr 1.3fr; gap: 40px; } }

/* ---------- 연락 ---------- */
.foot { background: var(--stage); color: var(--on-stage); margin-top: 96px; }
.foot .muted { color: #8f8f8a; }
.foot-in { display: flex; flex-direction: column; gap: 28px; padding-top: 64px; padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
.foot-big { font: 600 clamp(64px, 14vw, 210px)/0.84 var(--display); letter-spacing: -0.065em; }
.ids { display: flex; flex-wrap: wrap; gap: 14px 40px; font: 500 18px/1.4 var(--body); }
.ids a, .copy { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.ids a:hover, .copy:hover .copy-v { text-decoration: underline; }
.copy-s { border: 1px solid #555; padding: 4px 7px; color: #cfcfca; }