/* Dark theme pass: black is the canvas and white is the active point color. */
:root { --paper: #1D1C1C; --ink: #FAFAF8; --line: rgba(250,250,248,.22); --muted: rgba(250,250,248,.62); }
html.intro-pending { overflow: hidden; }
#site-content { position: relative; z-index: 1; min-height: 100vh; overflow-anchor: none; background: var(--paper); transition: transform .9s cubic-bezier(.77,0,.18,1); }
html.intro-pending #site-content { transform: translateY(100vh); }
.site-intro { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center start; padding: var(--pad); background: #FAFAF8; color: #1D1C1C; transition: transform .9s cubic-bezier(.77,0,.18,1); }
.site-intro-wordmark { display: grid; gap: 2px; font-size: clamp(30px, 4.5vw, 72px); font-weight: 800; letter-spacing: -.08em; line-height: .78; }
.intro-word { display: flex; overflow: hidden; }
.intro-letter { display: inline-block; opacity: 0; transform: translateY(120%); }
html.intro-running .intro-letter { animation: intro-letter .42s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i) * 36ms); }
html.intro-complete #site-content { transform: translateY(0); }
html.intro-complete .site-intro { transform: translateY(-100%); pointer-events: none; }
html.intro-complete .intro-letter { opacity: 1; transform: translateY(0); }
.site-header { transition: opacity .35s ease, transform .35s ease; }
html.intro-pending .site-header, html.intro-running .site-header, html.intro-complete .site-header { opacity: 0; transform: translateY(-12px); pointer-events: none; }
html.intro-finished .site-header { opacity: 1; transform: translateY(0); }
@keyframes intro-letter { to { opacity: 1; transform: translateY(0); } }
.contact {
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.contact .outline-button { border-color: var(--ink); }
.contact .outline-button:hover { background: var(--ink); color: var(--paper); }
.contact input,
.contact textarea { border-bottom-color: var(--line); color: var(--ink); }
.contact .solid-button { background: var(--ink); color: var(--paper); }

.site-footer { position: relative; display: grid; place-items: center; min-height: 264px; padding: 56px var(--pad) 36px; background: var(--paper); color: var(--ink); border: 0; text-align: center; font-family: Pretendard, sans-serif; }
.footer-company { display: grid; justify-items: center; gap: 26px; }
.footer-title { margin: 0; font-size: clamp(20px, 2vw, 28px); font-weight: 800; letter-spacing: -.035em; }
.footer-details { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 24px; color: rgba(250,250,248,.7); font-size: 15px; font-style: normal; line-height: 1.7; }
.footer-details a { color: inherit; }
.footer-copyright { margin: 0; color: rgba(250,250,248,.56); font-size: 14px; }
.footer-admin { position: absolute; right: var(--pad); bottom: 20px; color: rgba(250,250,248,.5); font-size: 10px; }
.media-empty { background: var(--paper); color: var(--ink); }

/* Pretendard hierarchy: display / actions / labels / body. */
body { font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 400; }
.brand-lockup { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.brand-mark { width: 26px; height: 26px; display: block; object-fit: contain; }
.intro { display: block; min-height: auto; padding: clamp(150px, 14vw, 240px) var(--pad) clamp(72px, 8vw, 132px); }
.intro-copy { max-width: none; }
#intro-title { max-width: 1500px; margin: 0; font-size: clamp(68px, 10.2vw, 196px); letter-spacing: .012em; line-height: .94; white-space: normal; }
@media (min-width: 801px) { #intro-title { font-size: clamp(64px, 8.4vw, 160px); white-space: nowrap; } }
.intro-copy .outline-button { margin-top: clamp(34px, 4vw, 66px); }
.intro-media { width: 100%; height: min(50vw, 790px); min-height: 440px; margin-top: clamp(58px, 7vw, 120px); overflow: hidden; border-radius: 8px; background: var(--paper); }
.intro-video, .service-video, .work-video, .detail-video { filter: none; }
.service-copy>p:not(.service-number), .detail-hero>p:not(.eyebrow) { white-space: pre-line; }
.service-copy>p:not(.service-number) { width: 100%; max-width: min(100%, 680px); }
.service-row { grid-template-columns: 1.25fr 1fr; }
.service-copy { padding: clamp(36px, 5vw, 84px) clamp(24px, 3vw, 56px); }
@media(max-width:1100px) { .service-row { grid-template-columns: 1fr; } }
.video-frame { display: grid; place-items: center; overflow: hidden; background: var(--paper); }
.video-frame > video { width: 100%; height: 100%; display: block; object-fit: contain; background: var(--paper); }
.youtube-frame > iframe { width: 100%; height: 100%; display: block; border: 0; background: var(--paper); }
.video-aspect-16-9 { width: 100%; aspect-ratio: 16 / 9; }
.video-aspect-9-16 { width: auto; max-width: 100%; aspect-ratio: 9 / 16; }
.intro-media { height: auto; min-height: 0; display: flex; justify-content: center; overflow: visible; }
.intro-media .video-aspect-9-16 { height: min(78vh, 900px); }
.service-media { display: flex; align-items: center; justify-content: center; background: var(--paper); }
.service-media .video-aspect-9-16 { height: min(76vh, 760px); }
.detail-hero .video-aspect-9-16 { height: min(78vh, 900px); }
.detail-grid .video-aspect-9-16 { height: min(68vh, 680px); }
.detail-grid .video-frame > video { height: 100%; }
.detail-grid .video-frame > .work-video { height: 100%; }
.service-row { opacity: 0; transform: translateY(110px) scale(.96); clip-path: inset(14% 0 0 0); filter: blur(7px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .95s cubic-bezier(.22,1,.36,1), clip-path .9s cubic-bezier(.22,1,.36,1), filter .72s ease; will-change: opacity, transform, clip-path, filter; }
.service-row.is-visible { opacity: 1; transform: translateY(0) scale(1); clip-path: inset(0); filter: blur(0); }
.service-row .service-copy { opacity: 0; transform: translateX(-72px); transition: opacity .7s .16s ease, transform .9s .16s cubic-bezier(.22,1,.36,1); }
.service-row.reverse .service-copy { transform: translateX(72px); }
.service-row .service-media { opacity: 0; transform: translateY(56px) scale(1.08); transition: opacity .7s .24s ease, transform 1s .24s cubic-bezier(.22,1,.36,1); }
.service-row.is-visible .service-copy, .service-row.is-visible .service-media { opacity: 1; transform: translate(0) scale(1); }
#service-list .service-row:nth-child(2) { transition-delay: .06s; }
#service-list .service-row:nth-child(3) { transition-delay: .1s; }
.section-reveal { opacity: 0; transform: translateY(90px) scale(.98); filter: blur(6px); transition: opacity .8s ease, transform .95s cubic-bezier(.22,1,.36,1), filter .7s ease; }
.section-reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
.intro h1, .about h2, .contact h2, .service-copy h2, .detail-hero h1 { font-weight: 800; letter-spacing: -0.035em; }
.main-nav, .outline-button, .text-link, .solid-button, .section-heading { font-weight: 700; }
.eyebrow, .section-label, .service-number, .work-card p { font-family: Pretendard, sans-serif; font-weight: 600; letter-spacing: .04em; }
.about-heading { max-width: 920px; }
.about-subtitle { max-width: 790px; margin: clamp(28px, 4vw, 58px) 0 0; color: var(--muted); font-size: clamp(22px, 2.3vw, 42px); font-weight: 600; line-height: 1.16; letter-spacing: -.03em; white-space: pre-line; }
.about-copy p { margin: 0; white-space: pre-line; }
.contact h2 { max-width: 1260px; margin: 0; }
.contact-subtitle { max-width: 920px; margin: clamp(26px, 3vw, 48px) 0 clamp(48px, 6vw, 90px); color: var(--muted); font-size: clamp(21px, 2.2vw, 38px); font-weight: 600; line-height: 1.22; letter-spacing: -.03em; white-space: pre-line; }

.language-switch { display: inline-flex; align-items: center; gap: 7px; margin-left: 0; font-size: 12px; font-weight: 700; }
.language-switch button { appearance: none; border: 0; padding: 4px 0; background: transparent; color: var(--muted); cursor: pointer; }
.language-switch button.is-active { color: var(--ink); border-bottom: 1px solid var(--ink); }
.header-cta { margin-left: 12px; }
.detail-page .language-switch { margin-left: auto; }
.detail-page .language-switch + .outline-button { margin-left: 12px; }

:root { --header-control-size: 52px; --header-control-gap: clamp(14px, 1.7vw, 28px); }
.site-header { align-items: center; }
.header-actions { display: flex; align-items: center; gap: var(--header-control-gap); min-height: var(--header-control-size); margin-left: auto; }
.header-actions .main-nav { display: flex; align-items: center; gap: var(--header-control-gap); height: var(--header-control-size); margin-left: 0; }
.main-nav a, .language-switch { min-height: var(--header-control-size); display: inline-flex; align-items: center; }
.language-switch { gap: 7px; margin-left: 0; }
.language-switch button { min-height: var(--header-control-size); display: inline-flex; align-items: center; }
.header-cta { min-height: var(--header-control-size); margin-left: 0; padding: 0 24px; }
.admin-control { width: var(--header-control-size); height: var(--header-control-size); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 var(--header-control-size); border: 1px solid var(--ink); border-radius: 50%; font-size: 23px; line-height: 1; transition: background .3s,color .3s,transform .3s; }
.admin-control:hover { background: var(--ink); color: var(--paper); transform: rotate(28deg); }
.detail-page .site-header .header-actions .outline-button { margin-left: 0; }

@media(max-width:800px) {
  .site-header { padding: 16px 24px; gap: 14px; }
  .brand-lockup { gap: 5px; }
  .brand-mark { width: 20px; height: 20px; }
  .wordmark { font-size: 11px; }
  .header-actions { gap: 14px; min-height: 44px; }
  .header-actions .main-nav { gap: 16px; height: 44px; font-size: 12px; }
  .main-nav a { min-height: 44px; padding: 0; white-space: nowrap; }
  .language-switch { gap: 5px; font-size: 11px; }
  .intro { padding: 132px 20px 62px; }
  #intro-title { font-size: clamp(32px, 8.4vw, 54px); letter-spacing: .01em; line-height: .98; }
  .intro-media { height: 54vh; min-height: 320px; margin-top: 46px; }
  .intro-media { height: auto; min-height: 0; }
  .intro-media .video-aspect-9-16 { height: min(72vh, 680px); }
  .service-media .video-aspect-9-16 { height: min(72vh, 640px); }
  .detail-hero .video-aspect-9-16 { height: min(76vh, 760px); }
  .detail-grid .video-aspect-9-16 { height: min(70vh, 620px); }
  .service-row { grid-template-columns: 1fr; transform: none; clip-path: none; filter: none; opacity: 1; transition: none; }
  .service-row .service-copy, .service-row.reverse .service-copy, .service-row .service-media { transform: none; opacity: 1; transition: none; }
  .section-reveal { transform: translateY(56px) scale(.99); }
  .about-subtitle { max-width: 100%; }
  .contact-subtitle { margin-bottom: 48px; }
  .site-footer { min-height: 0; padding: 48px 20px 32px; }
  .footer-company { gap: 20px; }
  .footer-details { flex-direction: column; gap: 5px; font-size: 13px; }
  .footer-details [aria-hidden="true"] { display: none; }
  .footer-admin { right: 20px; bottom: 14px; }
  .brand-mark { width: 22px; height: 22px; }
  .language-switch { margin-left: auto; }
  .header-cta { display: none; }
  .header-actions { gap: 10px; min-height: 44px; }
  .language-switch, .language-switch button { min-height: 44px; }
  .admin-control { width: 44px; height: 44px; flex-basis: 44px; font-size: 20px; }
  .detail-page .language-switch + .outline-button { display: inline-flex; margin-left: 0; }
}

@media(max-width:520px) {
  .site-header { padding-inline: 18px; }
  .header-actions .main-nav { display: none; }
}