@font-face { font-family:"Pretendard"; src:url("assets/PretendardVariable.woff2") format("woff2-variations"); font-weight:45 920; font-style:normal; font-display:swap; }
:root { --blue:#1d4ed8; --ink:#111827; --muted:#667085; --line:#d9dee8; --paper:#fff; --soft:#f2f5fa; --side:clamp(20px,5vw,72px); }
* { box-sizing:border-box; }
html { min-height:100%; }
body { min-height:100vh; margin:0; background:var(--paper); color:var(--ink); font-family:Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif; font-size:16px; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
::selection { background:#c7d7ff; color:var(--ink); }
.site-header { margin:0 var(--side); display:flex; align-items:center; justify-content:space-between; }
.site-header { height:92px; border-bottom:1px solid var(--line); }
.brand { font-size:18px; font-weight:750; letter-spacing:-.04em; }
nav { display:flex; align-items:center; gap:clamp(18px,3.5vw,48px); }
nav a { min-height:44px; display:inline-flex; align-items:center; position:relative; color:var(--muted); font-size:14px; font-weight:600; letter-spacing:.02em; }
nav a.active { color:var(--ink); }
nav a.active::after { content:""; position:absolute; left:0; right:0; bottom:3px; height:2px; background:var(--blue); }
.home-main { min-height:calc(100vh - 156px); display:grid; place-items:center; padding:56px var(--side); overflow:hidden; }
.home-intro { width:min(100%,1180px); }
.home-intro h1 { margin:0; font-size:clamp(82px,15vw,216px); line-height:.73; font-weight:760; letter-spacing:-.085em; }
.home-intro h1 span { display:block; width:max-content; max-width:100%; cursor:default; }
.home-intro h1 span:last-child { margin-left:auto; margin-right:clamp(0px,5vw,64px); color:var(--blue); }
.home-intro h1 b { display:inline-block; font-weight:inherit; transition:transform .35s cubic-bezier(.2,.75,.25,1),color .25s ease,letter-spacing .35s ease; will-change:transform; }
.home-meta { margin-top:clamp(42px,7vh,82px); padding-top:18px; border-top:1px solid var(--ink); display:flex; justify-content:space-between; gap:24px; font-size:clamp(14px,1.5vw,18px); font-weight:600; }
.home-meta p { margin:0; }
.page-main { width:min(100%,1324px); min-height:calc(100vh - 156px); margin:0 auto; padding:64px var(--side) 110px; }
.page-heading { margin-bottom:50px; }
.page-heading h1 { margin:0; font-size:clamp(42px,7vw,88px); line-height:1; font-weight:720; letter-spacing:-.055em; }
.profile-main { padding-top:42px; padding-bottom:42px; }
.profile-main .page-heading { margin-bottom:28px; }
.profile { width:100%; margin:0; display:grid; grid-template-columns:clamp(320px,31vw,400px) minmax(0,1fr); grid-template-areas:"photo name" "photo details"; column-gap:clamp(48px,6vw,72px); row-gap:18px; align-items:start; }
.profile-name { grid-area:name; margin:0; font-size:clamp(38px,4.2vw,58px); line-height:1; letter-spacing:-.055em; }
.profile-photo { grid-area:photo; margin:0; padding:0; aspect-ratio:1; background:var(--paper); border:1px solid #aeb8c8; overflow:hidden; }
.profile-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.profile-details { grid-area:details; }
.profile-bio { max-width:68ch; margin:0 0 24px; color:#465064; font-size:16px; line-height:1.62; word-break:keep-all; }
.profile-bio p { margin:0; }
.profile-bio p + p { margin-top:5px; }
.profile-bio strong { color:var(--ink); font-weight:650; }
.profile-bio .profile-goal { margin-top:16px; padding-left:14px; border-left:3px solid var(--blue); color:#263247; font-size:17px; line-height:1.45; letter-spacing:-.015em; }
.profile-bio .profile-goal strong { color:inherit; }
.detail-list { margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; border-top:1px solid var(--ink); border-bottom:1px solid var(--line); }
.detail-list > div { min-width:0; padding:12px 0 13px; }
.detail-list dt,.profile-links span { color:var(--muted); font-size:11px; }
.detail-list dt { margin-bottom:4px; letter-spacing:.03em; }
.detail-list dd { margin:0; font-size:15px; font-weight:600; white-space:nowrap; }
.detail-list a,.profile-links a { color:var(--blue); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.profile-links { margin-top:18px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0 18px; border-top:1px solid var(--ink); }
.profile-links a { min-width:0; min-height:58px; border-bottom:1px solid var(--line); display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; align-content:center; column-gap:7px; color:var(--ink); font-size:12px; text-decoration:none; }
.profile-links span { grid-column:1; grid-row:1; }
.profile-links strong { grid-column:1; grid-row:2; overflow:hidden; color:var(--blue); font-size:13px; font-weight:650; text-decoration:underline; text-overflow:ellipsis; white-space:nowrap; text-underline-offset:4px; }
.profile-links i { grid-column:2; grid-row:1 / span 2; align-self:center; }
.profile-links i { color:var(--blue); font-style:normal; transition:transform .2s ease; }
.works-main .page-heading { display:block; }
.page-heading > p { max-width:430px; margin:0 0 5px; color:var(--muted); font-size:15px; line-height:1.6; }
.work-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:64px 28px; }
.work-item { min-width:0; display:block; }
.work-image { margin:0; aspect-ratio:4/3; display:grid; place-items:center; background:var(--soft); border:1px solid var(--line); overflow:hidden; }
.work-image img { width:100%; height:100%; display:block; object-fit:contain; transition:transform .38s cubic-bezier(.2,.75,.25,1); }
.work-image-contain img { object-fit:contain; }
.work-info { margin-top:18px; }
.work-meta { display:block; margin-bottom:8px; color:var(--muted); font-size:11px; font-weight:650; letter-spacing:.08em; }
.work-info h2 { margin:0; font-size:clamp(25px,2.5vw,34px); font-weight:700; letter-spacing:-.035em; }
.work-info p { min-height:3em; margin:8px 0 0; color:#465064; font-size:15px; line-height:1.5; word-break:keep-all; }
.work-more { min-height:40px; margin-top:12px; display:inline-flex; align-items:center; gap:8px; color:var(--blue); font-size:13px; font-weight:650; text-decoration:underline; text-underline-offset:4px; }
.work-more i { font-style:normal; transition:transform .2s ease; }

.work-detail-main { padding-top:36px; }
.back-link { min-height:44px; display:inline-flex; align-items:center; color:var(--muted); font-size:12px; font-weight:650; letter-spacing:.06em; }
.project-hero { display:grid; grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr); gap:clamp(48px,6vw,80px); align-items:center; padding:30px 0 76px; border-bottom:1px solid var(--line); }
.project-kicker { margin:0 0 16px; color:var(--blue); font-size:12px; font-weight:700; letter-spacing:.08em; }
.project-intro h1 { margin:0; font-size:clamp(66px,8vw,112px); line-height:.85; font-weight:760; letter-spacing:-.07em; }
.project-intro h1.long-title { font-size:clamp(48px,6vw,78px); line-height:.95; }
.project-lead { max-width:34em; margin:28px 0 32px; color:#465064; font-size:17px; line-height:1.65; word-break:keep-all; }
.project-facts { margin:0; border-top:1px solid var(--ink); }
.project-facts > div { display:grid; grid-template-columns:86px 1fr; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); }
.project-facts dt { color:var(--muted); font-size:12px; }
.project-facts dd { margin:0; font-size:14px; font-weight:600; }
.project-cover { margin:0; aspect-ratio:4/3; background:var(--soft); border:1px solid var(--line); overflow:hidden; }
.project-cover img { width:100%; height:100%; display:block; object-fit:cover; }
.project-cover-wide img,.project-cover-poster img { object-fit:contain; }
.project-section { display:grid; grid-template-columns:70px minmax(0,850px); gap:26px; justify-content:center; padding:72px 0; border-bottom:1px solid var(--line); }
.project-section.compact-section { padding-top:50px; padding-bottom:50px; }
.section-index { padding-top:7px; color:var(--blue); font-size:12px; font-weight:700; letter-spacing:.08em; }
.project-section h2,.project-gallery-section h2 { margin:0 0 24px; font-size:clamp(28px,3.5vw,44px); line-height:1.08; letter-spacing:-.04em; }
.project-section p { margin:0; color:#465064; font-size:16px; line-height:1.8; word-break:keep-all; }
.project-section p + p { margin-top:16px; }
.project-copy strong,.project-section > div > p strong { color:var(--ink); font-weight:680; }
.role-list { margin:0; padding:0; list-style:none; border-top:1px solid var(--ink); }
.role-list li { display:grid; grid-template-columns:130px 1fr; gap:28px; padding:18px 0; border-bottom:1px solid var(--line); }
.role-list strong { font-size:14px; }
.role-list span { color:#465064; font-size:15px; line-height:1.6; }
.result-callout { padding:24px 26px; border-left:3px solid var(--blue); background:#f5f7fc; }
.result-callout strong,.result-callout span { display:block; }
.result-callout strong { color:var(--ink); font-size:23px; line-height:1.3; }
.result-callout span { margin-top:7px; color:var(--muted); font-size:14px; }
.project-links { display:flex; flex-wrap:wrap; gap:8px 28px; margin-top:26px; }
.project-links.links-without-intro { margin-top:0; }
.project-links a { min-height:44px; display:inline-flex; align-items:center; color:var(--blue); font-size:14px; font-weight:650; text-decoration:underline; text-underline-offset:5px; }
.feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:32px; }
.feature-grid article { padding:24px; border:1px solid var(--line); }
.feature-grid article > span { color:var(--blue); font-size:11px; font-weight:700; }
.feature-grid h3 { margin:14px 0 10px; font-size:20px; letter-spacing:-.025em; }
.feature-grid p { font-size:14px; line-height:1.65; }
.stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:28px; }
.stat-grid article { padding:22px 16px; border-top:2px solid var(--blue); background:var(--soft); }
.stat-grid strong,.stat-grid span { display:block; }
.stat-grid strong { font-size:34px; letter-spacing:-.04em; }
.stat-grid span { margin-top:5px; color:var(--muted); font-size:12px; }
.project-gallery-section { padding-top:70px; }
.section-heading-row { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:30px; }
.section-heading-row h2 { margin-bottom:0; }
.section-heading-row span { padding-bottom:4px; color:var(--muted); font-size:13px; }
.project-gallery { display:grid; gap:18px; }
.project-gallery figure { margin:0; background:var(--soft); border:1px solid var(--line); overflow:hidden; }
.project-gallery img { width:100%; height:100%; display:block; }
.project-gallery-phone { grid-template-columns:repeat(4,minmax(0,1fr)); }
.project-gallery-phone.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.project-gallery-phone figure { min-height:480px; padding:20px; display:grid; place-items:center; }
.project-gallery-phone img { max-height:620px; object-fit:contain; }
.project-gallery-wide { grid-template-columns:repeat(2,minmax(0,1fr)); }
.project-gallery-wide figure { aspect-ratio:16/10; }
.project-gallery-wide img { object-fit:cover; }
.report-poster { width:min(100%,900px); margin:0 auto; padding:14px; background:#234f76; }
.report-poster img { width:100%; height:auto; display:block; }
.section-title { margin:0 0 18px; font-size:18px; font-weight:650; letter-spacing:-.02em; }
.content-section { width:min(100%,760px); }
.playlist { width:min(100%,600px); min-height:388px; }
.playlist iframe { display:block; border:1px solid #aeb8c8; border-radius:12px; background:#121212; }
.gallery-section { margin-top:64px; }
.off-hours-main .gallery-section { width:100%; }
.photo-gallery { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-auto-flow:dense; align-items:start; gap:12px; }
.photo-gallery figure { margin:0; background:var(--soft); border:1px solid var(--line); overflow:hidden; }
.photo-gallery figure:nth-child(1),.photo-gallery figure:nth-child(2) { grid-column:span 6; }
.photo-gallery figure:nth-child(3),.photo-gallery figure:nth-child(4),.photo-gallery figure:nth-child(5),.photo-gallery figure:nth-child(6) { grid-column:span 3; }
.photo-gallery figure:nth-child(7) { grid-column:span 4; align-self:stretch; }
.photo-gallery figure:nth-child(8) { grid-column:span 8; }
.photo-gallery img { width:100%; height:auto; display:block; transition:transform .45s cubic-bezier(.2,.75,.25,1); }
.photo-gallery figure:nth-child(7) img { height:100%; object-fit:cover; }
.site-footer { min-height:64px; margin:0 var(--side); border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; color:#7b8493; }
.site-footer a { min-height:44px; display:inline-flex; align-items:center; gap:7px; color:inherit; font-size:13px; font-weight:500; text-decoration:none; }
.site-footer span { color:inherit; font-size:12px; font-weight:600; letter-spacing:.04em; }

@keyframes rise-in { from { opacity:.25; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes slide-left { from { opacity:.35; transform:translateX(-24px); } to { opacity:1; transform:translateX(0); } }
@keyframes slide-right { from { opacity:.35; transform:translateX(24px); } to { opacity:1; transform:translateX(0); } }
.home-intro h1 span:first-child { animation:slide-left .55s cubic-bezier(.2,.75,.25,1) backwards; }
.home-intro h1 span:last-child { animation:slide-right .55s .06s cubic-bezier(.2,.75,.25,1) backwards; }
.home-meta { animation:rise-in .4s .12s ease-out both; }
.page-heading h1 { animation:rise-in .4s ease-out both; }
.profile > *, .content-section { animation:rise-in .42s .05s ease-out both; }
.profile > :last-child, .gallery-section { animation-delay:.1s; }
.work-item { animation:rise-in .42s ease-out both; transition:transform .22s ease; }
.work-item:nth-child(2) { animation-delay:.05s; }
.work-item:nth-child(3) { animation-delay:.1s; }
.work-item:nth-child(4) { animation-delay:.15s; }
.photo-gallery figure { animation:rise-in .36s ease-out both; }
.photo-gallery figure:nth-child(2),.photo-gallery figure:nth-child(5) { animation-delay:.04s; }
.photo-gallery figure:nth-child(3),.photo-gallery figure:nth-child(6) { animation-delay:.08s; }
.photo-gallery figure:nth-child(4),.photo-gallery figure:nth-child(7) { animation-delay:.12s; }
.photo-gallery figure:nth-child(8) { animation-delay:.16s; }
@media (hover:hover) {
  nav a:hover { color:var(--blue); }
  .home-intro h1 span:first-child:hover b { color:var(--blue); transform:translateX(16px); letter-spacing:-.075em; }
  .home-intro h1 span:last-child:hover b { color:var(--ink); transform:translateX(-16px); letter-spacing:-.075em; }
  .site-footer a:hover { color:var(--ink); }
  .profile-links a:hover strong { color:#163ba5; }
  .profile-links a:hover i { transform:translate(3px,-3px); }
  .profile-photo img { transition:transform .4s ease; }
  .profile-photo:hover img { transform:scale(1.018); }
  .work-image { transition:background-color .2s ease; }
  .work-item:hover { transform:translateY(-5px); }
  .work-item:hover .work-image { background:#e8eefb; }
  .work-item:hover .work-image img { transform:scale(1.025); }
  .work-item:hover .work-more i { transform:translate(3px,-3px); }
  .photo-gallery figure:hover img { transform:scale(1.025); }
}
@media (max-width:760px) {
  .site-header { height:76px; } nav { gap:12px; } nav a { font-size:12px; letter-spacing:0; } .brand { font-size:16px; }
  .home-main { min-height:calc(100vh - 140px); padding-top:42px; padding-bottom:42px; }
  .home-intro h1 { font-size:clamp(70px,23vw,116px); line-height:.78; }
  .home-meta { flex-direction:column; gap:7px; }
  .page-main { padding-top:48px; padding-bottom:78px; } .page-heading { margin-bottom:35px; }
  .profile { grid-template-columns:1fr; grid-template-areas:"name" "photo" "details"; gap:28px; } .profile-name { font-size:40px; } .profile-photo { width:min(100%,520px); }
  .profile-main { padding-top:48px; padding-bottom:78px; }
  .profile-main .page-heading { margin-bottom:35px; }
  .profile-bio { font-size:14px; line-height:1.58; }
  .profile-bio p + p { margin-top:7px; }
  .profile-bio .profile-goal { font-size:16px; }
  .detail-list { display:block; border-bottom:0; }
  .detail-list > div { display:grid; grid-template-columns:88px 1fr; gap:12px; padding:14px 2px; border-right:0; border-bottom:1px solid var(--line); }
  .detail-list dt { margin:0; font-size:13px; }
  .detail-list dd { font-size:14px; white-space:normal; }
  .profile-links { grid-template-columns:1fr; }
  .profile-links a { min-height:48px; grid-template-columns:88px 1fr auto; gap:12px; font-size:14px; }
  .profile-links span,.profile-links strong { font-size:14px; }
  .works-main .page-heading { display:block; }
  .page-heading > p { margin-top:18px; }
  .work-gallery { grid-template-columns:1fr; gap:48px; }
  .work-info { margin-top:14px; } .work-info h2 { font-size:26px; } .work-info p { min-height:0; font-size:14px; }
  .work-detail-main { padding-top:24px; }
  .project-hero { grid-template-columns:1fr; gap:34px; padding-top:18px; padding-bottom:52px; }
  .project-intro h1 { font-size:clamp(58px,18vw,86px); }
  .project-intro h1.long-title { font-size:clamp(44px,13vw,64px); }
  .project-lead { margin-top:22px; font-size:16px; }
  .project-cover { grid-row:2; }
  .project-section { grid-template-columns:1fr; gap:12px; padding:52px 0; }
  .section-index { padding:0; }
  .project-section p { font-size:15px; line-height:1.75; }
  .role-list li { grid-template-columns:1fr; gap:6px; }
  .feature-grid,.stat-grid { grid-template-columns:1fr 1fr; }
  .project-gallery-section { padding-top:52px; }
  .section-heading-row { display:block; }
  .section-heading-row span { display:block; margin-top:8px; }
  .project-gallery-phone,.project-gallery-phone.three { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .project-gallery-phone figure { min-height:320px; padding:12px; }
  .project-gallery-wide { grid-template-columns:1fr; }
  .gallery-section { margin-top:48px; }
  .photo-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .photo-gallery figure:nth-child(1),.photo-gallery figure:nth-child(2) { grid-column:span 2; }
  .photo-gallery figure:nth-child(3),.photo-gallery figure:nth-child(4),.photo-gallery figure:nth-child(5),.photo-gallery figure:nth-child(6) { grid-column:span 1; }
  .photo-gallery figure:nth-child(7),.photo-gallery figure:nth-child(8) { grid-column:span 2; }
  .photo-gallery figure:nth-child(7) img { height:auto; object-fit:initial; }
}
@media (min-width:761px) and (max-width:1000px) {
  .profile-links { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:430px) { nav { gap:9px; } nav a { font-size:11px; } .home-intro h1 { font-size:21vw; } .home-intro h1 span:last-child { margin-right:0; } }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-delay:0ms !important; transition-duration:.01ms !important; }
}