/* ============================================================
   YJ PRODUCTION — shared stylesheet
   Change a colour or font HERE and every page updates.
   ============================================================ */

:root{
  /* --- BRAND COLOURS: edit these to restyle the whole site --- */
  --ink:#0E0F11;          /* page background */
  --ink-2:#15171A;        /* cards and image placeholders */
  --paper:#EDEAE4;        /* main text */
  --muted:#82868D;        /* secondary text */
  --tungsten:#E0A85C;     /* accent — used sparingly */
  --line:rgba(237,234,228,.14);
  --line-soft:rgba(237,234,228,.07);

  --display:"Barlow Condensed","Noto Sans KR",sans-serif;
  --body:"Instrument Sans","Noto Sans KR",sans-serif;
  --mono:"IBM Plex Mono",monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--paper);font-family:var(--body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;position:relative}

/* ============================================================
   BACKGROUND — 고정된 분위기 배경
   화면 뒤에 고정되어 스크롤해도 움직이지 않습니다.
   색을 바꾸려면 아래 rgba() 값만 수정하세요.
   ============================================================ */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(58% 45% at 18% 12%, rgba(28,86,88,.42) 0%, transparent 62%),
    radial-gradient(52% 40% at 88% 22%, rgba(20,58,74,.34) 0%, transparent 60%),
    radial-gradient(60% 50% at 72% 88%, rgba(224,168,92,.10) 0%, transparent 62%),
    radial-gradient(70% 60% at 30% 70%, rgba(16,44,52,.30) 0%, transparent 65%),
    var(--ink);
}

/* 아주 얕은 세로 결 — 필름 스캔 느낌. 빼려면 이 블록을 지우세요. */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(237,234,228,.016) 0 1px,transparent 1px 3px);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--tungsten);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px;position:relative}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(14,15,17,.85);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:84px;gap:24px}
.nav-links{display:flex;gap:28px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nav-links a:hover{color:var(--paper)}
.nav-links a.on{color:var(--tungsten)}
.burger{display:none;background:none;border:1px solid var(--line);color:var(--paper);padding:8px 12px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}

/* ---------- 서울 현재 시각 (문의 페이지) ---------- */
.clock{margin-top:34px;max-width:600px;border:1px solid var(--line);background:var(--ink-2);padding:26px 28px 24px}
.clock-city{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.clock-city span{color:var(--tungsten);margin-left:8px}
.clock-time{font-family:var(--mono);font-weight:500;font-size:clamp(38px,5.6vw,56px);line-height:1;color:var(--paper);margin:14px 0 16px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.clock-status{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.clock-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
.clock-status.open{color:var(--tungsten)}
.clock-status.open::before{background:var(--tungsten);box-shadow:0 0 0 4px rgba(224,168,92,.16)}
.clock-others{display:flex;gap:34px;flex-wrap:wrap;margin-top:24px;padding-top:20px;border-top:1px solid var(--line-soft)}
.clock-others b{display:block;font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.clock-others span{font-family:var(--mono);font-size:15px;color:var(--paper);font-variant-numeric:tabular-nums}
@media(max-width:600px){
  .clock{padding:22px 20px}
  .clock-others{gap:24px}
}
html[lang="ko"] .clock-status{letter-spacing:.06em}

/* ---------- 언어 전환 (EN / KR) ----------
   상단 메뉴 오른쪽 끝에 붙습니다. 모바일에서는 메뉴 버튼 옆에 그대로 남습니다.
   현재 보고 있는 언어에 class="on" 이 붙어 앰버색으로 표시됩니다. */
.nav-right{display:flex;align-items:center;gap:26px}
.lang{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;border:1px solid var(--line);padding:6px 11px;white-space:nowrap}
.lang a{color:var(--muted);transition:color .2s ease}
.lang a:hover{color:var(--paper)}
.lang a.on{color:var(--tungsten)}
.lang span{color:var(--muted);opacity:.45}

/* ---------- 한국어 페이지 (kr/ 폴더) ----------
   Barlow Condensed 에는 한글이 없어서 Noto Sans KR 로 자동 대체됩니다.
   영문용으로 잡아 둔 좁은 행간과 넓은 자간이 한글에는 답답해 보여서 여기서만 풀어 줍니다. */
html[lang="ko"] h1{font-size:clamp(40px,5.6vw,78px);line-height:1.08;letter-spacing:-.01em}
html[lang="ko"] h2{letter-spacing:.005em;line-height:1.28}
html[lang="ko"] h3{letter-spacing:.005em;line-height:1.45}
html[lang="ko"] .loc h4,html[lang="ko"] .card h4{letter-spacing:.01em;line-height:1.35}
html[lang="ko"] .eyebrow,html[lang="ko"] .sec-head .for,html[lang="ko"] .clients-label,
html[lang="ko"] .strip-label,html[lang="ko"] .loc .sub,html[lang="ko"] .card .sub,
html[lang="ko"] .role,html[lang="ko"] .chip,html[lang="ko"] .foot-col b{letter-spacing:.06em}
html[lang="ko"] .tags span{letter-spacing:.02em}
html[lang="ko"] .nav-links{letter-spacing:.03em;font-size:12px}
html[lang="ko"] .form label,html[lang="ko"] .meta dt{letter-spacing:.04em}
html[lang="ko"] .chip{letter-spacing:.03em}
html[lang="ko"] .btn{letter-spacing:.06em}

/* 한국어 본문은 문장이 데스크톱에서 한 줄에 들어가도록 폭 제한을 풉니다.
   (영문은 알파벳이 좁아 56ch 로도 충분하지만, 한글은 글자당 폭이 넓습니다)
   좌우 여백은 .wrap 이 잡아 주므로 화면이 깨지지는 않습니다. */
html[lang="ko"] .head .lead{max-width:none}
html[lang="ko"] .sec-head .note{max-width:none}
html[lang="ko"] .prose p{max-width:none}
html[lang="ko"] .about-split{grid-template-columns:2.1fr 1fr;gap:48px}
/* 사진과 나란히 놓이는 2단 영역은 칸 폭이 정해져 있으므로 그대로 둡니다 */
html[lang="ko"] .split .lead{max-width:46ch}
@media(max-width:900px){
  html[lang="ko"] .split .lead{max-width:none}
  /* 좁은 화면에서는 영어판과 똑같이 한 줄로 쌓입니다 */
  html[lang="ko"] .about-split{grid-template-columns:1fr;gap:40px}
}
html[lang="ko"] .prose p,html[lang="ko"] .lead{word-break:keep-all}
html[lang="ko"] .loc p,html[lang="ko"] .pillar p,html[lang="ko"] .sec-head .note{word-break:keep-all}

/* ---------- TYPE ---------- */
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--tungsten);margin-bottom:20px}
h1{font-family:var(--display);font-size:clamp(56px,8vw,116px);font-weight:500;line-height:.87;text-transform:uppercase}
h2{font-family:var(--display);font-size:34px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
h3{font-family:var(--display);font-size:26px;font-weight:500;letter-spacing:.05em;text-transform:uppercase}
.lead{max-width:56ch;margin-top:26px;color:var(--muted);font-size:17px}
.prose p{max-width:64ch;margin-bottom:20px;color:var(--muted)}
.prose p.hi{color:var(--paper)}

/* ---------- LAYOUT ---------- */
.head{padding:88px 0 64px;border-bottom:1px solid var(--line-soft)}
section{padding:84px 0;border-bottom:1px solid var(--line-soft)}
.sec-head{margin-bottom:44px}
.sec-head .for{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--tungsten);margin-top:10px}
.sec-head .note{color:var(--muted);font-size:14.5px;margin-top:12px;max-width:58ch}
.split{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:center}

/* ---------- IMAGE / VIDEO PLACEHOLDER ---------- */
.still{position:relative;background:rgba(21,23,26,.72);backdrop-filter:blur(2px);border:1px solid var(--line-soft);overflow:hidden;aspect-ratio:16/9;width:100%;display:block;padding:0;cursor:pointer}
.still.tall{aspect-ratio:3/4}
.still.wide{aspect-ratio:21/9}
.still i{position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(237,234,228,.035) 0 1px,transparent 1px 11px)}
.still .slug{position:absolute;left:14px;bottom:12px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(237,234,228,.3)}
.still .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.2s}
.still .play::before{content:"";border-left:13px solid var(--paper);border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.still:hover .play{background:var(--tungsten);border-color:var(--tungsten)}
.still:hover .play::before{border-left-color:var(--ink)}
.still iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}

/* ---------- GRIDS ---------- */
.grid{display:grid;gap:38px 28px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card h4{font-family:var(--display);font-size:23px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;margin-top:16px;line-height:1.15}
.card .sub{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted);margin-top:7px}
.role{display:inline-block;margin-top:11px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--tungsten);border:1px solid rgba(224,168,92,.34);padding:4px 9px}

/* ---------- CLIENT WALL ---------- */
.clients-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:18px;text-align:center}
/* One white panel wrapping every logo.
   minmax(0,1fr) is essential — with plain 1fr a large image sets the column's
   minimum width and pushes the whole grid off screen. */
.clients{background:#fff;padding:34px 30px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:30px 26px;align-items:center;justify-items:center}
.clients div{width:100%;height:54px;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--mono);font-size:9px;line-height:1.35;letter-spacing:.08em;color:#8b9098}

/* ---------- SERVICE / PILLAR BLOCKS ---------- */
.pillar{border-top:1px solid var(--line);padding-top:26px}
.pillar .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--tungsten);margin-bottom:14px}
.pillar p{color:var(--muted);font-size:15px;margin-top:14px}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.tags span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:5px 10px}

/* ---------- META LIST ---------- */
.meta{margin-top:24px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11.5px}
.meta div{display:flex;gap:16px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.meta dt{color:var(--muted);min-width:120px;text-transform:uppercase;letter-spacing:.13em;font-size:10.5px;padding-top:1px}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:var(--tungsten);padding:14px 24px;transition:.18s;border:0;cursor:pointer}
.btn:hover{background:var(--paper)}
.btn.ghost{background:none;color:var(--paper);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--paper)}

/* ---------- FORM ---------- */
.form{display:grid;gap:20px;max-width:560px}
.form label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px}
.form input,.form select,.form textarea{width:100%;background:rgba(21,23,26,.7);border:1px solid var(--line);color:var(--paper);font-family:var(--body);font-size:15px;padding:13px 14px}
.form textarea{min-height:150px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--tungsten);outline:none}

/* ---------- FOOTER ---------- */
footer{padding:72px 0 56px;color:var(--muted);font-size:13.5px}
.foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:44px}
.foot-col b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);font-weight:500;margin-bottom:10px}
.foot-col a{border-bottom:1px solid transparent;transition:.18s}
.foot-col a:hover{color:var(--paper);border-bottom-color:var(--line)}
/* Footer wordmark image (transparent PNG, off-white artwork) */
.brand-foot-img{height:54px;width:auto;display:block}
@media(max-width:600px){.brand-foot-img{height:42px}}
.rule{border-top:1px solid var(--line-soft);padding-top:22px;font-family:var(--mono);font-size:11px}

/* ---------- MOTION ---------- */
.rise{opacity:0;transform:translateY(22px);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}html{scroll-behavior:auto}}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1160px){
  .clients{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media(max-width:980px){
  .split{grid-template-columns:1fr;gap:44px}
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .clients{grid-template-columns:repeat(4,minmax(0,1fr))}
  .burger{display:block}
  .nav-links{position:absolute;top:84px;left:0;right:0;background:var(--ink);flex-direction:column;gap:0;padding:8px 32px 24px;border-bottom:1px solid var(--line-soft);display:none}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 0;border-bottom:1px solid var(--line-soft);font-size:12px}
}
@media(max-width:600px){
  .nav-in{height:64px}
  .nav-links{top:64px}
  .nav-right{gap:12px}
  .lang{font-size:10px;padding:5px 8px;gap:5px}
  .wrap{padding:0 20px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .clients{grid-template-columns:repeat(3,minmax(0,1fr));padding:22px 18px;gap:22px 16px}
  .clients div{font-size:8.5px;height:44px}

  section{padding:60px 0}
  .head{padding:60px 0 44px}
  .nav-links{padding:8px 20px 24px}
}

/* ============================================================
   IMAGES — added so PNG/JPG/SVG files drop straight in
   ============================================================ */

/* Logo in the top-left nav — YJ badge.
   Transparent PNG, off-white artwork. No filter or blend needed. */
.brand{display:flex;align-items:center;gap:16px}
.brand img{height:52px;width:auto;display:block;transition:transform .3s ease,opacity .3s ease}
.brand:hover img{transform:scale(1.05)}
.brand .wm{font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;line-height:1;color:var(--paper)}
@media(max-width:600px){.brand img{height:36px}.brand .wm{font-size:17px}.brand{gap:10px}}

/* Client logos: sit inside the grid, never stretched or cropped. */
.clients img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}

/* Photos inside any .still placeholder box: fill it, crop centred. */
.still img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Darken a real thumbnail so the play button and caption stay readable,
   and lift it slightly on hover. */
.still:has(img):has(.play)::before{content:"";position:absolute;inset:0;background:rgba(14,15,17,.42);z-index:1;transition:background .25s ease}
.still:has(img):has(.play):hover::before{background:rgba(14,15,17,.22)}
.still img{transition:transform .5s ease}
.still:hover img{transform:scale(1.03)}
.still .play,.still .slug{z-index:2}
.still:has(img) .play{background:rgba(14,15,17,.5);border-color:rgba(237,234,228,.5);backdrop-filter:blur(2px)}


/* ============================================================
   TRAILER STRIP — compact clips under a main project card
   ============================================================ */
.strip-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.clip{position:relative;aspect-ratio:16/9;width:100%;padding:0;overflow:hidden;cursor:pointer;
      background:rgba(21,23,26,.72);border:1px solid var(--line-soft);transition:border-color .2s ease}
.clip:hover{border-color:var(--line)}
.clip i{position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(237,234,228,.035) 0 1px,transparent 1px 11px)}
.clip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.clip:hover img{transform:scale(1.05)}
.clip:has(img)::before{content:"";position:absolute;inset:0;background:rgba(14,15,17,.42);z-index:1;transition:background .25s ease}
.clip:has(img):hover::before{background:rgba(14,15,17,.2)}
.clip .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
            width:34px;height:34px;border:1px solid rgba(237,234,228,.45);border-radius:50%;
            display:flex;align-items:center;justify-content:center;transition:.2s;background:rgba(14,15,17,.45)}
.clip .play::before{content:"";border-left:8px solid var(--paper);border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:3px}
.clip:hover .play{background:var(--tungsten);border-color:var(--tungsten)}
.clip:hover .play::before{border-left-color:var(--ink)}
.clip iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
@media(max-width:980px){.strip{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:600px){.strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.clip .play{width:26px;height:26px}}

/* Google Map embed on the contact page */
.map{position:relative;width:100%;aspect-ratio:16/10;border:1px solid var(--line-soft);overflow:hidden;background:var(--ink-2)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:invert(1) hue-rotate(180deg) saturate(.7) contrast(.92)}
@media(max-width:600px){.map{aspect-ratio:4/3}}

/* Episode number on each trailer clip */
.clip .ep{position:absolute;left:8px;bottom:6px;z-index:2;font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--paper);text-shadow:0 1px 4px rgba(14,15,17,.9)}

/* ============================================================
   ABOUT — character mark beside the opening text
   ============================================================ */
.about-split{display:grid;grid-template-columns:1.35fr 1fr;gap:64px;align-items:center}
.about-mark{display:flex;align-items:center;justify-content:center}
.about-mark img{width:100%;max-width:380px;height:auto;opacity:.85}
@media(max-width:980px){
  .about-split{grid-template-columns:1fr;gap:40px}
  .about-mark img{max-width:260px}
}

/* ============================================================
   VIDEO PLAYERS - the player is built on hover and sits hidden
   behind the thumbnail until playback actually starts.
   ============================================================ */
.yt-mount,.still iframe,.clip iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:0;opacity:0;pointer-events:none}
.still.live iframe,.clip.live iframe{z-index:4;opacity:1;pointer-events:auto}
/* once playing, drop the poster, the play button and the caption */
.still.live img,.still.live .play,.still.live .slug,.still.live i,.still.live::before,
.clip.live img,.clip.live .play,.clip.live .ep,.clip.live i,.clip.live::before{opacity:0;pointer-events:none}

/* ============================================================
   LOCATIONS - category cards
   Two images are stacked; the second fades in on hover.
   ============================================================ */
.loc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 28px}
.loc-shot{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line-soft);background:var(--ink-2)}
.loc-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease,transform .6s ease}
.loc-shot img.on{opacity:1}
.loc:hover .loc-shot img{transform:scale(1.04)}
.loc-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,15,17,.55),transparent 45%);pointer-events:none}
.loc-count{position:absolute;right:10px;top:10px;z-index:2;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--paper);background:rgba(14,15,17,.6);backdrop-filter:blur(2px);padding:4px 8px;border:1px solid var(--line-soft)}
.loc h4{font-family:var(--display);font-size:24px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;margin-top:16px;line-height:1.15}
.loc .sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--tungsten);margin-top:7px}
.loc p{color:var(--muted);font-size:14.5px;margin-top:12px;max-width:38ch}
@media(max-width:980px){.loc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 22px}}
@media(max-width:600px){.loc-grid{grid-template-columns:1fr;gap:32px}}