/* MOSEORY / WORKS ARCHIVE — v4.3
   메인 컬러는 아래 :root 와 [data-theme="dark"]에서 바꿀 수 있습니다.
*/
:root {
  color-scheme: light;
  --bg: #ffffff; --surface: #fff; --surface-2: #f1f1ec;
  --ink: #181a19; --ink-soft: #4b4d4a; --muted: #7b7f7a;
  --line: #dcded7; --yellow: #f3cb40; --yellow-dark: #805c00;
  --shadow: 0 23px 75px rgba(28, 34, 29, 0.11);
  --ease: cubic-bezier(.19,1,.22,1);
  --header-height: 82px;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111313; --surface: #1c1e1d; --surface-2: #272a27;
  --ink: #f2f2ec; --ink-soft: #c1c6bd; --muted: #9a9f95;
  --line: #343a34; --yellow: #f3cb40; --yellow-dark: #f0cc62;
  --shadow: 0 23px 75px rgba(0,0,0,.25);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 105px; }
body { margin:0; background:var(--bg); color:var(--ink); font-family: "Pretendard", "SUIT", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body.mobile-open {overflow:hidden;}
a { color:inherit; text-decoration:none; }
button {font:inherit; cursor:pointer;}
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline:3px solid var(--yellow-dark); outline-offset:4px; }
::selection {background:var(--yellow);color:#171817;}
.container { width:min(100% - 56px, 1650px); margin-inline:auto; }
.mono { font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace; letter-spacing:.085em; font-size:.68rem; }
.eyebrow { font-family: "SFMono-Regular", Consolas, monospace; font-size:.72rem; font-weight:700; letter-spacing:.12em; color:var(--yellow-dark); margin:0; }
.yellow-dot {color:#dfb111;}
.skip-link {position:fixed; top:-100px;left:20px;padding:12px;background:var(--yellow);color:#171817;z-index:2000;}
.skip-link:focus{top:20px;}

/* 02 — NAVIGATION */
.site-header{position:sticky;top:0;z-index:100;background:color-mix(in srgb, var(--bg) 90%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}
.header-inner{height:var(--header-height);display:flex;align-items:center;justify-content:space-between;gap:25px;}
.brand{flex:none;}
.desktop-nav{display:flex;align-items:center;gap:clamp(12px,1.6vw,29px);margin-left:auto;}
.desktop-nav a{position:relative;font-size:.72rem;white-space:nowrap;font-family:Arial,Helvetica,sans-serif;font-weight:800;letter-spacing:.025em;line-height:2;color:var(--ink-soft);transition:color 180ms;}
.desktop-nav a::after{content:"";position:absolute;left:0;bottom:-8px;width:0;height:3px;background:var(--yellow);transition:width 240ms var(--ease);}
.desktop-nav a:hover,.desktop-nav a.is-active{color:var(--ink);}
.desktop-nav a:hover::after,.desktop-nav a.is-active::after{width:100%;}
.header-actions{display:flex;gap:8px;align-items:center;}
.icon-button{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:50%;transition:background 180ms,border-color 180ms;}
.icon-button:hover{background:var(--yellow);color:#171717;border-color:var(--yellow);}
.theme-icon{font-size:1.25rem;line-height:1;}
.menu-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:6px;}
.menu-toggle span{height:2px;width:18px;background:currentColor;display:block;}
.mobile-nav[hidden]{display:none!important;}
.mobile-nav{display:none;}

/* 04 — WORK GRID */
.work-section{padding-bottom:110px;scroll-margin-top:var(--header-height);}
.section-divider{border-top:1px solid var(--line);}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;padding:34px 0 35px;}
.section-heading h2{margin:12px 0 0;font-size:clamp(2.4rem,5.3vw,5rem);line-height:.98;letter-spacing:-.07em;font-family:Arial,Helvetica,sans-serif;font-weight:900;}
.section-heading h2 em{font-style:normal;color:var(--muted);}
.section-caption{margin:0;max-width:340px;font-size:.85rem;line-height:1.85;color:var(--muted);}
.section-caption strong{color:var(--ink-soft);font-weight:700;}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 26px;}
.filter-chip{display:inline-flex;align-items:center;gap:11px;border:1px solid var(--line);background:transparent;color:var(--ink-soft);padding:11px 16px;border-radius:50px;font-size:.73rem;font-family:Arial,Helvetica,sans-serif;font-weight:800;letter-spacing:.02em;transition:background 180ms,color 180ms,transform 180ms,border-color 180ms;}
.filter-chip span{opacity:.55;font-size:.63rem;}
.filter-chip:hover{transform:translateY(-2px);border-color:var(--ink);}
.filter-chip.is-active{background:var(--ink);color:var(--bg);border-color:var(--ink);}
/* 카드에 정보가 붙는 구성은 이미지와 메타데이터를 동일 크기로 통일합니다. */
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px;align-items:start;}
.project-card{appearance:none;border:0;background:none;padding:0;min-width:0;display:flex;flex-direction:column;text-align:left;color:var(--ink);width:100%;}
.project-grid.grid-filtered .project-card{grid-column:auto;}
.card-picture{position:relative;display:block;overflow:hidden;aspect-ratio:1.4;background:var(--surface-2);border:1px solid var(--line);isolation:isolate;width:100%;}
.card-picture::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 65%,rgba(0,0,0,.11));pointer-events:none;z-index:1;opacity:.7;transition:opacity .4s;}
.card-picture img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.003);transition:transform 950ms var(--ease),filter 500ms;}
.project-card:hover .card-picture img,.project-card:focus-visible .card-picture img{transform:scale(1.07);}
.project-card:hover .card-picture::after{opacity:0;}
.sample-tag{position:absolute;top:18px;left:18px;background:rgba(20,22,22,.77);color:#fff;border:1px solid rgba(255,255,255,.5);padding:9px 11px;font-size:.61rem;letter-spacing:.04em;z-index:2;backdrop-filter:blur(8px);}
.card-corner{position:absolute;right:18px;top:18px;width:41px;height:41px;border-radius:50%;background:var(--yellow);color:#111;display:grid;place-items:center;font-size:1.35rem;z-index:2;transform:rotate(0deg);transition:transform 300ms var(--ease),background 300ms;}
.project-card:hover .card-corner{transform:rotate(45deg);}
.card-meta{display:flex;justify-content:space-between;align-items:start;gap:12px;padding:17px 1px 0;min-height:100px;}
.card-info{display:flex;flex-direction:column;gap:5px;}
.card-kind{font-size:.66rem;letter-spacing:.09em;font-weight:800;color:var(--yellow-dark);font-family:Consolas,monospace;}
.card-info strong{font-size:clamp(1.23rem,1.65vw,1.8rem);letter-spacing:-.035em;line-height:1.24;font-family:Arial,Helvetica,sans-serif;}
.card-korean{font-size:.78rem;color:var(--muted);}
.card-number{color:var(--muted);font-size:.72rem;}
.work-tail{display:flex;align-items:center;gap:20px;color:var(--muted);margin-top:70px;}
.work-tail-line{flex:1;border-top:1px solid var(--line);}

/* 06 — CONTACT / FOOTER */
.contact-section{background:var(--surface-2);color:var(--ink);padding:85px 0 90px;border-top:1px solid var(--line);}
.contact-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:100px;align-items:end;}
.contact-section .eyebrow{color:var(--yellow-dark);}
.contact-section h2{font-family:Arial,Helvetica,sans-serif;font-size:clamp(4rem,8.2vw,9.5rem);letter-spacing:-.085em;line-height:.91;margin:23px 0 0;font-weight:900;}
.contact-section h2 em{font-style:normal;color:var(--muted);opacity:1;}
.contact-right{padding:0 0 9px;}
.contact-right > p{font-size:1.04rem;line-height:1.85;font-weight:650;margin:0 0 22px;}
.contact-links{display:flex;flex-wrap:wrap;gap:10px;min-height:40px;}
.no-links{border:1px solid var(--line);padding:14px 16px;font-size:.75rem;font-family:Consolas,monospace;font-weight:700;color:var(--ink-soft);}
.contact-link{border:1px solid var(--line);padding:14px 18px;font-weight:800;font-size:.78rem;transition:background 180ms,color 180ms;}
.contact-link:hover{background:var(--ink);color:var(--bg);}
.contact-note{display:block;margin-top:25px;font-size:.75rem;color:var(--muted);}
.site-footer{padding-top:34px;padding-bottom:35px;display:flex;align-items:end;justify-content:space-between;gap:35px;}
.footer-left{display:flex;flex-direction:column;gap:8px;}
.footer-brand{font-family:Arial,sans-serif;letter-spacing:-.08em;font-size:1.55rem;font-weight:900;}
.footer-left>span{font-size:.63rem;color:var(--muted);letter-spacing:.06em;}
.footer-right{display:flex;gap:26px;align-items:center;flex-wrap:wrap;}
.footer-right>span,.footer-right a{font-size:.7rem;color:var(--muted);font-family:Arial,sans-serif;letter-spacing:.04em;font-weight:700;}
.footer-right a:hover{color:var(--ink);}

/* 07 — PROJECT DETAILS */
.project-dialog{position:fixed;inset:0;margin:auto;width:min(100% - 38px,1120px);max-height:min(92dvh,930px);padding:0;border:1px solid var(--line);background:var(--bg);color:var(--ink);box-shadow:0 30px 150px rgba(0,0,0,.32);overflow-y:auto;}
.project-dialog::backdrop{background:rgba(9,12,11,.75);backdrop-filter:blur(6px);}
.dialog-close{position:sticky;float:right;top:14px;margin-right:14px;margin-bottom:-58px;z-index:1;background:var(--surface);}
.dialog-media{background:var(--surface-2);}
.dialog-art{appearance:none;border:0;display:grid;place-items:center;position:relative;background:var(--surface-2);width:100%;padding:22px;min-height:220px;cursor:zoom-in;}
.dialog-art img{max-width:100%;width:auto;height:auto;max-height:min(60dvh,680px);object-fit:contain;display:block;}
.image-zoom-label{position:absolute;right:22px;bottom:20px;background:rgba(20,20,20,.76);color:#fff;padding:9px 13px;font-size:.72rem;font-weight:700;letter-spacing:.02em;}
.dialog-thumbnails{display:flex;gap:10px;padding:14px clamp(18px,4vw,36px) 18px;border-top:1px solid var(--line);overflow-x:auto;}
.dialog-thumbnails[hidden]{display:none!important;}
.dialog-thumbnail{flex:0 0 96px;height:70px;background:var(--surface);border:2px solid transparent;opacity:.67;padding:3px;transition:border-color 180ms,opacity 180ms;}
.dialog-thumbnail img{width:100%;height:100%;object-fit:contain;display:block;}
.dialog-thumbnail:hover,.dialog-thumbnail.is-selected{border-color:var(--yellow-dark);opacity:1;}
/* 프로젝트 상세 화면 위에 뜨는 독립 확대 보기: 배경 클릭 시 확대 창만 닫힙니다. */
.image-lightbox{position:fixed;inset:0;max-width:none;max-height:none;width:100vw;height:100dvh;margin:0;padding:0;border:0;background:rgba(16,17,17,.96);color:#fff;overflow:hidden;}
.image-lightbox:not([open]){display:none;}
.image-lightbox[open]{display:flex;flex-direction:column;align-items:center;}
.image-lightbox::backdrop{background:rgba(0,0,0,.75);}
.lightbox-close{position:absolute;z-index:3;right:clamp(15px,3vw,45px);top:clamp(16px,3vw,35px);color:#fff;border:1px solid #777;background:rgba(25,25,25,.7);padding:11px 15px;font-weight:750;border-radius:3px;}
.lightbox-close:hover{background:#444;}
.lightbox-close span{margin-left:8px;font-size:.78rem;}
.lightbox-stage{width:100%;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:clamp(68px,9vh,94px) clamp(18px,4vw,65px) 26px;cursor:zoom-out;}
.lightbox-stage img{display:block;max-width:100%;max-height:100%;object-fit:contain;cursor:default;box-shadow:0 10px 50px rgba(0,0,0,.25);}
.lightbox-controls{display:flex;align-items:center;justify-content:center;gap:22px;flex:0 0 auto;margin:0 0 10px;}
.lightbox-controls button{width:40px;height:40px;background:#2a2a2a;color:#fff;border:1px solid #555;border-radius:50%;font-size:1.2rem;}
.lightbox-controls button:hover:not(:disabled){background:var(--yellow);color:#151515;border-color:var(--yellow);}
.lightbox-controls button:disabled{opacity:.25;cursor:default;}
.lightbox-controls span{color:#e5e5e5;min-width:65px;text-align:center;}
.lightbox-hint{font-size:.7rem;color:#aaa;margin-bottom:12px;}

.dialog-copy{padding:32px clamp(25px,5vw,60px) 45px;}
.dialog-copy h2{font-family:Arial,sans-serif;letter-spacing:-.06em;font-weight:900;font-size:clamp(2.2rem,5vw,4.5rem);line-height:1;margin:11px 0 15px;}
.dialog-copy>p:not(.eyebrow){color:var(--ink-soft);line-height:1.85;font-size:.96rem;}
.dialog-details{display:flex;gap:65px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:25px 0;margin-top:30px;}
.dialog-details>div{display:flex;flex-direction:column;gap:8px;}
.dialog-details span{font-size:.68rem;color:var(--muted);letter-spacing:.1em;font-weight:700;}
.dialog-details strong{font-size:.8rem;}
.dialog-copy .dialog-placeholder{font-size:.73rem!important;color:var(--muted)!important;margin-top:20px;}

/* MOTION / BREAKPOINTS */
@media(max-width:1250px){
  .container{width:min(100% - 48px,1650px);}
  .desktop-nav{gap:12px;}
  .desktop-nav a{font-size:.64rem;}
}
@media(max-width:1000px){
  :root{--header-height:72px;}
  .desktop-nav{display:none;}
  .menu-toggle{display:flex;}
  .mobile-nav:not([hidden]){display:flex;flex-direction:column;position:absolute;top:var(--header-height);left:0;right:0;padding:20px 32px 30px;background:var(--bg);border-bottom:1px solid var(--line);max-height:calc(100dvh - var(--header-height));overflow:auto;}
  .mobile-nav a{font-family:Arial,Helvetica,sans-serif;font-size:1.65rem;font-weight:900;letter-spacing:-.05em;display:flex;justify-content:space-between;align-items:center;padding:16px 2px;border-bottom:1px solid var(--line);}
  .mobile-nav a span{font:400 .68rem Consolas,monospace;color:var(--muted);}
  .contact-inner{gap:35px;}
}
@media(max-width:720px){
  .container{width:calc(100% - 28px);}
  
  
  .section-heading{align-items:start;flex-direction:column;gap:20px;padding:27px 0;}
  .section-heading h2{font-size:clamp(2.5rem,9vw,4.6rem);}
  .section-caption{font-size:.78rem;}
  .filters{gap:6px;margin-bottom:18px;}
  .filter-chip{font-size:.65rem;padding:9px 12px;}
  .project-grid,.project-grid.grid-filtered{grid-template-columns:1fr;gap:18px;}
  .project-card,.project-grid.grid-filtered .project-card{grid-column:1;}
  .project-card .card-picture{aspect-ratio:1.35;}
  .card-meta{padding-top:13px;min-height:92px;}
  .card-info strong{font-size:1.45rem;}
  .work-section{padding-bottom:95px;}

  .work-tail{margin-top:45px;gap:8px;}
  .work-tail .mono{font-size:.53rem;}
  .contact-section{padding:74px 0;}
  .contact-inner{grid-template-columns:1fr;gap:36px;}
  .contact-section h2{font-size:clamp(4rem,14vw,6.5rem);}
  .site-footer{align-items:start;flex-direction:column;gap:28px;}
  .footer-right{gap:16px;}
  .dialog-details{gap:25px;}
  .dialog-art{padding:12px;}
  .dialog-thumbnail{flex-basis:80px;height:62px;}
  .lightbox-stage{padding:65px 10px 25px;}
  .lightbox-close span{display:none;}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important;}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}


/* ===== MOSEORY / WORKS DISPLAY ===== */
/* 메인 큰 문구 제거, 작품 중심 화면으로 */
.work-section{padding-top:clamp(25px,4vw,54px);min-height:calc(100svh - var(--header-height) - 140px);}
.work-intro{padding:2px 0 34px;align-items:end;}
/* 문의: 다른 페이지 아래 반복하지 않고 독립 화면으로만 노출 */
.contact-section[hidden],.work-section[hidden]{display:none!important;}
.contact-section{display:block;background:var(--bg);padding:clamp(65px,9vw,140px) 0 80px;min-height:calc(100svh - var(--header-height) - 108px);border-top:0;}
.contact-inner{grid-template-columns:minmax(0,1.1fr) minmax(290px,.9fr);gap:clamp(25px,8vw,140px);align-items:start;}
.contact-heading h1{font-family:Arial,Helvetica,sans-serif;font-weight:900;font-size:clamp(3.2rem,6.8vw,7.8rem);letter-spacing:-.07em;line-height:.95;margin:20px 0 29px;}
.contact-heading>p{font-size:clamp(.93rem,1.35vw,1.12rem);font-weight:550;line-height:1.85;color:var(--ink-soft);}
.contact-right{padding-top:9px;}
.contact-right>.eyebrow{display:block;margin-bottom:26px;}
.contact-links{display:flex;flex-wrap:wrap;gap:10px;min-height:40px;}
.contact-note{margin-top:28px;line-height:1.8;}
.contact-back{display:inline-block;margin-top:38px;font-size:.85rem;font-weight:750;border-bottom:1px solid var(--ink);padding-bottom:8px;}
.contact-back:hover{color:var(--yellow-dark);}
/* 카드와 상세창의 가로 슬라이드 */
.card-picture{isolation:isolate;}
.card-slide-track,.dialog-slide-track{display:flex;width:100%;height:100%;transform:translate3d(0,0,0);transition:transform 750ms cubic-bezier(.22,.7,.22,1);will-change:transform;}
.gallery-slide{display:block;flex:0 0 100%;height:100%;min-width:0;overflow:hidden;}
.gallery-slide img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 950ms var(--ease);}
.project-card:hover .gallery-slide img,.project-card:focus-visible .gallery-slide img{transform:scale(1.035);}
.card-slide-count{position:absolute;right:18px;bottom:17px;z-index:3;color:#fff;background:rgba(17,17,17,.65);padding:9px 12px;font-weight:700;border-radius:2px;}
.dialog-slide-viewport{display:block;overflow:hidden;width:100%;height:min(60dvh,650px);min-height:250px;}
.dialog-slide-track .gallery-slide{display:flex;align-items:center;justify-content:center;}
.dialog-slide-track .gallery-slide img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}
.dialog-art{display:block;padding:22px;overflow:hidden;}
.dialog-slide-count{position:absolute;left:26px;bottom:19px;background:rgba(20,20,20,.73);color:#fff;padding:9px 12px;}
.dialog-slide-count[hidden]{display:none!important;}
/* 이미지 확대 화면은 양 옆에 넘기기 버튼, 하단 중앙에는 카운트만 표시 */
.lightbox-stage{position:relative;padding:clamp(72px,9vh,95px) clamp(58px,9vw,135px) 18px;}
.lightbox-stage img{max-width:100%;max-height:100%;object-fit:contain;}
.lightbox-side{position:absolute;top:50%;transform:translateY(-50%);z-index:3;display:grid;place-items:center;width:clamp(40px,4.4vw,62px);height:clamp(40px,4.4vw,62px);background:rgba(45,45,45,.85);color:#fff;border:1px solid #777;border-radius:50%;font-size:2.1rem;line-height:1;transition:background .2s,color .2s,border-color .2s;}
.lightbox-side:hover{background:var(--yellow);border-color:var(--yellow);color:#171717;}
.lightbox-side[hidden]{display:none!important;}
.lightbox-prev{left:clamp(10px,2.5vw,42px);}
.lightbox-next{right:clamp(10px,2.5vw,42px);}
.lightbox-controls{margin:0 0 10px;}
.lightbox-controls span{color:#eee;}
@media(max-width:1000px){
  .contact-inner{grid-template-columns:1fr;gap:40px;}
}
@media(max-width:720px){
  .work-section{padding-top:28px;}



  .contact-section{padding-top:55px;}
  .contact-heading h1{font-size:clamp(3rem,15vw,5rem);}
  .dialog-art{padding:12px;}
  .dialog-slide-viewport{height:min(53dvh,470px);min-height:200px;}
  .lightbox-stage{padding:67px 47px 18px;}
  .lightbox-side{width:37px;height:37px;font-size:1.7rem;}
  .lightbox-prev{left:7px;}.lightbox-next{right:7px;}
}
@media(prefers-reduced-motion:reduce){
  .card-slide-track,.dialog-slide-track{transition:none!important;}
}

.work-section{padding-top:clamp(34px,5vw,64px);}

/* 작은 소제목과 여백은 그대로 유지 */
.work-intro{display:flex;align-items:center;min-height:78px;padding:26px 0 24px;}
.work-intro .eyebrow{display:block;}
/* ALL WORKS에서는 설명 없이 이미지로만 감상; 분야별 메뉴에서는 정보 유지 */
.project-grid.grid-images-only .card-meta{display:none;}
.project-grid.grid-images-only{row-gap:16px;}
.project-grid.grid-images-only .project-card[data-size="feature"]{grid-column:span 2;}
.project-grid.grid-images-only .project-card[data-size="feature"] .card-picture{aspect-ratio:2.25;}
@media(max-width:720px){
  .work-intro{min-height:64px;padding:19px 0 21px;}
  .project-grid.grid-images-only .project-card[data-size="feature"]{grid-column:1;}
  .project-grid.grid-images-only .project-card[data-size="feature"] .card-picture{aspect-ratio:1.4;}
}


/* ===== v4.3 — WORK-FIRST GALLERY REFINEMENT ===== */
/* 여백을 완전히 0으로 만들면 서로 다른 작품 이미지가 붙어 보일 수 있어서 6px 유지. */
.work-section > .container {
  width: calc(100% - 20px);
  max-width: none;
}
.project-grid { column-gap: 6px; row-gap: 18px; }
.project-grid.grid-images-only { row-gap: 6px; }
/* WORKS 글자와 여백은 기존 위치 유지, 윗줄만 숨김 */
.section-divider { height: 1px; border-top: 0; }
/* 작업물 상세창은 더 크게, 이미지도 넓게 표시 */
.project-dialog {
  width: min(calc(100% - 20px), 1480px);
  max-height: 96dvh;
}
.dialog-slide-viewport { height: min(66dvh, 780px); }
.dialog-art { padding: 12px; }
@media (max-width: 720px) {
  .work-section > .container { width: calc(100% - 12px); }
  .project-grid, .project-grid.grid-filtered { column-gap: 6px; row-gap: 18px; }
  .project-grid.grid-images-only { row-gap: 6px; }
  .project-dialog { width: calc(100% - 12px); max-height: 97dvh; }
  .dialog-slide-viewport { height: min(57dvh, 540px); }
  .dialog-art { padding: 8px; }
}


/* ===== v4.4 — 좌측 고정 내비게이션 + ALL WORKS 비대칭 전시 ===== */
:root { --sidebar-width: 204px; }
.site-sidebar { display:none; }

/* PC에서 위쪽 메뉴와 좌측 메뉴를 동시에 표시하지 않습니다. */
@media (min-width:1001px) {
  .site-sidebar {
    position:fixed; inset:0 auto 0 0; width:var(--sidebar-width); z-index:120;
    display:flex; flex-direction:column; align-items:stretch;
    padding:38px 24px 24px; background:var(--bg);
    border-right:1px solid var(--line);
  }
  .sidebar-logo { font:900 1.25rem/1 Arial,Helvetica,sans-serif; letter-spacing:-.07em; white-space:nowrap; }
  .sidebar-nav { display:flex; flex-direction:column; gap:0; margin-top:75px; }
  .sidebar-nav a { display:flex; align-items:center; min-height:44px; position:relative;
    font:800 .73rem/1.45 Arial,Helvetica,sans-serif; letter-spacing:.025em;
    color:var(--ink-soft); transition:color .18s ease,padding-left .18s ease; }
  .sidebar-nav a:hover { color:var(--ink); padding-left:6px; }
  .sidebar-nav a.is-active { color:var(--ink); padding-left:12px; }
  .sidebar-nav a.is-active::before { content:""; position:absolute; top:14px; bottom:14px; left:0; width:3px; background:var(--yellow); }
  .sidebar-bottom { margin-top:auto; display:flex; flex-direction:column; align-items:start; gap:21px; }
  .sidebar-theme { border:1px solid var(--line); background:transparent; color:var(--ink);
    min-width:122px; padding:8px 12px; display:flex; align-items:center; justify-content:space-between;
    border-radius:4px; gap:12px; transition:background .18s,border-color .18s; }
  .sidebar-theme:hover { background:var(--surface-2); border-color:var(--ink-soft); }
  .sidebar-theme-label,.sidebar-copyright { font:700 .65rem/1.2 Arial,Helvetica,sans-serif; letter-spacing:.055em; color:var(--muted); }
  .sidebar-copyright { font-weight:500; }
  .site-shell { margin-left:var(--sidebar-width); min-width:0; }
  .site-header { display:none; }
  html { scroll-padding-top:12px; }
  .work-section { padding-top:34px; }
  .work-section > .container { width:calc(100% - 54px); max-width:none; }
  .work-intro { min-height:70px; padding:19px 0 20px; }
  /* 왼쪽 메뉴에서 이미 분야를 선택할 수 있으므로 같은 버튼을 반복하지 않습니다. */
  .filters { display:none; }
  .contact-section { min-height:calc(100svh - 80px); }
  .contact-section .container,.site-footer.container { width:calc(100% - 54px); max-width:none; }
}

/* 넓은 PC: 이미지 중심 ALL WORKS에서 크기를 계획적으로 섞습니다. */
@media (min-width:1180px) {
  .project-grid.grid-images-only {
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-auto-rows:clamp(152px,17.5vw,258px);
    grid-auto-flow:row dense;
    column-gap:10px; row-gap:10px;
  }
  .project-grid.grid-images-only .project-card {
    grid-column:auto; grid-row:auto; height:100%; min-height:0; overflow:hidden;
  }
  .project-grid.grid-images-only .project-card .card-picture {
    width:100%; height:100%; aspect-ratio:auto; min-height:0;
  }
  .project-grid.grid-images-only .project-card[data-layout="hero"] { grid-column:span 2; grid-row:span 2; }
  .project-grid.grid-images-only .project-card[data-layout="portrait"] { grid-row:span 2; }
  .project-grid.grid-images-only .project-card[data-layout="wide"] { grid-column:span 2; }
}
/* 화면이 조금 좁은 PC/태블릿은 무리한 모자이크 대신 안정적인 2열로. */
@media (min-width:721px) and (max-width:1179px) {
  .project-grid.grid-images-only { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .project-grid.grid-images-only .project-card[data-size="feature"] { grid-column:auto; }
  .project-grid.grid-images-only .project-card[data-size="feature"] .card-picture { aspect-ratio:1.4; }
}
/* 개별 카테고리는 기존과 같은 2열 비율 + 이미지 아래 설명 유지. */
@media (min-width:721px) {
  .project-grid.grid-filtered { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:14px; row-gap:28px; }
  .project-grid.grid-filtered .project-card .card-picture { aspect-ratio:1.4; }
}

/* 모바일은 ALL WORKS/개별 카테고리 모두 균일한 2열. */
@media (max-width:720px) {
  .work-section > .container { width:calc(100% - 28px); }
  .project-grid,.project-grid.grid-filtered,.project-grid.grid-images-only {
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:auto; gap:18px 9px;
  }
  .project-grid.grid-images-only { row-gap:9px; }
  .project-grid .project-card,
  .project-grid.grid-filtered .project-card,
  .project-grid.grid-images-only .project-card[data-size="feature"] {
    grid-column:auto; grid-row:auto; width:100%; height:auto;
  }
  .project-grid .project-card .card-picture,
  .project-grid.grid-images-only .project-card[data-size="feature"] .card-picture {
    aspect-ratio:1.12; height:auto;
  }
  .card-meta { min-height:92px; padding-top:10px; gap:5px; }
  .card-info { gap:5px; }
  .card-info strong { font-size:clamp(.9rem,3.9vw,1.18rem); overflow-wrap:anywhere; }
  .card-kind { font-size:.53rem; letter-spacing:.015em; }
  .card-korean { font-size:.68rem; }
  .card-number { font-size:.6rem; }
  .sample-tag { font-size:.48rem; padding:6px; top:7px; left:7px; }
  .card-corner { width:26px;height:26px;right:7px;top:7px;font-size:1rem; }
  .card-slide-count { right:7px;bottom:7px;padding:5px 6px;font-size:.52rem; }
  .filters { display:flex; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; padding:1px 0 5px; gap:6px; }
  .filters::-webkit-scrollbar { display:none; }
  .filter-chip { flex:0 0 auto; white-space:nowrap; }
}


/* ===== v4.5 — 최대 4×4 전시, About, Contact, 푸터 ===== */
/* 상단 및 푸터의 MOSEORY ↔ 서리네 디자인 로고: 두 줄이 부드럽게 위로 지나갑니다. */
.brand-switch { --brand-line:34px; display:inline-block;vertical-align:middle;height:var(--brand-line);line-height:var(--brand-line);min-width:155px;overflow:hidden;white-space:nowrap;font-family:Arial,"Malgun Gothic",sans-serif;font-size:1.12rem;font-weight:900;letter-spacing:-.065em;color:var(--ink); }
.brand-track { display:flex;flex-direction:column;animation:brandRoll 8s cubic-bezier(.65,0,.26,1) infinite; }
.brand-word { display:block;flex:0 0 var(--brand-line);height:var(--brand-line);line-height:var(--brand-line); }
.brand-korean { font-size:1rem;font-weight:850;letter-spacing:-.055em; }
@keyframes brandRoll {0%,31%{transform:translateY(0)} 43%,78%{transform:translateY(calc(-1*var(--brand-line)))} 90%,100%{transform:translateY(calc(-2*var(--brand-line)))}}
.footer-brand .brand-switch { font-size:1.45rem;min-width:220px; }
.footer-brand .brand-korean { font-size:1.28rem; }
@media (prefers-reduced-motion:reduce) {.brand-track{animation:none!important}}

/* 명확하게 다른 화면을 가진 About */
.about-section[hidden], .contact-section[hidden],.work-section[hidden]{display:none!important;}
.about-section {background:var(--bg);padding-bottom:90px;}
.about-hero {height:clamp(185px,26vw,330px);position:relative;overflow:hidden;background:linear-gradient(120deg,var(--surface-2),var(--bg) 68%);border-bottom:1px solid var(--line);}
.about-hero-circle {position:absolute;width:clamp(190px,45vw,650px);aspect-ratio:1;top:-140%;left:33%;border-radius:50%;border:1px solid var(--line);opacity:.7;}
.about-hero-line {position:absolute;right:-10%;bottom:-115%;height:200%;width:60%;transform:rotate(-25deg);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--yellow) 9%,transparent),transparent);}
.about-content {max-width:1180px!important;padding-top:48px;}
.about-intro-grid {display:grid;grid-template-columns:1fr 1.18fr;gap:70px;margin-top:32px;}
.about-sign {display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;width:70px;height:70px;background:var(--surface);font:900 2.1rem Arial,sans-serif;letter-spacing:-.1em;}
.about-intro-left h1 {font-size:clamp(1.6rem,2.25vw,2.5rem);margin:26px 0 7px;letter-spacing:-.045em;}
.about-name-roman {font-size:.62em;color:var(--muted);margin-left:10px;letter-spacing:.025em;}
.about-signature {font-size:.82rem;color:var(--muted);margin:0 0 25px;}
.about-mail {font-weight:650;font-size:.83rem;text-decoration:underline;text-underline-offset:5px;}
.about-lead {font-size:clamp(1.25rem,2.25vw,2.25rem)!important;line-height:1.55!important;color:var(--ink)!important;font-weight:700!important;letter-spacing:-.035em;}
.about-intro-right p {font-size:.93rem;line-height:1.95;color:var(--ink-soft);margin:0 0 16px;}
.about-fields {display:grid;grid-template-columns:1fr 1.18fr;gap:70px;border-top:1px solid var(--line);margin-top:80px;padding-top:26px;}
.about-fields h2 {font-family:Georgia,serif;font-weight:500;font-size:1.22rem;margin:0;}
.about-field-list {display:grid;grid-template-columns:1fr 1fr;gap:18px;color:var(--ink-soft);font-size:.72rem;letter-spacing:.075em;font-weight:700;}

/* Contact는 큰 영문 장식 대신 실용적인 연락 정보 + 메일 초안 양식으로 */
.contact-section {padding:58px 0 90px!important;background:var(--bg);min-height:calc(100svh - 220px)!important;}
.contact-layout {max-width:1130px!important;}
.contact-intro-line {display:flex;align-items:baseline;gap:30px;border-bottom:1px solid var(--line);padding-bottom:18px;}
.contact-intro-line h1 {font:500 clamp(1.3rem,2.7vw,2rem) Georgia,serif;letter-spacing:-.035em;margin:0;color:var(--ink);}
.contact-mail-grid {display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:32px 0 75px;}
.contact-caption {display:block;font:.68rem Arial,sans-serif;letter-spacing:.055em;font-weight:800;color:var(--ink-soft);margin-bottom:13px;}
.contact-email {display:inline-block;font-size:1.15rem;font-weight:700;letter-spacing:-.025em;overflow-wrap:anywhere;}
.contact-email:hover,.footer-mail:hover {color:var(--yellow-dark);}
.contact-mail-grid p {font-size:.87rem;color:var(--ink-soft);line-height:1.8;margin:0;}
.contact-form-heading {border-bottom:1px solid var(--line);padding:0 0 15px;}
.contact-form-heading h2 {margin:0 0 15px;font:500 clamp(1.3rem,2.5vw,1.75rem) Georgia,serif;}
.contact-form-heading p {margin:0;color:var(--muted);font-size:.76rem;line-height:1.65;}
.contact-form {max-width:730px;margin:40px auto 0;display:flex;flex-direction:column;gap:10px;}
.contact-form .form-two {display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.contact-form label {display:block;min-width:0;}
.contact-form input,.contact-form textarea {display:block;width:100%;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:0;padding:16px 17px;font:inherit;font-size:.85rem;outline:none;transition:border-color .2s;}
.contact-form input:focus,.contact-form textarea:focus {border-color:var(--yellow-dark);}
.contact-form textarea {resize:vertical;min-height:210px;}
.contact-submit {align-self:center;display:flex;align-items:center;gap:14px;background:var(--ink);color:var(--bg);padding:14px 23px;margin-top:18px;border:0;font-size:.85rem;font-weight:700;}
.contact-submit:hover {background:var(--yellow);color:#181a19;}
.contact-form-note {text-align:center;color:var(--muted);font-size:.72rem;margin:8px 0;}
.contact-social-row {display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);margin-top:85px;padding-top:25px;}
.contact-social-row .contact-caption {margin-bottom:0;}
.sr-only {position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* 푸터는 참고 사진처럼 가벼운 링크 행과 아래쪽 작은 서명 영역으로 */
.site-footer {display:block!important;padding-top:44px!important;padding-bottom:45px!important;border-top:1px solid var(--line);}
.footer-top {display:flex;align-items:center;justify-content:space-between;gap:20px;}
.footer-nav {display:flex;gap:22px;font-size:.78rem;color:var(--muted);text-transform:lowercase;}
.footer-nav a:hover {color:var(--ink);}
.footer-bottom {margin-top:62px;display:flex;justify-content:space-between;align-items:end;gap:30px;}
.footer-left {gap:5px;}
.footer-mail {font-size:.79rem;font-weight:600;margin-top:5px;}
.footer-left>span {text-transform:none;letter-spacing:0;font-size:.75rem;margin-top:5px;}
.footer-right {margin-left:auto;}
.back-to-top {display:grid;place-items:center;width:34px;height:34px;border-radius:5px;background:var(--surface-2);color:var(--ink)!important;font-size:1.35rem!important;}
.social-icons {display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.social-icon {display:inline-grid;place-items:center;width:33px;height:33px;border:1px solid transparent;border-radius:4px;color:var(--ink);transition:color .2s,background .2s,border-color .2s;}
.social-icon svg {width:19px;height:19px;}
.social-icon:not(.is-pending):hover {color:#121212;background:var(--yellow);}
.social-icon.is-pending {opacity:.36;cursor:not-allowed;}

/* 크게 보기 모달: 넓은 PC에서 최대 1720px, 화면 가장자리는 여유 있게 */
.project-dialog {width:min(calc(100vw - 16px),1720px);max-height:calc(100dvh - 16px);}
.dialog-art {padding:8px;}
.dialog-slide-viewport {height:min(76dvh,940px);}

/* 6컬럼 격자: 1칸부터 최대 4×4, 3×3까지 지원 */
@media(min-width:1180px){
  .work-section > .container {container-type:inline-size;}
  .project-grid.grid-images-only {--mosaic-gap:10px;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:calc((100cqw - 5 * var(--mosaic-gap))/6);grid-auto-flow:row dense;gap:var(--mosaic-gap);}
  .project-grid.grid-images-only .project-card{grid-column:auto;grid-row:auto;height:100%;}
  .project-grid.grid-images-only .project-card[data-layout="1x1"]{grid-column:span 1;grid-row:span 1;}
  .project-grid.grid-images-only .project-card[data-layout="2x1"]{grid-column:span 2;grid-row:span 1;}
  .project-grid.grid-images-only .project-card[data-layout="1x2"]{grid-column:span 1;grid-row:span 2;}
  .project-grid.grid-images-only .project-card[data-layout="2x2"]{grid-column:span 2;grid-row:span 2;}
  .project-grid.grid-images-only .project-card[data-layout="2x3"]{grid-column:span 2;grid-row:span 3;}
  .project-grid.grid-images-only .project-card[data-layout="3x2"]{grid-column:span 3;grid-row:span 2;}
  .project-grid.grid-images-only .project-card[data-layout="3x3"]{grid-column:span 3;grid-row:span 3;}
  .project-grid.grid-images-only .project-card[data-layout="4x3"]{grid-column:span 4;grid-row:span 3;}
  .project-grid.grid-images-only .project-card[data-layout="3x4"]{grid-column:span 3;grid-row:span 4;}
  .project-grid.grid-images-only .project-card[data-layout="4x4"]{grid-column:span 4;grid-row:span 4;}
  .project-grid.grid-images-only .card-picture {height:100%;aspect-ratio:auto;}
}
@media(max-width:1179px){
  /* 기존 2열 균등 배열을 유지하며 카드별 큰 크기는 무효화 */
  .project-grid.grid-images-only .project-card {grid-column:auto!important;grid-row:auto!important;height:auto;}
}
@media(max-width:1000px){
  .contact-intro-line {gap:14px;}
  .about-content {width:calc(100% - 56px);}
}
@media(max-width:720px){
  .about-hero{height:155px;}
  .about-content{width:calc(100% - 32px);padding-top:30px;}
  .about-intro-grid,.about-fields{grid-template-columns:1fr;gap:23px;}
  .about-fields{margin-top:45px;}
  .about-intro-left h1{margin:15px 0 5px;}
  .about-intro-right p br{display:none;}
  .contact-section{padding-top:38px!important;}
  .contact-layout{width:calc(100% - 32px)!important;}
  .contact-intro-line{gap:10px;}
  .contact-mail-grid{grid-template-columns:1fr;gap:24px;padding:28px 0 48px;}
  .contact-form{margin-top:25px;}
  .contact-form .form-two{grid-template-columns:1fr;}
  .contact-form input,.contact-form textarea{padding:13px 12px;}
  .contact-social-row{margin-top:48px;}
  .site-footer.container{width:calc(100% - 32px)!important;}
  .footer-top{align-items:start;}
  .footer-bottom{margin-top:42px;}
  .footer-brand .brand-switch{font-size:1.25rem;}
  .social-icons{gap:3px;}
  .social-icon{width:29px;height:29px;}
  .social-icon svg{width:17px;height:17px;}
  .dialog-slide-viewport{height:min(62dvh,680px);}
  .project-dialog{width:calc(100vw - 8px);max-height:calc(100dvh - 8px);}
}


/* ===== v4.6 editorial refinements ===== */
/* 로고: 기본은 서리네 디자인, 반쯤 내려가며 MOSEORY로 부드럽게 교체 */
.brand-switch {position:relative;display:inline-block;vertical-align:middle;width:176px;min-width:0;height:36px;overflow:hidden;white-space:nowrap;font-family:Arial,"Malgun Gothic",sans-serif;font-size:1.07rem;font-weight:900;letter-spacing:-.045em;line-height:36px;color:var(--ink);}
.brand-switch .brand-word {display:block;position:absolute;inset:0;width:100%;height:36px;line-height:36px;transform-origin:50% 50%;}
.brand-switch .brand-korean {font-size:1.03rem;letter-spacing:-.065em;animation:brandKorean 9s ease-in-out infinite;opacity:1;transform:translateY(0);}
.brand-switch .brand-english {font-size:1.09rem;letter-spacing:-.055em;animation:brandEnglish 9s ease-in-out infinite;opacity:0;transform:translateY(12px);}
@keyframes brandKorean {0%,38% {opacity:1;transform:translateY(0)} 48%,88% {opacity:0;transform:translateY(-11px)} 98%,100%{opacity:1;transform:translateY(0)}}
@keyframes brandEnglish {0%,37%{opacity:0;transform:translateY(12px)} 48%,87%{opacity:1;transform:translateY(0)} 98%,100%{opacity:0;transform:translateY(-12px)}}
.footer-brand .brand-switch{width:236px;height:40px;font-size:1.14rem;}
.footer-brand .brand-word{height:40px;line-height:40px;}
.footer-brand .brand-korean{font-size:1.22rem;}
.footer-brand .brand-english{font-size:1.25rem;}
@media(prefers-reduced-motion:reduce){.brand-switch .brand-word{animation:none!important}}

/* ABOUT — 담백한 소개와 SNS, 작은 이름 서명 */
.about-intro-left h1{font-size:clamp(1.32rem,1.75vw,1.9rem);margin:23px 0 2px;letter-spacing:-.035em;font-weight:800;}
.about-name-roman{font-size:.7em;color:var(--muted);margin-left:2px;letter-spacing:0;}
.about-realname{font-size:.88rem;color:var(--ink-soft);font-weight:400;margin:0 0 24px;}
.about-social{display:flex;align-items:center;gap:17px;flex-wrap:wrap;margin-top:24px;}
.about-social>strong{font-size:.82rem;letter-spacing:.01em;}
.about-social .social-icon{width:29px;height:29px;}
.about-lead{font-family:Arial,"Malgun Gothic",sans-serif;font-size:clamp(2rem,3.8vw,4rem)!important;line-height:1.15!important;letter-spacing:-.07em!important;font-weight:900!important;margin-bottom:25px!important;}
.about-intro-right p:not(.about-lead){font-size:.9rem;line-height:1.8;}

/* CONTACT — 정보 블록 없이 게시판용 깔끔한 문의 폼 */
.contact-section{padding:60px 0 112px!important;}
.contact-layout{max-width:1000px!important;}
.contact-only-title{font:750 clamp(1.55rem,2.9vw,2.2rem)/1.25 Arial,"Malgun Gothic",sans-serif;letter-spacing:-.045em;margin:0 0 34px;padding-bottom:21px;border-bottom:1px solid var(--line);}
.contact-form{max-width:800px;margin:0 auto;gap:18px;}
.contact-form label:not(.inquiry-honey){display:block;font-size:.81rem;font-weight:700;line-height:1.5;color:var(--ink);}
.contact-form input:not([type="checkbox"]),.contact-form textarea,.contact-form select{display:block;width:100%;margin-top:8px;border:1px solid var(--line);border-radius:2px;background:var(--surface);color:var(--ink);padding:15px 16px;font-family:inherit;font-size:.88rem;font-weight:400;line-height:1.5;outline:none;}
.contact-form select{font-family:inherit;font-size:.88rem;}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:var(--yellow-dark);}
.contact-form .form-two{gap:16px;}
.contact-form textarea{min-height:240px;resize:vertical;}
.contact-form .contact-consent{display:flex!important;gap:10px;font-weight:400!important;color:var(--ink-soft)!important;}
.contact-consent input{flex:0 0 auto;width:17px;height:17px;accent-color:var(--yellow-dark);margin-top:3px;}
.contact-consent span{flex:1;line-height:1.7;}
.inquiry-honey{position:absolute;left:-10000px;width:1px;height:1px;opacity:0;overflow:hidden;}
.contact-submit{border-radius:3px;margin-top:10px;}
.contact-submit:disabled{opacity:.55;cursor:not-allowed;}
.contact-form-note{text-align:center;line-height:1.7;}

/* 푸터 — 메일 앞 E-mail 레이블과 우측 SNS */
.site-footer{padding-top:32px!important;}
.footer-bottom{margin:0;align-items:center;}
.footer-left{display:flex;flex-direction:column;align-items:start;gap:7px;}
.footer-email-line{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;font-size:.81rem;}
.footer-email-line strong{font-weight:800;}
.footer-email-line .footer-mail{margin:0;font-size:.82rem;font-weight:400;text-decoration:none!important;}
.footer-left>span{margin:0;color:var(--muted);font-size:.73rem;letter-spacing:0;}
.footer-right{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:flex-end;}
.footer-right .social-icons{gap:8px;}
.footer-right .back-to-top{flex:none;}
@media(max-width:720px){.brand-switch{width:150px;height:34px;}.footer-bottom{align-items:start;gap:12px;}.footer-right{max-width:42%;gap:9px;}.footer-right .social-icons{justify-content:flex-end;}.footer-brand .brand-switch{width:175px;}.contact-section{padding-top:36px!important;}.contact-form .form-two{gap:18px;}.about-intro-left h1{font-size:1.55rem;}}

.about-experience-note{font-size:.87rem;color:var(--ink-soft);line-height:1.8;margin:0;}


/* ========== v4.7: ABOUT typography / SNS list / stable brand crossfade ========== */
/* 웹폰트가 로드되지 않는 오프라인 환경에서는 기존 설치 폰트로 표시됩니다. */
body {
  font-family: "NanumSquareNeo", "NanumSquare", "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
}
/* About: 프로필 이니셜 제거, 이름과 FEARLESS 상단 정렬 */
.about-intro-grid {
  align-items:start;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(30px,6vw,72px);
  margin-top:30px;
}
.about-intro-left {min-width:0;}
.about-identity {margin:0;}
.about-identity p {
  font-family:"NanumSquareNeo", "NanumSquare", "Malgun Gothic",sans-serif;
  font-size:clamp(1.33rem,1.8vw,1.75rem);
  line-height:1.48;
  letter-spacing:-.045em;
  margin:0;
}
.about-identity .about-displayname {font-weight:800;}
.about-identity .about-realname {font-weight:400;color:var(--ink-soft);margin-top:9px;margin-bottom:0;}
.about-identity .about-name-roman {
  font-family:Arial,Helvetica,sans-serif;
  font-size:1em;
  font-weight:inherit;
  color:inherit;
  letter-spacing:-.04em;
  margin-left:3px;
}
.about-intro-right {min-width:0;}
.about-intro-right .about-lead {
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(2.05rem,2.75vw,2.85rem)!important;
  line-height:1.25!important;
  letter-spacing:-.055em!important;
  margin:0 0 24px!important;
  font-weight:900!important;
}
.about-intro-right p:not(.about-lead) {
  font-family:"NanumSquareNeo", "NanumSquare", "Malgun Gothic",sans-serif;
  font-size:.95rem;
  line-height:1.85;
}
.about-fields h2 {font-family:Georgia,serif;font-weight:500;font-size:1.26rem;}
.about-experience-note {font-family:"NanumSquareNeo", "NanumSquare",sans-serif;}
/* SNS: 본인 계정을 한 줄씩 확인/수정할 수 있는 목록 */
.about-social {display:block;margin-top:32px;}
.about-social > strong {display:block;margin:0 0 13px;font:800 .82rem Arial,Helvetica,sans-serif;letter-spacing:.015em;}
.about-social-list {display:flex;flex-direction:column;align-items:start;gap:10px;}
.about-social-row {display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;row-gap:2px;font-size:.86rem;line-height:1.55;}
.about-social-name {font:600 .84rem Arial,Helvetica,sans-serif;color:var(--ink);}
.about-social-handle {font-family:Arial,"NanumSquareNeo",sans-serif;font-size:.84rem;font-weight:600;text-decoration:none;color:var(--ink);}
a.about-social-handle {text-decoration:underline;text-underline-offset:3px;}
a.about-social-handle:hover {color:var(--yellow-dark);}
.about-social-pending {font-size:.78rem;font-weight:400;color:var(--muted);}

/* 로고: 매 4.5초마다 JS로 상태를 바꾸고, 시각 전환만 CSS에 맡깁니다. */
.brand-switch {width:184px;height:43px;line-height:43px;font-size:1.1rem;}
.brand-switch .brand-word {
  inset:0; width:100%;height:43px;line-height:43px;
  animation:none!important;
  transition:opacity .85s cubic-bezier(.23,1,.32,1),transform .85s cubic-bezier(.23,1,.32,1);
  will-change:opacity,transform;
}
.brand-switch .brand-korean {
  font-family:"NanumSquareNeo", "NanumSquare", "Malgun Gothic",sans-serif;
  font-size:1.2rem;font-weight:900;letter-spacing:-.06em;
  opacity:1;transform:translateY(0);
}
.brand-switch .brand-english {
  font-family:Arial,Helvetica,sans-serif;font-size:1.17rem;font-weight:900;
  letter-spacing:-.06em;opacity:0;transform:translateY(35%);
}
.brand-switch.is-english .brand-korean {opacity:0;transform:translateY(-35%);}
.brand-switch.is-english .brand-english {opacity:1;transform:translateY(0);}
.footer-brand .brand-switch {width:220px;height:47px;line-height:47px;}
.footer-brand .brand-word {height:47px;line-height:47px;}
.footer-brand .brand-korean {font-size:1.3rem;}
.footer-brand .brand-english {font-size:1.28rem;}
@media(min-width:1001px) {
  .site-sidebar .sidebar-logo {width:100%;}
  .site-sidebar .brand-switch {width:100%;}
}
@media(max-width:1000px){
  .header-inner .brand-switch {width:174px;}
}
@media(max-width:720px){
  .about-intro-grid {grid-template-columns:1fr;gap:34px;margin-top:22px;}
  .about-identity p {font-size:1.35rem;}
  .about-intro-right .about-lead {font-size:2.15rem!important;margin-bottom:16px!important;}
  .about-social-list {gap:12px;}
  .brand-switch {height:41px;line-height:41px;}
  .brand-switch .brand-word {height:41px;line-height:41px;}
  .brand-switch .brand-korean {font-size:1.15rem;}
  .footer-brand .brand-korean {font-size:1.22rem;}
}
@media(prefers-reduced-motion:reduce) {
  .brand-switch .brand-word {transition:none!important;}
  /* 로고는 교체하지만 움직임은 줄입니다. */
  .brand-switch.is-english .brand-korean {opacity:0!important;transform:none!important;}
  .brand-switch.is-english .brand-english {opacity:1!important;transform:none!important;}
}


/* ========== v4.8: 통일된 글꼴·About 이름·푸터 간격 ========== */
/* 작은 영문/한글 설명에는 나눔스퀘어 네오를 사용합니다.
   기존에 강하게 디자인된 대형 영문 헤드라인과 About SNS 이름만 Arial을 유지합니다. */
:root { --site-body-font: "NanumSquareNeo", "NanumSquare", "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif; }
body { font-family: var(--site-body-font); }
button, input, select, textarea { font-family: inherit; }
.mono, .eyebrow,
.desktop-nav a, .mobile-nav a, .mobile-nav a span,
.sidebar-nav a, .sidebar-theme-label, .sidebar-copyright,
.filter-chip, .filter-chip span, .card-kind, .card-number, .card-korean,
.sample-tag, .card-slide-count, .card-meta, .dialog-details,
.dialog-details span, .dialog-details strong, .dialog-placeholder,
.no-links, .contact-caption, .contact-form-heading h2,
.about-identity p, .about-identity .about-name-roman,
.about-fields h2, .about-experience-note,
.footer-left > span, .footer-email-line, .footer-right > span,
.footer-right > a:not(.back-to-top), .footer-nav,
.lightbox-controls, .lightbox-hint {
  font-family: var(--site-body-font);
}
/* 예전 Georgia 등 별도 서체로 표현되던 Work Experience도 통일 */
.about-fields h2 {font-weight:600;letter-spacing:-.035em;}
/* 요청한 크기: SNS 항목보다 이름이 약 1pt(=1.333px) 큽니다. */
.about-identity p {
  font-size:15.33px;
  line-height:1.65;
  letter-spacing:-.025em;
}
.about-identity .about-displayname {font-weight:800;}
.about-identity .about-realname {font-size:15.33px; margin-top:7px; font-weight:400;}
.about-identity .about-name-roman {font-size:1em;letter-spacing:-.025em;}
/* SNS에 표기되는 영문 이름/아이디는 FEARLESS와 같은 Arial 계열 유지 */
.about-social > strong {font:800 14px/1.4 Arial,Helvetica,sans-serif;}
.about-social-row {font-size:14px;line-height:1.55;}
.about-social-name {font:700 14px/1.45 Arial,Helvetica,sans-serif;}
.about-social-handle {font:600 14px/1.45 Arial,Helvetica,sans-serif;}
.about-social-pending {font:400 13px/1.45 var(--site-body-font);}
/* 로고와 메일 사이도 메일과 저작권 사이처럼 촘촘하게 */
.footer-bottom .footer-left {gap:3px;}
.footer-bottom .footer-brand {line-height:1;}
.footer-bottom .footer-brand .brand-switch,
.footer-bottom .footer-brand .brand-word {height:36px;line-height:36px;}
.footer-bottom .footer-email-line {margin:0;line-height:1.4;gap:10px;}
.footer-bottom .footer-left > span {margin:0;line-height:1.4;}
/* 아래 헤드라인은 기존 굵고 큰 영문 서체를 일부러 유지합니다. */
.about-intro-right .about-lead, .contact-only-title,
.dialog-copy h2, .card-info strong, .section-heading h2 {
  font-family: Arial,Helvetica,sans-serif;
}
@media(max-width:720px) {
  .about-identity p, .about-identity .about-realname {font-size:15.33px;}
  .footer-bottom .footer-brand .brand-switch,
  .footer-bottom .footer-brand .brand-word {height:36px;line-height:36px;}
}


/* ========== v4.9 — 요청하신 부분만 조정 ========== */
/* 1. 메뉴와 모든 페이지의 작은 안내 글귀를 v4.7의 영문 스타일로 복원 */
.sidebar-nav a, .desktop-nav a {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  letter-spacing: .025em;
}
.mobile-nav a {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  letter-spacing: -.05em;
}
.mobile-nav a span {
  font-family: Consolas, "SFMono-Regular", monospace;
  font-weight: 400;
}
/* WORKS / 작업물, ABOUT / MOSEORY, 상세창 카테고리 등의 작은 라벨 */
.eyebrow {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-weight: 700;
  letter-spacing: .12em;
}
.mono {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  letter-spacing: .085em;
}
/* 카테고리 선택 버튼도 기존의 또렷한 영문 메뉴 스타일 유지 */
.filter-chip, .filter-chip span {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
}
/* 2. About: 이름 두 줄을 조금 가까이, 둘째 줄은 정확히 1pt 작게 */
.about-identity p {line-height: 1.38;}
.about-identity .about-realname {
  font-size: 14px; /* 15.33px - 약 1pt(1.333px) */
  line-height: 1.43;
  margin-top: 3px;
}
/* 3. 작업물 상세: 굵은 제목과 바로 아래 설명의 여백만 소폭 증가 */
.dialog-copy h2 {margin-bottom: 21px;}
/* 4. Contact: FEARLESS와 같은 서체·최대 굵기 */
.contact-only-title {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  letter-spacing: -.055em;
  /* 5. 제목 밑 구분선과 문의 폼 사이에 여유 추가 */
  margin-bottom: 56px;
}
@media (max-width: 720px) {
  .about-identity .about-realname {font-size: 14px;}
  .contact-only-title {margin-bottom: 43px;}
}


/* ========== v4.10 — 푸터 정렬 및 About 분야별 이력 구분 ========== */
/* SNS 아이콘의 시작점을 좌측 '서리네 디자인' 로고의 상단과 맞춥니다. */
.footer-bottom { align-items:flex-start; }
.footer-right { align-self:flex-start; align-items:flex-start; }

/* Work Experience 제목은 단 한 번, 분야명은 SNS.처럼 작은 굵은 영문으로. */
.experience-list { display:flex; flex-direction:column; gap:22px; min-width:0; }
.experience-group { padding:0 0 19px; border-bottom:1px solid var(--line); }
.experience-group:last-child { padding-bottom:0; border-bottom:0; }
.experience-group h3 {
  margin:0 0 7px;
  color:var(--ink);
  font:800 14px/1.4 Arial,Helvetica,sans-serif;
  letter-spacing:.015em;
  text-transform:none;
}
.experience-group .about-experience-note { font-size:12px; line-height:1.6; color:var(--muted); }
@media (max-width:720px) {
  .footer-bottom { align-items:flex-start; }
  .footer-right { align-self:flex-start; }
  .experience-list { gap:18px; }
  .experience-group { padding-bottom:15px; }
}


/* Work Experience 아래에 각 분야명을 한 줄씩 배치하고, 오른쪽은 이력 내용 자리로 둡니다. */
.about-fields { display:block; }
.about-fields > h2 { margin:0 0 19px; }
.experience-list { display:block; }
.experience-group {
  display:grid;
  grid-template-columns:1fr 1.18fr;
  align-items:baseline;
  column-gap:70px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
}
.experience-group h3 { margin:0; }
.experience-group .about-experience-note { margin:0; }
@media(max-width:720px){
  .experience-group {grid-template-columns:1fr;row-gap:6px;padding:15px 0;}
}


/* ===== v4.14 / 휴대폰 사진첩 스타일의 부드러운 가로 전환 ===== */
.card-slide-track.photo-slider, .dialog-slide-track.photo-slider {
  position:relative;
  display:block;
  width:100%; height:100%;
  transform:none!important;
  transition:none!important;
  overflow:hidden;
  isolation:isolate;
}
.photo-slider .gallery-slide {
  position:absolute;
  inset:0;
  width:100%; height:100%;
  display:block;
  opacity:0;
  will-change:transform;
  pointer-events:none;
  backface-visibility:hidden;
}
.photo-slider .gallery-slide.is-current{opacity:1;}
.photo-slider .gallery-slide img{
  width:100%; height:100%; display:block; object-fit:cover;
}
.dialog-slide-track.photo-slider .gallery-slide {
  display:flex; align-items:center; justify-content:center;
}
.dialog-slide-track.photo-slider .gallery-slide img{
  width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain;
}
.photo-slider .gallery-slide::after{content:none!important;}
/* 확대된 두 사진은 같은 크기의 캔버스를 사용해 서로 밀어내듯 이동 */
.lightbox-stage {position:relative;}
.lightbox-swipe-overlay {
  position:absolute;
  z-index:2;
  overflow:hidden;
  pointer-events:none;
  isolation:isolate;
}
.lightbox-swipe-overlay img {
  position:absolute;
  inset:0;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  display:block;
  object-fit:contain;
  box-shadow:none;
  will-change:transform;
}

/* v4.15: 시스템에서 동작 줄이기를 사용하는 방문자에게만 선택권 표시.
   평소에는 버튼이 보이지 않으므로 기존 포트폴리오 디자인을 유지합니다. */
.motion-override {display:none!important;}
html.motion-offered .sidebar-motion {display:flex!important;}
html.motion-offered #headerMotionButton {display:grid!important;}
.sidebar-motion {border:1px solid var(--line);background:transparent;color:var(--ink);
  min-width:122px;padding:8px 12px;align-items:center;justify-content:space-between;
  gap:12px;border-radius:4px;cursor:pointer;}
.sidebar-motion:hover {background:var(--surface-2);border-color:var(--ink-soft);}
.sidebar-motion-label {font:700 .65rem/1.2 Arial,Helvetica,sans-serif;letter-spacing:.055em;color:var(--muted);}
.motion-symbol {font-size:.8rem;}

/* v4.16: 사이트 기본값은 슬라이드 ON, 모든 방문자에게 끄기 조절 제공 */
html.motion-offered .sidebar-motion {display:flex!important;}
html.motion-offered #headerMotionButton {display:grid!important;}