/* 모든 페이지가 함께 쓰는 글꼴·색·머리말·꼬리말·버튼.
 * 홈과 Mealplanning 본문은 portfolio.css, 나머지 상세 페이지는 legacy-pages.css가 이어 받는다. */
@font-face{font-family:'PortfolioSans';src:url('assets/fonts/portfolio-sans-subset.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
:root{--font:'PortfolioSans','Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR',system-ui,sans-serif;--mono:ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,monospace;--maxw:1160px;--gutter:40px;--ease:cubic-bezier(.2,.7,.2,1);--fs-h1:clamp(2.5rem,1.55rem + 3.3vw,4.125rem);--fs-h2:clamp(1.75rem,1.35rem + 1.25vw,2.375rem)}
/* :root[data-theme]로 써서 이전 theme.css의 색보다 늦게, 같은 우선순위로 이긴다. */
:root,:root[data-theme=light]{--bg:#fff;--bg-2:#f8f8fa;--surface:#fff;--surface-2:#f3f3f6;--line:#ebebef;--line-2:#dcdce3;--text:#0d0d12;--text-2:#3b3b45;--muted:#6a6a76;--faint:#9b9ba6;--accent:#4f50cf;--accent-ink:#4243c2;--accent-hover:#3536a8;--accent-soft:#f3f3fe;--accent-line:#dadaf8;--ok:#15784a;--warn:#a15c07;--bad:#c2372d;--ok-soft:#edf7f1;--warn-soft:#fdf7ec;--bad-soft:#fdf1ef;--shadow-sm:0 1px 2px rgba(17,17,40,.04);--shadow:0 1px 2px rgba(17,17,40,.04),0 10px 28px -14px rgba(17,17,40,.12);--shadow-lg:0 1px 2px rgba(17,17,40,.04),0 28px 56px -28px rgba(40,40,110,.22);--glow:rgba(79,80,207,.10);color-scheme:light}
:root[data-theme=dark]{--bg:#0a0a0d;--bg-2:#0e0e12;--surface:#121217;--surface-2:#1a1a20;--line:#23232a;--line-2:#30303a;--text:#f4f4f7;--text-2:#cfcfd8;--muted:#9898a5;--faint:#6e6e7b;--accent:#9798ff;--accent-ink:#a9aaff;--accent-hover:#c2c3ff;--accent-soft:#16162a;--accent-line:#33335f;--ok:#4fd08c;--warn:#f0b357;--bad:#ff8b80;--ok-soft:#0f2219;--warn-soft:#241b0c;--bad-soft:#2a1513;--shadow-sm:0 0 0 rgba(0,0,0,0);--shadow:0 12px 28px -16px rgba(0,0,0,.7);--shadow-lg:0 30px 60px -30px rgba(0,0,0,.85);--glow:rgba(151,152,255,.10);color-scheme:dark}
/* 이전 페이지 CSS가 쓰던 이름을 새 색에 잇는다. */
:root,:root[data-theme=light],:root[data-theme=dark]{--soft:var(--muted);--line-strong:var(--line-2);--surface-soft:var(--bg-2);--code-bg:var(--surface-2)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height,68px) + 20px)}

body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.7;letter-spacing:-.008em;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,h4{text-wrap:balance}
p,dd,li{text-wrap:pretty}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent-line);color:var(--text)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:10px}.skip:focus{left:16px;z-index:100;background:var(--text);color:var(--bg);padding:8px 14px;border-radius:10px}
.wrap{max-width:calc(var(--maxw) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
.ln{display:block}
.ln+.ln{margin-top:2px}
.nw{white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums}
.ic{width:18px;height:18px;flex:none}
.ic-sun{display:none}[data-theme=dark] .ic-sun{display:block}[data-theme=dark] .ic-moon{display:none}
/* 머리말 */
.hdr{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:saturate(1.8) blur(16px);backdrop-filter:saturate(1.8) blur(16px);border-bottom:1px solid color-mix(in srgb,var(--line) 80%,transparent);font-family:var(--font);line-height:1.7}
.hdr .wrap{display:flex;align-items:center;gap:28px;height:68px}
.wm{display:inline-flex;align-items:center;white-space:nowrap;border-radius:8px;padding:4px 2px}
.wm-ko{font-size:18px;font-weight:700;letter-spacing:-.035em;line-height:1;color:var(--text)}
.wm-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none;align-self:flex-end;margin:0 12px 2px 3px}
.wm-en{font-size:13.5px;font-weight:500;letter-spacing:-.005em;line-height:1;color:var(--muted);transition:color .15s}
.wm:hover .wm-en{color:var(--text-2)}
.hdr-nav{display:flex;gap:2px;margin-left:auto}
.hdr-nav a{font-size:14.5px;font-weight:500;color:var(--text-2);padding:7px 12px;border-radius:9px;white-space:nowrap;transition:color .15s,background .15s}
.hdr-nav a:hover{color:var(--text);background:var(--surface-2)}
.hdr-nav a[aria-current]{color:var(--text);background:var(--surface-2)}
.hdr-nav .nav-contact{display:none}
.hdr-actions{display:flex;gap:8px;align-items:center;padding-left:20px;border-left:1px solid var(--line)}
.icon-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--text-2);display:grid;place-items:center;cursor:pointer;padding:0;transition:color .15s,border-color .15s,background .15s}
.icon-btn:hover{color:var(--text);border-color:var(--line-2);background:var(--bg-2)}
/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border-radius:12px;font:inherit;font-size:15px;font-weight:600;letter-spacing:-.012em;line-height:1.4;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background .18s var(--ease),border-color .18s,color .18s,box-shadow .18s,transform .18s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-sm{height:36px;padding:0 14px;font-size:14px;border-radius:10px;gap:6px}
.btn-sm .ic{width:16px;height:16px}
.btn-primary{background:var(--text);color:var(--bg);box-shadow:0 1px 2px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.10)}
.btn-primary:hover{background:color-mix(in srgb,var(--text) 82%,var(--accent))}
.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.btn-secondary:hover{background:var(--bg-2);border-color:color-mix(in srgb,var(--text) 22%,var(--line-2))}
.copy-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:9px;border:1px solid var(--line);background:var(--surface);font:inherit;font-size:13px;font-weight:600;color:var(--text-2);cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.copy-btn:hover{color:var(--text);border-color:var(--line-2);background:var(--bg-2)}
.copy-btn .ic{width:14px;height:14px}
.copy-btn[data-done]{color:var(--ok)}
/* 꼬리말 */
.site-foot{padding:40px 0 56px;color:var(--muted);font-size:13px;line-height:1.7;border-top:1px solid var(--line);font-family:var(--font)}
.site-foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px 16px;flex-wrap:wrap}
.site-foot ul{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0;padding:0;list-style:none}
.site-foot a{color:var(--text-2);font-weight:500;border-radius:6px}
.site-foot a:hover{color:var(--accent-ink)}
/* 로컬 미리보기 표시(infra-validation.js) */
.infra-draft-banner{margin:16px auto 0;max-width:calc(var(--maxw) + var(--gutter)*2);padding:10px var(--gutter);font-size:13px;font-weight:600;color:var(--warn);background:var(--warn-soft)}
@media (max-width:900px){:root{--gutter:32px}.hdr .wrap{flex-wrap:wrap;height:auto;gap:0 16px;padding-top:12px}.hdr-nav{order:3;width:calc(100% + 24px);margin:6px -12px 0;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}.hdr-nav::-webkit-scrollbar{display:none}.hdr-actions{margin-left:auto;border-left:0;padding-left:0}}
@media (max-width:640px){:root{--gutter:20px}body{font-size:15.5px}.hdr .wrap{padding-top:10px}.wm-en{display:none}.wm-dot{margin-right:0}.hdr-contact{display:none!important}.hdr-nav .nav-contact{display:block}.site-foot .wrap{flex-direction:column;align-items:flex-start}}
@media print{.hdr,.skip,.copy-btn,.site-foot,.section-rail{display:none!important}}
/* ---------- 움직임 (2026-10-13). 디딤돌과 같은 이징을 쓴다. 기기의 '동작 줄이기'와 관계없이 적용한다(사용자 요청). ---------- */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-ios:cubic-bezier(.32,.72,0,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);--t1:140ms;--t2:240ms;--t3:420ms;--t4:650ms}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--t2)}
::view-transition-group(proj-title){animation-duration:var(--t3);animation-timing-function:var(--ease-ios)}
main h1:not(#hero-title){view-transition-name:proj-title}
.theme-vt main h1{view-transition-name:none}
.theme-vt::view-transition-old(root),.theme-vt::view-transition-new(root){animation:none;mix-blend-mode:normal}
.theme-vt::view-transition-new(root){z-index:2}
/* 상단 막대: 맨 위에서는 경계선 없이, 내리면 그림자 */
.hdr{transition:border-color var(--t2),box-shadow var(--t3) var(--ease-out)}
.hdr:not(.is-scrolled){border-bottom-color:transparent}
.hdr.is-scrolled{box-shadow:0 10px 28px -18px rgba(15,20,30,.35)}
/* 메뉴 알약 */
.hdr-nav.has-pill{position:relative}
.hdr-nav .nav-pill,.hdr-nav .nav-hover{position:absolute;left:0;top:0;width:0;height:0;border-radius:9px;pointer-events:none;opacity:0}
.hdr-nav .nav-pill{background:var(--surface-2)}
.hdr-nav .nav-hover{background:color-mix(in srgb,var(--surface-2) 60%,transparent)}
.hdr-nav.ready .nav-pill,.hdr-nav.ready .nav-hover{transition:transform var(--t3) var(--ease-ios),width var(--t3) var(--ease-ios),height var(--t3) var(--ease-ios),opacity var(--t2)}
.hdr-nav.has-pill a{position:relative;z-index:1}
.hdr-nav.has-pill a[aria-current],.hdr-nav.has-pill a:hover{background:transparent}
/* 첫 화면 차례로 떠오르기 */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero-copy>*:not(.lead),.hero-copy .lead .ln,.hero .brief,.crumb,.chead>*{animation:rise var(--t4) var(--ease-out) both}
.hero-copy>:nth-child(2){animation-delay:60ms}.hero-copy>:nth-child(3){animation-delay:120ms}
.hero-copy .lead .ln:nth-child(1){animation-delay:200ms}.hero-copy .lead .ln:nth-child(2){animation-delay:250ms}.hero-copy .lead .ln:nth-child(3){animation-delay:300ms}
.hero-copy>:nth-child(5){animation-delay:360ms}.hero-copy>:nth-child(6){animation-delay:410ms}
.hero .brief{animation-delay:300ms;animation-duration:800ms}
.chead>:nth-child(2){animation-delay:60ms}.chead>:nth-child(3){animation-delay:120ms}.chead>:nth-child(4){animation-delay:180ms}.chead>:nth-child(n+5){animation-delay:240ms}
/* 스크롤하면 떠오르기 (JS가 .rv를 붙인다) */
.rv{opacity:0;transform:translateY(22px);transition:opacity var(--t4) var(--ease-out),transform var(--t4) var(--ease-out)!important;transition-delay:var(--rv-d,0ms)!important}
.rv.in{opacity:1;transform:none}
@media print{.rv{opacity:1!important;transform:none!important}}
/* 읽기 진행 막대 (사례 페이지) */
.read-prog{position:fixed;left:0;right:0;top:var(--header-height,68px);height:2px;z-index:49;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
/* 누를 때 */
.btn:active,.copy-btn:active,.icon-btn:active{transform:scale(.97)}
.icon-btn,.copy-btn{transition:color var(--t1),border-color var(--t1),background var(--t1),transform var(--t2) var(--ease-spring)}
/* 이메일 복사: 아이콘이 체크로 바뀌었다 돌아오기 */
.copy-btn .ic-swap{display:grid;place-items:center}
.copy-btn .ic-swap>*{grid-area:1/1;transition:opacity var(--t1),transform var(--t2) var(--ease-spring)}
.copy-btn .ic-ok{opacity:0;transform:scale(.3) rotate(-30deg)}
.copy-btn[data-done] .ic-ok{opacity:1;transform:none}
.copy-btn[data-done] .ic-copy{opacity:0;transform:scale(.3)}
/* 테마 아이콘 회전 */
@keyframes icon-in{from{opacity:0;transform:rotate(-120deg) scale(.5)}to{opacity:1;transform:none}}
#theme.spin .ic{animation:icon-in 560ms var(--ease-spring) both}
/* '신입 채용 지원 중' 점 */
@keyframes breathe{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--ok) 0%,transparent)}}
.status-pill .dot{animation:breathe 2.8s ease-in-out infinite}
/* 연락하기 대화창 */
@keyframes dlg-in{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@keyframes bd-in{from{opacity:0}to{opacity:1}}
.contact-dialog[open]{animation:dlg-in var(--t3) var(--ease-ios)}
.contact-dialog[open]::backdrop{animation:bd-in var(--t2) ease-out;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* 거누 근거 링크로 이동한 영역을 한 번 반짝인다(site.js) */
@keyframes target-flash{22%{background-color:color-mix(in srgb,var(--text) 9%,transparent);box-shadow:0 0 0 12px color-mix(in srgb,var(--text) 9%,transparent)}}
.flash-target{animation:target-flash 1.3s cubic-bezier(.22,1,.36,1);border-radius:14px}

/* 첫 화면 소개 아래 근거 두 줄(작게) */
.lead-sub{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px;max-width:640px}
.lead-sub li{display:flex;gap:10px;align-items:baseline;font-size:14.5px;line-height:1.6;color:var(--muted)}
.lead-sub b{flex:none;white-space:nowrap;font-size:12.5px;font-weight:700;color:var(--text-2);padding:2px 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}
.lead-sub span{text-wrap:pretty}
.hero-copy>:nth-child(7){animation-delay:460ms}
@media (max-width:560px){.lead-sub li{flex-direction:column;gap:4px}}