:root {
  color-scheme: light;
  --ink: #101d35;
  --navy: #0e1830;
  --blue: #2248ac;
  --blue-bright: #315bdb;
  --red: #ed352b;
  --muted: #56637a;
  --line: #dce1e9;
  --pale: #f3f5f9;
  --white: #fff;
  --page: 1248px;
  --font: "Pretendard", "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 93px; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: var(--font); line-height: 1.6; word-break: keep-all; overflow-wrap: break-word; }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid #5c86f5; outline-offset: 4px; }
p, h1, h2, h3, figure, ol, ul { margin: 0; }
h1, h2, h3 { line-height: 1.22; letter-spacing: -.052em; }
h2 { font-size: clamp(2rem, 3.9vw, 3.35rem); font-weight: 850; }
h3 { font-size: 1.28rem; font-weight: 800; }
.shell { max-width: var(--page); margin-inline: auto; width: calc(100% - 96px); }
.skip-link { position: fixed; top: -100px; left: 12px; z-index: 100; color: white; background: var(--blue); padding: 12px 16px; }
.skip-link:focus { top: 12px; }
.header { position: sticky; top: 0; z-index: 20; background: var(--white); border-bottom: 1px solid #e4e8ef; }
.header-inner { height: 84px; display: flex; justify-content: space-between; align-items: center; }
.brand { display: flex; align-items: center; }
.brand img { width: 103px; height: auto; }
.main-nav { display: flex; gap: clamp(22px, 3vw, 44px); align-items: center; font-size: .92rem; font-weight: 750; }
.main-nav > a:not(.button):hover { color: var(--blue); }
.menu-toggle { display: none; }
.button { display: inline-flex; gap: 17px; align-items: center; justify-content: center; min-height: 51px; padding: 11px 20px; border-radius: 3px; border: 1px solid transparent; font-weight: 780; font-size: .94rem; line-height: 1.4; white-space: normal; transition: color .18s, background .18s, border-color .18s; }
.button span { line-height: 1; font-size: 1.12em; }
.nav-cta { min-height: 43px; background: var(--navy); color: #fff; }
.nav-cta:hover { background: var(--blue); }
.primary { background: var(--blue); color: #fff; }
.primary:hover { background: #1b3990; }
.hero { position: relative; min-height: min(610px, 73vh); overflow: hidden; background: var(--navy); color: #fff; }
.hero-photo { position: absolute; inset: 0 0 0 39%; overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 54%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0e1830 0%, #0e1830 33%, rgba(14,24,48,.91) 42%, rgba(14,24,48,.37) 60%, transparent 80%), linear-gradient(0deg, #0b152b85 0%, transparent 28%); pointer-events: none; }
.hero-inner { position: relative; z-index: 1; display: flex; align-items: center; min-height: inherit; padding-block: 76px 92px; }
.hero-copy { max-width: 790px; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 17px; color: var(--blue); font-family: var(--font); font-size: .72rem; font-weight: 850; letter-spacing: .16em; line-height: 1.3; }
.eyebrow b { color: var(--red); font-variant-numeric: tabular-nums; }
.hero-label { color: #cbd8f5; letter-spacing: .12em; }
.hero-label::before { content: ""; width: 23px; height: 3px; background: var(--red); }
.hero-label span { width: 3px; height: 3px; border-radius: 100%; background: currentColor; }
.hero h1 { font-size: clamp(2.55rem, 5.55vw, 5.2rem); line-height: 1.13; font-weight: 900; text-shadow: 0 4px 22px #0a122133; }
.hero-description { margin-top: 24px; color: #e5ebf9; font-size: clamp(1rem, 1.55vw, 1.19rem); line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-actions .primary { background: var(--blue-bright); }
.hero-actions .primary:hover { background: #2548b9; }
.outline { border-color: #dbe5fd6b; color: #fff; background: #111f3a38; }
.outline:hover { background: #fff; color: var(--ink); border-color: #fff; }
.hero-caption { position: absolute; bottom: 21px; right: 0; color: #fff; font-size: .76rem; display: flex; gap: 8px; align-items: center; }
.hero-caption i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.fact-bar { background: #111f3c; color: #fff; }
.facts { display: grid; grid-template-columns: 1fr 1.25fr 1fr; padding: 25px 0; }
.facts > div { display: grid; padding: 4px 26px 5px; gap: 2px; border-left: 1px solid #a7b8e535; }
.facts > div:first-child { border-left: 0; padding-left: 0; }
.facts strong { font-size: clamp(1.15rem, 2.45vw, 2rem); line-height: 1.2; letter-spacing: -.03em; }
.facts small { font-size: .62em; }
.facts span { font-size: .77rem; color: #bdcbea; }
.section { padding-block: clamp(61px, 7vw, 104px); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 31px; }
.section-head > p { color: var(--muted); max-width: 335px; font-size: .98rem; }
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.service { display: flex; min-height: 244px; flex-direction: column; padding: 26px 23px 19px; border-right: 1px solid var(--line); transition: background .18s; }
.service:last-child { border-right: 0; }
.service:hover { background: #f2f5fe; }
.service svg { width: 32px; height: 32px; fill: none; stroke: var(--blue); stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 22px; }
.service p { color: var(--muted); font-size: .91rem; margin-top: 11px; margin-bottom: 17px; }
.service > span { color: var(--blue); font-weight: 750; font-size: .82rem; display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.service i { font-style: normal; }
.guide-band { background: var(--navy); color: #fff; }
.guide-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 7vw, 96px); align-items: center; padding-block: clamp(60px, 7vw, 96px); }
.guide-grid .eyebrow, .contact-grid .eyebrow { color: #b5c6ef; }
.guide-intro { margin-top: 20px; color: #cbd5ed; }
.checklist { list-style: none; padding: 0; margin-top: 23px; }
.checklist li { padding: 10px 0 10px 22px; border-bottom: 1px solid #d7e4ff2e; position: relative; }
.checklist li::before { content: ""; position: absolute; top: 21px; left: 1px; width: 7px; height: 7px; background: #6487ff; }
.checklist span { display: block; color: #bac7e2; font-size: .88rem; }
.video-mount { width: 100%; aspect-ratio: 16/9; background: #071022; overflow: hidden; }
.video-mount iframe { width: 100%; height: 100%; border: 0; }
.video-play { display: block; width: 100%; height: 100%; border: 0; padding: 0; position: relative; color: #fff; background: #0a1328; }
.video-play img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; opacity: .76; transition: opacity .22s; }
.video-play:hover img { opacity: .96; }
.play-glyph { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; padding-left: 4px; width: 62px; height: 62px; border: 1px solid #ffffffaa; border-radius: 100%; background: #102245b8; }
.duration { position: absolute; right: 12px; bottom: 12px; font-size: .75rem; background: #101928e0; padding: 3px 8px; border-radius: 2px; font-variant-numeric: tabular-nums; }
.video-details { display: flex; justify-content: space-between; align-items: start; gap: 16px; padding-top: 13px; }
.video-details small { display: block; color: #bfcced; font-size: .75rem; }
.video-details a { color: #dbe5ff; font-size: .82rem; text-decoration: underline; text-underline-offset: 4px; }
.projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.project-card { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--line); text-align: left; padding: 0; color: var(--ink); }
.project-image { width: 100%; aspect-ratio: 1.52; overflow: hidden; }
.project-image img { width: 100%; height: 100%; object-fit: cover; object-position: var(--position, center); transition: transform .28s ease; }
.project-card:hover img { transform: scale(1.045); }
.project-copy { padding: 20px 20px 18px; display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 12px; }
.project-tag { display: block; margin-bottom: 6px; color: var(--blue); font-size: .71rem; font-weight: 850; }
.project-title { display: block; font-weight: 850; font-size: clamp(1.03rem, 2.15vw, 1.37rem); letter-spacing: -.04em; line-height: 1.28; }
.project-arrow { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 100%; color: var(--blue); }
.project-card:hover .project-arrow { background: var(--blue); color: #fff; border-color: var(--blue); }
.more-projects { margin-top: 24px; background: #fff; border-color: var(--line); color: var(--blue); }
.more-projects:hover { border-color: var(--blue); }
.section-note { margin-top: 12px; color: var(--muted); font-size: .83rem; }
.equipment-band { background: var(--pale); }
.text-link { color: var(--blue); display: inline-block; font-size: .93rem; font-weight: 760; margin-top: 16px; text-decoration: underline; text-underline-offset: 5px; }
.about-grid, .faq-grid, .contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 7vw, 94px); align-items: start; }
.about-copy { max-width: 370px; margin-top: 18px; color: var(--muted); }
.timeline { list-style: none; padding: 2px 0 0; }
.timeline li { display: grid; grid-template-columns: 135px 1fr; padding: 23px 0 23px 25px; gap: 18px; position: relative; border-left: 1px solid var(--line); }
.timeline li::before { position: absolute; content: ""; left: -5px; top: 32px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); }
.timeline time { color: var(--blue); font-weight: 850; font-variant-numeric: tabular-nums; }
.timeline span { display: block; color: var(--muted); font-size: .85rem; }
.faq-band { background: var(--pale); }
.faq-list { border-top: 2px solid var(--ink); }
.faq-list details { border-bottom: 1px solid #ccd5e3; }
.faq-list summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; padding: 17px 0; font-weight: 760; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--blue); font-size: 1.15rem; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { color: var(--muted); padding: 0 19px 16px 0; font-size: .92rem; }
.contact-band { background: #102045; color: #fff; }
.contact-grid > div > p:not(.eyebrow) { margin-top: 20px; color: #d2dcf3; }
.contact-direct { display: grid; margin-top: 33px; justify-items: start; gap: 4px; }
.contact-direct > span { font-size: .83rem; color: #d5e0fa; }
.contact-direct > a { font-size: clamp(1.15rem, 2.9vw, 1.6rem); font-weight: 790; text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.email-copy { padding: 4px 0; background: transparent; border: none; color: #e5edff; font-size: .83rem; text-decoration: underline; text-underline-offset: 4px; }
.copy-status:empty, .form-status:empty { display: none; }
.inquiry { color: var(--ink); background: #fff; padding: clamp(20px, 4vw, 36px); border-radius: 4px; }
.form-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; gap: 10px; }
.form-heading > span { color: var(--muted); font-size: .77rem; }
.fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.fields label { display: grid; min-width: 0; gap: 6px; font-size: .84rem; font-weight: 760; }
.fields label.wide { grid-column: 1 / -1; }
.fields label.wide span { display: inline; color: var(--muted); }
.fields input, .fields select, .fields textarea, #copy-fallback { width: 100%; min-width: 0; border: 1px solid #c6cfdf; border-radius: 2px; min-height: 43px; padding: 8px 10px; background: #fff; color: var(--ink); font-size: .88rem; font-weight: 500; }
.fields textarea, #copy-fallback { resize: vertical; }
.fields input::placeholder, .fields textarea::placeholder { color: #67758c; }
.form-note { margin: 15px 0; color: var(--muted); font-size: .82rem; }
.form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.copy-inquiry { border: 0; background: transparent; color: var(--blue); text-decoration: underline; text-underline-offset: 4px; font-weight: 750; font-size: .82rem; padding: 5px; }
.form-status { margin-top: 12px; font-size: .86rem; color: var(--blue); }
#copy-fallback { margin-top: 12px; min-height: 100px; }
.footer { background: #0c162c; color: #e3eafa; }
.footer-inner { padding: 26px 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: .87rem; }
.footer-inner div { display: grid; }
.footer-inner div span { color: #b2c0de; font-size: .77rem; }
.footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.top-link { white-space: nowrap; }
@media (max-width: 980px) {
  .shell { width: calc(100% - 60px); }
  .service { padding-inline: 17px; }
  .projects-grid { gap: 15px; }
  .project-copy { padding-inline: 15px; }
  .hero::after { background: linear-gradient(90deg,#0e1830 0%,#0e1830 28%,#0e1830db 43%,#0e183049 76%,transparent),linear-gradient(0deg,#0b152b85,transparent 28%); }
}
@media (max-width: 740px) {
  html { scroll-padding-top: 76px; }
  .shell { width: calc(100% - 36px); }
  .header-inner { height: 65px; }
  .brand img { width: 77px; }
  .menu-toggle { display: grid; place-content: center; gap: 4px; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); background: white; border-radius: 3px; }
  .menu-toggle span { width: 19px; height: 2px; background: var(--ink); }
  .main-nav { display: none; position: absolute; top: 65px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); padding: 10px 18px 18px; gap: 0; }
  .main-nav.open { display: grid; }
  .main-nav > a:not(.button) { padding: 11px 9px; border-bottom: 1px solid var(--line); }
  .main-nav .nav-cta { margin-top: 10px; justify-self: start; }
  .hero { min-height: 0; }
  .hero-photo { inset: auto 0 0; height: 45%; }
  .hero-photo img { object-position: 50% 58%; }
  .hero::after { background: linear-gradient(180deg,#0e1830 0%,#0e1830 55%,#0e183073 66%,transparent 85%,#0e183077 100%); }
  .hero-inner { align-items: start; padding: 45px 0 clamp(185px,44vw,270px); }
  .hero h1 { font-size: clamp(2.14rem, 7.5vw, 3.55rem); }
  .hero-description { margin-top: 17px; }
  .hero-actions { margin-top: 21px; gap: 8px; }
  .hero-caption { bottom: 13px; }
  .desktop-break { display: none; }
  .facts { grid-template-columns: .85fr 1.25fr 1fr; padding-block: 15px; }
  .facts > div { padding-inline: 10px; }
  .facts > div:last-child { padding-right: 0; }
  .facts strong { font-size: clamp(.82rem, 3.4vw, 1.26rem); }
  .facts span { font-size: clamp(.59rem, 2.45vw, .75rem); line-height: 1.35; margin-top: 4px; }
  .section-head { display: grid; align-items: start; gap: 12px; margin-bottom: 23px; }
  .section-head > p { max-width: 480px; }
  .services-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .service { min-height: 210px; padding: 16px 14px; }
  .service:nth-child(2) { border-right: 0; }
  .service:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .service svg { margin-bottom: 13px; width: 28px; height: 28px; }
  .service h3 { font-size: 1.1rem; }
  .service p { font-size: .84rem; }
  .guide-grid, .equipment-grid, .about-grid, .faq-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .projects-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .project-copy { padding: 13px 10px; }
  .project-arrow { width: 28px; height: 28px; }
  .footer-inner { flex-wrap: wrap; }
}
@media (max-width: 370px) {
  .button { gap: 9px; padding-inline: 12px; font-size: .87rem; }
  .fields { grid-template-columns: 1fr; }
  .project-arrow { display: none; }
  .timeline li { grid-template-columns: 105px 1fr; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

.archive-back { color: var(--blue); font-weight: 800; font-size: .92rem; }
.archive-back:hover { text-decoration: underline; text-underline-offset: 4px; }
.archive-hero { background: var(--navy); color: #fff; padding-block: clamp(42px, 7vw, 85px); }
.archive-hero .eyebrow { color: #b5c6ef; }
.archive-hero h1 { font-size: clamp(2.5rem, 6vw, 4.3rem); font-weight: 900; }
.archive-hero p:not(.eyebrow) { margin-top: 16px; color: #dce5fa; }
.archive-meta { display: inline-block; margin-top: 21px; color: #c3d0ee; border-top: 1px solid #859bd45e; padding-top: 10px; font-size: .82rem; }
.archive-list { max-width: 1040px; padding-block: clamp(32px, 5vw, 64px); }
.archive-instructions { color: var(--muted); margin-bottom: 16px; font-size: .91rem; }
.archive-case { border-top: 1px solid var(--line); }
.archive-case:last-child { border-bottom: 1px solid var(--line); }
.archive-case summary { display: grid; grid-template-columns: 42px 1fr 26px; gap: 12px; align-items: center; min-height: 75px; padding: 10px 14px; cursor: pointer; list-style: none; }
.archive-case summary::-webkit-details-marker { display: none; }
.archive-case summary:hover, .archive-case[open] summary { background: var(--pale); }
.case-index { align-self: center; color: var(--blue); font-size: 1.02rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.case-label { display: grid; }
.case-label > span { color: var(--blue); font-size: .73rem; font-weight: 800; }
.case-label strong { color: var(--ink); font-size: clamp(1rem, 2.6vw, 1.17rem); }
.case-label small { color: var(--muted); font-size: .79rem; }
.case-toggle { display: grid; place-items: center; color: var(--blue); }
.case-toggle::after { content: "+"; font-size: 1.2rem; }
.archive-case[open] .case-toggle::after { content: "−"; }
.case-page { margin: 0 0 18px; background: var(--pale); }
.case-page img { display: block; width: 100%; height: auto; }
.case-page figcaption { padding: 8px 14px; color: var(--muted); font-size: .76rem; }
.project-image img { object-fit: contain; background: var(--pale); }
@media (max-width: 520px) {
  .archive-case summary { grid-template-columns: 27px 1fr 21px; gap: 9px; padding-inline: 8px; }
}

/* Generated wide hero and equipment details */
.hero-photo { inset: 0; }
.hero-photo img { object-position: 68% 55%; }
.equipment-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 18px 0; margin: 0 0 28px; background: var(--navy); color: #fff; }
.equipment-overview > div { display: grid; gap: 4px; min-width: 0; padding: 0 clamp(14px, 3vw, 28px); border-right: 1px solid #a7b8e535; }
.equipment-overview > div:last-child { border: 0; }
.equipment-overview dt { color: #bdcbea; font-size: .82rem; }
.equipment-overview dd { margin: 0; font-size: clamp(1.08rem, 2.9vw, 1.92rem); line-height: 1.3; font-weight: 830; letter-spacing: -.032em; }
.equipment-overview dd small { font-size: .66em; }
.equipment-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(22px, 5vw, 64px); align-items: start; }
.equipment-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.equipment-photo figcaption { margin-top: 8px; font-size: .77rem; color: var(--muted); }
.equipment-inquiry { margin-top: 20px; }
.equipment-detail-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 1px 0 11px; }
.equipment-detail-head p { color: var(--muted); font-size: .84rem; }
.equipment-table { width: 100%; border-collapse: collapse; color: var(--ink); background: #fff; font-size: .91rem; }
.equipment-table thead { background: #e3e9f5; text-align: left; }
.equipment-table th, .equipment-table td { padding: 9px 13px; border-bottom: 1px solid var(--line); }
.equipment-table tbody th { text-align: left; color: var(--blue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.equipment-table tbody tr:nth-child(even) { background: #fafbfe; }
.equipment-table small { font-size: .77em; }
.equipment-table :is(th,td):last-child { text-align: right; white-space: nowrap; }
.equipment-badge { display: inline-block; margin-left: .28em; padding: 0 .44em; border-radius: 3px; background: #e8eefc; color: var(--blue); font-size: .75em; font-weight: 780; white-space: nowrap; }
.experience { margin-top: clamp(28px, 5vw, 54px); padding-top: 22px; border-top: 1px solid var(--line); }
.experience-grid { margin: 14px 0 4px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.experience-grid > div { min-width: 0; padding: 16px; background: var(--pale); border-top: 2px solid var(--blue); }
.experience-grid dt { color: var(--blue); margin-bottom: 7px; font-weight: 830; font-size: .85rem; }
.experience-grid dd { margin: 4px 0; font-size: .91rem; }
@media (max-width: 740px) {
  .hero-photo { inset: auto 0 0; }
  .hero-photo img { object-position: 73% 58%; }
  .equipment-overview > div { padding-inline: 10px; }
  .equipment-overview dt { font-size: .73rem; line-height: 1.35; }
  .equipment-grid { grid-template-columns: minmax(0, 1fr); }
  .equipment-side { order: 1; }
}
@media (max-width: 520px) {
  .equipment-table { font-size: .83rem; }
  .equipment-table th, .equipment-table td { padding: 8px 7px; }
  .experience-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .timeline li { grid-template-columns: 100px 1fr; gap: 10px; padding-left: 14px; }
}