/* YN CULTURE & SPACE — 사이트 공통 스타일 (대한제강 문법) */

@font-face { font-family: 'Pretendard'; font-weight: 400;
  src: url('assets/Pretendard-Regular.otf') format('opentype'); }
@font-face { font-family: 'Pretendard'; font-weight: 600;
  src: url('assets/Pretendard-SemiBold.otf') format('opentype'); }
@font-face { font-family: 'Pretendard'; font-weight: 700;
  src: url('assets/Pretendard-Bold.otf') format('opentype'); }
@font-face { font-family: 'Pretendard'; font-weight: 800;
  src: url('assets/Pretendard-ExtraBold.otf') format('opentype'); }

:root {
  --black:#000; --white:#fff;
  --g500:#8A8A8E; --g300:#D1D1D6; --g200:#E4E4E7;
  --rail: 20px;          /* 좌측 레일 */
  --col: 44%;            /* 콘텐츠 수직축 */
  --right: 20px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Pretendard','Apple SD Gothic Neo','Noto Sans CJK KR',sans-serif;
  background:var(--white); color:var(--black);
  font-size:18px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }

/* ── 헤더 ── */
header {
  position:fixed; top:0; left:0; right:0; z-index:10;
  display:flex; align-items:center;
  padding:26px var(--right) 26px var(--rail);
  background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
}
header .logo { flex:0 0 auto; }
header .logo img { height:30px; display:block; }
header nav {
  position:absolute; left:var(--col); right:14%;
  display:flex; justify-content:space-between;
}
header nav a { font-size:17px; font-weight:600; }
header nav a:hover { opacity:.55; }
header nav a.on { border-bottom:2px solid var(--black); padding-bottom:2px; }
header .kor { font-size:17px; font-weight:600; margin-left:auto; }

/* ── 축 헬퍼 ── */
.axis { padding-left:var(--col); padding-right:var(--right); }

/* ── 메인 히어로 ── */
.hero { padding-top:150px; }
.hero h1 { font-size:clamp(46px, 6.6vw, 96px); font-weight:700; line-height:1.15; letter-spacing:-.01em; }
.hero-gap { height:clamp(140px, 24vh, 280px); }

/* ── 서브페이지 타이틀 ── */
.page-hero { padding:190px var(--rail) 0; }
.page-hero h1 { font-size:clamp(64px, 9vw, 132px); font-weight:700; letter-spacing:-.01em; line-height:1; }
.page-rule { border-top:1px solid var(--black); margin-top:90px; }
.subtabs { display:flex; gap:28px; padding:20px var(--rail) 0; font-size:16px; font-weight:600; color:var(--g500); }
.subtabs a.on { color:var(--black); border-bottom:2px solid var(--black); padding-bottom:2px; }
.subtabs a:hover { color:var(--black); }

/* ── 레일 라벨 + 본문 행 ── */
.split { position:relative; display:flex; align-items:flex-start; padding-right:var(--right); }
.split .rail { position:absolute; left:var(--rail); max-width:38%; font-weight:700; font-size:18px; line-height:1.6; }
.split .rail.big { font-size:clamp(26px,2.6vw,38px); font-weight:600; line-height:1.35; }
.split .main { margin-left:var(--col); width:100%; }
.split .main .h { font-size:clamp(22px,2.2vw,30px); font-weight:600; margin-bottom:36px; word-break:keep-all; }
.split .main p { font-size:18px; line-height:1.9; word-break:keep-all; }

/* ── 이미지 자리: 회색 플레이스홀더 ── */
.band, .ph-box {
  display:flex; align-items:center; justify-content:center;
  background-color:var(--g200);
  background-image:
    repeating-linear-gradient(0deg,  transparent 0 79px, #D1D1D6 79px 80px),
    repeating-linear-gradient(90deg, transparent 0 79px, #D1D1D6 79px 80px);
  background-size:auto; background-position:center;
}
.band { height:60vh; margin-top:56px; background-attachment: fixed; } /* 커튼 리빌 */
.ph-box { aspect-ratio:16/7; margin-bottom:48px; }
.band span, .ph-box span { font-size:13px; color:var(--g500); letter-spacing:.08em;
  background:var(--g200); padding:4px 10px; }
@supports (-webkit-touch-callout: none) { .band { background-attachment: scroll; } }

/* ── 섹션 ── */
.sec { position:relative; padding-top:clamp(120px,18vh,220px); }
.sec .rail-abs { position:absolute; left:var(--rail); font-weight:400; font-size:18px; line-height:1.6; }

/* ── 리스트 행 ── */
.rows { margin-left:var(--col); margin-right:var(--right); border-top:1px solid var(--g300); }
.rows a, .rows .r {
  display:grid; grid-template-columns: 220px 1fr 32px;
  align-items:center; gap:16px;
  padding:34px 0; border-bottom:1px solid var(--g300);
}
.rows .t { font-size:26px; font-weight:700; }
.rows .d { font-size:18px; }
.rows .arr { font-size:24px; justify-self:end; transition:transform .25s ease; }
.rows a:hover .arr { transform:translateX(8px); }
.rows .yr { font-size:26px; font-weight:800; letter-spacing:-.01em; }
.rows .ph { display:block; font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--g500); margin-top:6px; }
.rows .d.todo { color:var(--g500); }

/* ── 프로젝트 크레딧 리스트 ── */
.credits { margin-left:var(--col); margin-right:var(--right); border-top:1px solid var(--g300); }
.credits .c {
  display:grid; grid-template-columns: 90px 1fr auto;
  align-items:baseline; gap:20px;
  padding:26px 0; border-bottom:1px solid var(--g300);
}
.credits .y { font-size:15px; color:var(--g500); }
.credits .n { font-size:clamp(19px,1.9vw,24px); font-weight:700; }
.credits .s { font-size:15px; color:var(--g500); text-align:right; }

/* ── 팩트 그리드 ── */
.facts { margin-left:var(--col); margin-right:var(--right);
  display:flex; flex-wrap:wrap; gap:0 64px; border-top:1px solid var(--g300); }
.facts > div { padding:20px 0; min-width:200px; }
.facts dt { font-size:13px; font-weight:700; letter-spacing:.12em; color:var(--g500); margin-bottom:8px; }
.facts dd { font-size:18px; font-weight:700; }
.facts .pending dd { color:var(--g500); font-weight:400; }

/* ── 스코프 태그 ── */
.scope { display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:28px; }
.scope span { font-size:15px; color:var(--g500); }

/* ── 알약 버튼 ── */
.pill {
  display:inline-block; border:1px solid var(--black); border-radius:30px;
  padding:16px 34px; font-size:22px; font-weight:400; line-height:1.4;
  transition:background .25s ease, color .25s ease;
}
.pill:hover { background:var(--black); color:var(--white); }
.pill.sm { font-size:18px; padding:12px 26px; }

/* ── CONTACT ── */
.contact .main p { font-size:18px; line-height:2; max-width:34em; margin-bottom:48px; }

/* ── 푸터 ── */
footer { margin-top:clamp(120px,18vh,220px); border-top:1px solid var(--black);
         padding:56px var(--right) 40px var(--rail); position:relative; }
.foot-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
             gap:32px; max-width:calc(100% - 200px); }
.foot-grid dt { font-size:18px; color:var(--g500); margin-bottom:16px; }
.foot-grid dd { font-size:18px; line-height:1.9; }
.foot-grid a:hover { opacity:.55; }
.back-top { position:absolute; top:56px; right:var(--right); }
.foot-bottom { margin-top:72px; font-size:14px; color:var(--g500);
               display:flex; gap:24px; flex-wrap:wrap; }

/* ── 모션 ── */
.rise { opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; }
.rise.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .rise { opacity:1; transform:none; transition:none; } }

/* ── 모바일 ── */
@media (max-width:900px) {
  :root { --col: 8%; }
  header nav { display:none; }
  .split .rail { position:static; max-width:none; margin:0 0 20px var(--col); display:block; }
  .sec .rail-abs { position:static; margin:0 0 20px var(--col); display:block; }
  .rows a, .rows .r { grid-template-columns:1fr 32px; }
  .rows .d { grid-column:1 / -1; }
  .credits .c { grid-template-columns:70px 1fr; }
  .credits .s { grid-column:1 / -1; text-align:left; }
  .foot-grid { max-width:100%; }
}