:root{--paper:#f6f5f0;--ink:#171e30;--muted:#636771;--blue:#244edb;--line:#d8d9d7;--space:clamp(28px,4.4vw,84px)}
*{box-sizing:border-box}
html{background:var(--paper);color:var(--ink);font-family:Pretendard,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;-webkit-font-smoothing:antialiased}
body{margin:0}
p,h1,h2{margin:0}
a{color:inherit;text-underline-offset:5px}
a:hover{color:var(--blue)}
a:focus-visible{outline:2px solid var(--blue);outline-offset:6px}
.page{height:100vh;height:100dvh;min-height:620px;padding:0 var(--space);position:relative;display:flex;flex-direction:column}
.header{min-height:clamp(76px,10vh,108px);display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}
.identity{display:flex;align-items:center;gap:22px}
.initials{font-size:28px;letter-spacing:-2px;font-weight:800;color:var(--blue)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;line-height:1.5}
.course-name{font-size:14px;font-weight:500}
.about-layout{flex:1;min-height:0;display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(40px,5vw,96px);padding:clamp(28px,5.3vh,58px) 0 clamp(28px,5vh,54px)}
.introduction{display:flex;flex-direction:column;justify-content:space-between;min-width:0;animation:appear .65s ease-out both}
.intro-copy{padding-top:clamp(25px,7vh,78px)}
.section-label{color:var(--blue);margin-bottom:clamp(24px,4.5vh,48px)}
.section-label span{margin-right:12px}
h1{font-size:clamp(80px,8.5vw,160px);line-height:1.1;letter-spacing:-.075em;font-weight:700;margin-left:-.05em;overflow-wrap:anywhere}
.affiliation{font-size:clamp(16px,1.18vw,22px);line-height:1.6;margin-top:clamp(20px,3vh,32px);word-break:keep-all}
.statement{font-size:clamp(23px,2vw,36px);font-weight:600;letter-spacing:-.045em;line-height:1.55;max-width:17em;margin-top:clamp(28px,4.5vh,50px);word-break:keep-all;overflow-wrap:anywhere}
.intro-footer{padding-top:24px;color:var(--muted);font-size:14px;line-height:1.7}
.coordinates{font-family:ui-monospace,monospace;font-size:12px;letter-spacing:.08em;margin-top:10px}
.contacts{display:flex;gap:22px;margin-top:18px;font-size:13px}
.right-column{min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:clamp(22px,4vh,44px)}
.graphic{min-height:0;display:flex;flex-direction:column;align-items:center;animation:appear .85s ease-out both}
.radar{display:block;flex:1;min-height:0;width:100%;max-width:510px;color:var(--ink);padding:24px}
.radar-grid{stroke:#cbd0d5;stroke-width:.8}
.directions{font:12px ui-monospace,monospace;text-anchor:middle;color:var(--muted)}
.radar-sweep{transform-box:view-box;transform-origin:250px 250px;stroke:var(--blue);stroke-width:1.3;opacity:.75;animation:radar-scan 10s linear infinite}
.radar-contact{fill:var(--blue);opacity:.3;animation:radar-detection 10s linear infinite}
/* 같은 10초 주기에서 각 탐지점의 방위에 도달하는 시간입니다. */
.contact-one{animation-delay:1.25s}
.contact-two{animation-delay:5s}
.contact-three{animation-delay:7.916667s}
@keyframes radar-scan{to{transform:rotate(360deg)}}
@keyframes radar-detection{0%{opacity:1}8%,100%{opacity:.3}}
.information{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);padding-top:clamp(20px,3vh,32px);animation:appear .9s ease-out both}
.information article{padding:0 clamp(12px,1.6vw,30px);border-left:1px solid var(--line);min-width:0}
.information article:first-child{padding-left:0;border:0}
.information article:last-child{padding-right:0}
.information svg{width:23px;height:23px;fill:none;stroke:var(--blue);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.information h2{font-size:12px;letter-spacing:.13em;font-weight:600;margin-bottom:12px}
.information p{font-size:clamp(14px,1.05vw,17px);line-height:1.85;word-break:keep-all;overflow-wrap:anywhere;color:#505766}
.edge-route{position:absolute;right:calc(var(--space)/2);top:42%;height:150px;width:1px;background:var(--line);display:flex;flex-direction:column;justify-content:space-between;align-items:center}
.edge-route i{width:4px;height:4px;border-radius:50%;background:#a3a8b1}
.edge-route i:nth-child(2){background:var(--blue);width:6px;height:6px}
@keyframes appear{from{opacity:0}to{opacity:1}}
@media(min-width:901px) and (max-height:760px){.about-layout{padding-top:22px;padding-bottom:24px;gap:40px}.intro-copy{padding-top:15px}.section-label{margin-bottom:20px}h1{font-size:clamp(72px,7vw,110px)}.statement{margin-top:22px;font-size:26px}.intro-footer{padding-top:14px}.information{padding-top:18px}.information svg{margin-bottom:8px}.information p{line-height:1.65}.right-column{gap:20px}}
@media(max-width:900px){.page{height:auto;min-height:100dvh;padding:0 24px}.header{min-height:90px;gap:16px}.identity{gap:12px}.identity .eyebrow{font-size:10px;max-width:105px}.course-name{font-size:12px;max-width:140px;text-align:right;line-height:1.6}.about-layout{display:flex;flex-direction:column;padding:46px 0 36px;gap:44px}.intro-copy{padding:0}.section-label{margin-bottom:24px}h1{font-size:clamp(76px,15vw,116px)}.affiliation{font-size:16px;margin-top:20px}.statement{font-size:clamp(24px,5vw,32px);margin-top:24px;max-width:20em}.intro-footer{margin-top:24px}.right-column{gap:30px}.graphic{height:360px}.radar{max-width:320px}.information{padding-top:26px}.information article{padding:0 14px}.information p{font-size:14px}.edge-route{display:none}}
@media(max-width:480px){.information{grid-template-columns:1fr;gap:24px}.information article,.information article:first-child,.information article:last-child{padding:0 0 24px;border:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:24px 1fr;column-gap:14px}.information svg{grid-row:1 / 3;margin:0}.information h2{margin:4px 0 10px}.information p{grid-column:2;font-size:16px}.graphic{height:330px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* 주변 탐지: 위치와 크기는 유지하고 선과 글자 색만 반응합니다. */
.cursor-layer{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:10}
.cursor-point{position:absolute;top:0;left:0;width:5px;height:5px;margin:9px 0 0 9px;border-radius:50%;background:var(--blue);opacity:0;transition:transform 400ms ease-out,opacity 300ms ease-out}
.cursor-point.is-visible{opacity:.7}
.mouse-radar .radar-sweep{animation:none;transition:transform 400ms ease-out}
.mouse-radar .radar-contact{animation:none;transition:opacity 400ms ease-out}
.mouse-radar .radar-contact.is-detected{animation:content-detection 800ms ease-out both}
@keyframes content-detection{0%{opacity:.3}35%{opacity:1}100%{opacity:.3}}
.information article{position:relative;transition:border-color 400ms ease-out}
.information article::before{content:"";position:absolute;top:calc(-1 * clamp(20px,3vh,32px) - 1px);left:0;right:0;height:1px;background:var(--blue);opacity:0;transition:opacity 400ms ease-out}
.information svg{transition:stroke 400ms ease-out}
.information h2{transition:color 400ms ease-out}
.mouse-radar .information svg{stroke:var(--muted)}
.information article.is-detected{border-color:var(--blue)}
.information article.is-detected::before{opacity:1}
.information article.is-detected svg{stroke:var(--blue)}
.information article.is-detected h2{color:var(--blue)}
@media(min-width:901px) and (max-height:760px){.information article::before{top:-19px}}
@media(max-width:900px){.information article::before{top:-27px}}
@media(max-width:480px){.information article::before{top:auto;bottom:-1px}}
@media(hover:none),(pointer:coarse){
  .cursor-layer{display:none}
  .radar-sweep,.radar-contact{animation-duration:30s}
  .contact-one{animation-delay:3.75s}
  .contact-two{animation-delay:15s}
  .contact-three{animation-delay:23.75s}
}
@media(prefers-reduced-motion:reduce){.cursor-layer{display:none}.radar-sweep{transform:none!important}}

/* 선박 커서: 실제 좌표는 즉시 반영하고 선체 방향만 부드럽게 바꿉니다. */
.ship-cursor{position:absolute;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;opacity:0;pointer-events:none}
.ship-cursor.is-visible{opacity:1}
.ship-cursor svg{display:block;transform-origin:center}
.ship-cursor::before{content:"";position:absolute;inset:-4px;border:1px solid var(--blue);border-radius:50%;opacity:0;transition:opacity 180ms ease}
.ship-cursor.is-clickable::before{opacity:.65}
@media(hover:hover) and (pointer:fine){.ship-visible,.ship-visible *{cursor:none!important}}
.radar-controlled .radar-sweep,.mouse-radar.radar-controlled .radar-sweep{animation:none;transition:none}
.radar-controlled .radar-contact,.mouse-radar.radar-controlled .radar-contact{animation:none;transition:none}
.sweep-sector{fill:var(--blue);fill-opacity:.035;stroke:none}
.cursor-detection{fill:none;stroke:var(--ink);stroke-width:.8;opacity:0;transition:opacity 350ms ease}
.cursor-detection.is-visible{opacity:.5}
@media(prefers-reduced-motion:reduce){.cursor-layer{display:block}.cursor-detection{display:none}}
@media(hover:none),(pointer:coarse){.cursor-layer{display:none}}

/* 세로 항로: 첫 화면의 그리드는 유지하고 아래에 독립 섹션을 연결합니다. */
html{scroll-behavior:smooth;scroll-padding-top:76px}
.journey{display:block}
.top-nav{position:fixed;inset:0 0 auto;z-index:8;min-height:64px;padding:18px var(--space);display:flex;align-items:center;justify-content:space-between;gap:24px;background:rgba(246,245,240,.94);backdrop-filter:blur(3px);border-bottom:1px solid var(--line)}
.wordmark{text-decoration:none;font-size:14px;font-weight:700;letter-spacing:.1em}
.nav-links{display:flex;gap:clamp(16px,2.2vw,42px)}
.nav-links a{font-size:12px;letter-spacing:.06em;text-decoration:none;color:var(--muted)}
.nav-links a[aria-current]{color:var(--blue)}
.page{padding-top:64px;min-height:100vh;min-height:100dvh;height:100dvh}
.journey>section{scroll-margin-top:64px}
.journey-section{min-height:100vh;min-height:100dvh;padding:clamp(88px,12vh,150px) var(--space);border-top:1px solid var(--line);display:flex;align-items:center}
.section-content{width:100%;max-width:1500px;margin:auto}
.chapter-title{font-size:clamp(30px,4vw,68px);line-height:1.3;letter-spacing:-.05em;word-break:keep-all}
.chapter-description{margin-top:28px;max-width:640px;font-size:clamp(16px,1.4vw,22px);line-height:1.8;color:var(--muted);word-break:keep-all}
.small-note{color:var(--muted);margin-left:26px;font-size:11px}
.interest-field{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,5vw,90px);margin-top:clamp(60px,10vh,110px)}
.interest-entry{display:flex;flex-direction:column;align-items:center;min-width:0}
.interest-orbit{width:clamp(130px,15vw,230px);aspect-ratio:1;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);font:inherit;font-size:clamp(18px,1.7vw,27px);position:relative;transition:transform 400ms ease,border-color 400ms ease}
.interest-orbit::before{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:var(--blue);left:50%;top:-3px}
.interest-orbit::after{content:"";position:absolute;width:1px;height:24px;background:var(--line);left:50%;bottom:-25px}
.interest-entry p{max-width:280px;min-height:90px;line-height:1.8;font-size:16px;color:var(--muted);margin-top:44px;opacity:0;visibility:hidden;transition:opacity 400ms ease;word-break:keep-all;text-align:center}
.interest-entry.is-open .interest-orbit{transform:scale(1.035);border-color:var(--blue)}
.interest-entry.is-open p{opacity:1;visibility:visible}
.interest-orbit:focus-visible{outline:2px solid var(--blue);outline-offset:8px}
.navigation-process{position:relative;margin:110px 0 40px}
.process-track{position:absolute;top:0;left:0;right:0;height:1px;background:var(--line)}
.process-line{display:block;height:1px;background:var(--blue);transform:scaleX(0);transform-origin:left}
.process-ship{position:absolute;top:-13px;left:0;width:26px;height:26px;color:var(--ink);transform:translateX(-50%) rotate(90deg)}
.process-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;gap:40px;padding:0;margin:0}
.process-steps li{position:relative;padding-top:44px}
.process-steps li:nth-child(2){text-align:center}.process-steps li:last-child{text-align:right}
.waypoint{width:5px;height:5px;background:var(--ink);position:absolute;top:-2px;left:0;border-radius:50%}
.process-steps li:nth-child(2) .waypoint{left:50%}.process-steps li:last-child .waypoint{left:auto;right:0}
.process-steps h3{font-size:14px;letter-spacing:.12em}.process-steps p{font-size:16px;line-height:1.7;color:var(--muted);word-break:keep-all}
.route-started .process-line{animation:draw-route 3s ease-in-out both}.route-started .process-ship{animation:sail-route 3s ease-in-out both}
@keyframes draw-route{to{transform:scaleX(1)}}@keyframes sail-route{to{left:100%}}
.future-statement{font-size:clamp(32px,4.5vw,76px);line-height:1.55;letter-spacing:-.04em;max-width:18em;word-break:keep-all}
.destination-route{width:100%;height:auto;max-height:180px;margin-top:60px;display:block}
.contact-section{min-height:55vh}
.contact-addresses{display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin:48px 0 80px;font-size:clamp(16px,2vw,28px);overflow-wrap:anywhere}
.arrival{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:24px;color:var(--muted);font-size:12px;letter-spacing:.05em}
.scroll-route{position:fixed;right:20px;top:38%;width:1px;height:180px;background:var(--line);display:flex;flex-direction:column;justify-content:space-between;align-items:center;z-index:7}
.scroll-fill{position:absolute;inset:0;background:var(--blue);transform:scaleY(0);transform-origin:top}
.scroll-route i{width:5px;height:5px;border-radius:50%;background:#a3a8b1;z-index:1}.scroll-route i.active{background:var(--blue)}
.scroll-enhanced .reveal{opacity:0;transform:translateY(16px);transition:opacity 700ms ease,transform 700ms ease}.scroll-enhanced .reveal.is-revealed{opacity:1;transform:none}
.ship-cursor{margin:-2px 0 0 -13px}.ship-cursor svg{transform-origin:13px 2px}
@media(max-width:900px){.top-nav{padding:14px 24px;flex-wrap:wrap;gap:12px}.nav-links{gap:18px;flex-wrap:wrap}.nav-links a{font-size:10px}.page{height:auto;min-height:100dvh;padding-top:96px}.journey>section{scroll-margin-top:100px}.journey-section{padding:90px 24px;min-height:auto}.scroll-route{display:none}.interest-field{gap:30px;margin-top:50px}.small-note{display:block;margin:14px 0 0}.navigation-process{margin-top:80px}.contact-section{min-height:60vh}}
@media(max-width:600px){.top-nav{gap:10px}.wordmark{font-size:12px}.nav-links{width:100%;justify-content:space-between;gap:8px}.interest-field{grid-template-columns:1fr}.interest-orbit{width:160px}.interest-entry p{min-height:0}.interest-entry{min-height:270px}.process-steps{grid-template-columns:1fr;gap:48px;padding-left:35px}.process-steps li,.process-steps li:nth-child(2),.process-steps li:last-child{text-align:left;padding-top:0}.process-track{left:0;top:0;bottom:0;width:1px;height:auto;right:auto}.process-line{width:1px;height:100%;transform:scaleY(0);transform-origin:top}.process-ship{left:0;top:0;transform:translate(-50%,-50%) rotate(180deg)}.process-steps .waypoint,.process-steps li:nth-child(2) .waypoint,.process-steps li:last-child .waypoint{left:-37px;right:auto;top:18px}.route-started .process-line{animation-name:draw-vertical}.route-started .process-ship{animation-name:sail-vertical}@keyframes draw-vertical{to{transform:scaleY(1)}}@keyframes sail-vertical{to{top:100%}}.contact-addresses{font-size:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scroll-enhanced .reveal{opacity:1;transform:none}.interest-entry.is-open .interest-orbit{transform:none}.process-line{transform:scaleX(1)}.process-ship{left:100%}.scroll-fill{transition:none}}
@media(max-width:600px) and (prefers-reduced-motion:reduce){.process-line{transform:scaleY(1)}.process-ship{left:0;top:100%}}

/* 상단 이름 제거 후 기존 메뉴의 오른쪽 정렬을 유지합니다. */
.top-nav .nav-links{margin-left:auto}