/* 버튼과 포트폴리오 각 섹션의 시각 컴포넌트를 정의한다. */
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:12px 23px;border-radius:8px;font-size:.9375rem;font-weight:600;transition:background .2s,transform .2s}
.button-primary{color:#fff;background:var(--blue)}
.button-primary:hover{background:var(--blue-deep);transform:translateY(-2px)}
.button-quiet{padding-inline:8px}.button-quiet:hover{color:var(--blue)}
.button-quiet .icon{width:17px;transition:transform .2s}.button-quiet:hover .icon{transform:translateX(3px)}
.hero-actions{display:flex;flex-wrap:wrap;gap:20px;margin-top:28px}
.section{padding-block:80px}.section-background{background:var(--soft)}
h2{line-height:1.25;font-weight:650;font-size:var(--section-title-size)}
.section-heading{margin-bottom:var(--section-gap)}
.section-heading>p{color:var(--muted);max-width:40em;font-size:1rem;margin-top:12px}
.story-stage{padding-block:48px}
.story-layout{display:grid;align-items:center;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--layout-gap)}
.identity{grid-column:1;display:flex;align-items:center;gap:28px;min-width:0}
/* 증명사진은 큰 PC 화면에서도 과도하게 확대하지 않고 고정 크기를 유지한다. */
.identity img{display:block;width:160px;height:205px;object-fit:cover;border-radius:10px;background:#afd3ec;flex-shrink:0}
.identity strong{display:block;font-size:2.5rem;line-height:1.25;font-weight:700;letter-spacing:-.035em;margin-block:4px 15px}
.identity span{display:block;font-size:1rem;color:var(--muted)}
.identity .identity-name-en{font-size:.9375rem;letter-spacing:.015em}
.identity .identity-location{font-size:.875rem;margin-top:6px}
.story-copy{grid-column:1;min-width:0}
.story-panel+.story-panel{margin-top:32px}
.story-panel h1,.story-panel h2{font-size:clamp(2.3rem,3.35vw,4rem);font-weight:650;line-height:1.23;letter-spacing:-.04em;text-wrap:initial}
.story-panel>p{font-size:1.0625rem;line-height:1.8;color:var(--muted);margin-top:22px;max-width:38em}
.story-visual{grid-column:2;grid-row:1 / 3;min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center;background:#e8eef8;border-radius:var(--radius);overflow:hidden;padding:16px 12px 18px;position:relative}
.scene-host{position:relative;isolation:isolate;min-height:0}
.hero-scene{height:clamp(320px,52svh,600px);width:100%}
.scene-host canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .45s;cursor:pointer}
.scene-host[data-rendered='true'] canvas{opacity:1}
.scene-fallback{position:absolute;inset:12%;display:flex;flex-direction:column;justify-content:center;gap:16px}
.scene-fallback span{border-top:1px solid #b7c7de;padding:20px 0;font-size:1rem;color:#375278}
.scene-host[data-rendered='true'] .scene-fallback{visibility:hidden}
.scene-legend{position:relative;height:28px;display:flex;justify-content:center;font-size:.875rem;color:#445d80}
.scene-legend span{position:absolute;opacity:0}.scene-legend span:first-child{opacity:1}
.scene-turn{display:flex;align-items:center;justify-content:center;gap:8px;align-self:center;min-height:44px;padding:6px 16px;border:1px solid #bfcee3;border-radius:24px;background:transparent;font-size:.8125rem;color:#365278;transition:background .2s,border-color .2s}
.scene-turn:hover{background:#fff;border-color:#8ba7cb}.scene-turn .icon{width:16px;height:16px}
.story-bottom{grid-column:1 / -1;display:flex;align-items:center;gap:36px;border-top:1px solid var(--line);padding-top:20px}
.story-select{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;flex:1;min-width:0}.story-select[hidden]{display:none}
.story-select button{position:relative;display:flex;align-items:center;text-align:left;min-height:72px;padding:10px 0 14px;border:0;border-radius:0;background:transparent;color:var(--muted)}
.story-select button::after{content:'';position:absolute;inset:auto 0 0;height:2px;background:var(--blue);transform:scaleX(var(--story-progress,0));transform-origin:left}
.story-select button[aria-pressed='true']{color:var(--blue)}
.story-choice-copy strong{display:block;font-weight:650;font-size:1rem}
.story-choice-copy small{display:block;font-size:.8125rem;margin-top:5px;color:var(--muted)}
.story-skip{display:flex;align-items:center;gap:14px;min-height:44px;font-size:.875rem;white-space:nowrap}
.story-skip>span{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;animation:next-cue 2.4s ease-in-out infinite}
.story-stops{display:none}
.about-section{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--layout-gap)}
.about-intro{display:flex;flex-direction:column;justify-content:center;min-width:0}
.about-body h2{line-height:1.2;letter-spacing:-.04em}
.about-body>p{max-width:32em;font-size:1.125rem;line-height:1.9;color:var(--muted);margin-top:28px}
.about-signature{display:flex;align-items:center;gap:16px;border-top:1px solid var(--line);margin-top:40px;padding-top:22px;color:var(--muted);font-size:.875rem}
.about-signature strong{font-size:1rem;font-weight:650;color:var(--ink)}
.about-values{list-style:none;border-top:1px solid var(--line)}
.about-values>li{display:grid;grid-template-columns:36px 1fr;gap:24px;border-bottom:1px solid var(--line);padding-block:var(--row-space)}
.about-values .icon{width:28px;height:28px;color:var(--blue);margin-top:4px}
.about-values h3{font-size:1.6rem;font-weight:650;line-height:1.35}
.about-values p{font-size:1.0625rem;line-height:1.85;color:var(--muted);margin-top:12px;max-width:31em}
.experience-list{border-top:1px solid var(--ink)}
.experience-body{--job-detail-indent:11px}
.experience-item{display:grid;grid-template-columns:150px minmax(0,1fr);border-bottom:1px solid var(--line);padding-block:var(--row-space);gap:var(--layout-gap)}
.experience-date{display:flex;flex-direction:column;align-items:flex-start;gap:12px;font-size:.875rem;font-variant-numeric:tabular-nums;color:var(--muted);padding-top:4px}
.status{display:inline-flex;align-items:center;gap:7px;font-size:.8125rem;color:var(--blue);font-weight:600}
.status::before{content:'';width:6px;height:6px;background:var(--blue);border-radius:50%}
.period{font-size:.8125rem}
.job-heading{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px}
.job-heading h3{font-size:1.55rem;line-height:1.35;font-weight:650}
.job-heading>span,.job-position{color:var(--muted);font-size:.875rem}
.job-position{margin-top:5px}
.job-details{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;margin-top:16px;color:#40546e;font-size:.9375rem}
.job-details li{position:relative;padding-left:var(--job-detail-indent);line-height:1.75}
.job-details li::before{content:'';width:3px;height:3px;position:absolute;left:0;top:12px;background:#718298;border-radius:50%}
/* 목록의 점 공간을 키워드에도 적용해 첫 글자의 시작선을 일치시킨다. */
.job-tags{display:flex;flex-wrap:wrap;gap:8px 15px;margin-top:12px;padding-left:var(--job-detail-indent);font-size:.8125rem;color:var(--blue)}
.job-tabs{display:none}
.skills-layout{display:grid;grid-template-columns:minmax(240px,.75fr) minmax(0,1.5fr);gap:var(--layout-gap);align-items:stretch}
.skills-visual{min-width:0;border-radius:var(--radius);background:#eef3fb;padding:12px 20px 28px;display:flex;flex-direction:column;justify-content:center}
.skill-scene{height:370px}
.skills-visual>p{font-size:.9375rem;color:var(--muted);line-height:1.8;text-align:center;max-width:22em;margin:auto}
.skills-table{border-top:1px solid var(--ink)}
/* 호버 배경 끝에 글자가 붙지 않도록 평상시부터 좌우 8px 안쪽 여백을 둔다. 호버에서만 넣으면 내용이 튄다. */
.skill-row{display:grid;grid-template-columns:172px minmax(0,1fr);gap:28px;border-bottom:1px solid var(--line);transition:background .2s;padding-block:var(--row-space);padding-inline:8px}
.skill-row:hover{background:var(--soft)}
.skill-row h3{display:flex;align-items:flex-start;gap:14px;font-size:1rem;font-weight:650;line-height:1.6}
.skill-symbol{display:inline-flex;align-items:center;justify-content:center;width:23px;height:25px;flex:0 0 23px;font-size:1rem;color:var(--blue);letter-spacing:-.02em}
.skill-tags{display:flex;flex-wrap:wrap;align-content:start;gap:6px 18px;list-style:none}
.skill-tags li{position:relative;color:var(--muted);font-size:.9375rem;line-height:1.7}
.skill-tags li:not(:last-child)::after{content:'';position:absolute;right:-10px;top:12px;width:2px;height:2px;background:#8e9db0;border-radius:50%}
.project-grid{display:grid;perspective:1200px;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--layout-gap)}
.project-card{display:flex;flex-direction:column;min-width:0;min-height:450px;border:1px solid var(--line);background:#f5f7fa;transition:box-shadow .25s,border-color .25s;padding:var(--panel-padding);border-radius:var(--radius)}
.project-current{background:#244dc5;border-color:#244dc5;color:#fff}
.project-card:hover{border-color:#839fca;box-shadow:0 18px 40px -28px #1717173d}
.project-card-top{display:flex;justify-content:space-between;gap:18px;align-items:center;font-size:.875rem;color:var(--muted)}
.project-current .project-card-top{color:#e1e8ff}
.project-status{font-weight:600}
.project-card-body{flex:1;padding-top:48px}
.project-card-body h3{font-size:clamp(1.7rem,2.55vw,3rem);line-height:1.25;font-weight:600}
.project-card-body p{font-size:1rem;line-height:1.85;color:var(--muted);margin-top:24px;max-width:34em}
.project-current .project-card-body p{color:#e1e8ff}
.project-tools{display:flex;flex-wrap:wrap;gap:5px 20px;list-style:none;font-size:.875rem;margin-top:28px;color:#e1e8ff}
.project-card-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:.9375rem;font-weight:550;border-top:1px solid var(--line);padding-top:20px;margin-top:32px}
.project-current .project-card-footer{border-color:#ffffff4a}
.project-card-footer .icon{transition:transform .25s}.project-card:hover .project-card-footer .icon{transform:translate(3px,-2px)}
.project-link-note{font-size:.8125rem;color:var(--muted);margin-left:6px}
.project-update-note{margin-top:24px;font-size:.875rem;color:var(--muted)}
.education-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--layout-gap)}
.column-heading{font-size:1rem;font-weight:650;padding-bottom:18px;border-bottom:1px solid var(--ink)}
.education-item{padding-block:var(--row-space)}.education-item+.education-item{border-top:1px solid var(--line)}
.education-item time{display:block;font-size:.875rem;color:var(--muted);font-variant-numeric:tabular-nums;margin-bottom:8px}
.education-item h4{font-size:1.45rem;line-height:1.4;font-weight:650}
.education-item p{font-size:1rem;color:var(--muted);margin-top:6px}
.education-meta{display:inline-block;font-size:.875rem;color:var(--blue);margin-top:12px}
.training{background:var(--soft);border:1px solid var(--line);border-radius:12px;margin-top:var(--section-gap)}
.training summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:100px;list-style:none;padding:var(--row-space) var(--panel-padding)}
.training summary::-webkit-details-marker{display:none}
.training-summary{display:grid;gap:4px}.training-label{font-size:.8125rem;color:var(--blue)}
.training-summary strong{font-size:1rem;font-weight:600}
.training-meta{font-size:.875rem;color:var(--muted)}
.details-toggle{font-size:1.5rem;color:var(--blue);transition:transform .2s}.training[open] .details-toggle{transform:rotate(45deg)}
.training-content{color:var(--muted);font-size:.9375rem;padding:0 var(--panel-padding) var(--panel-padding)}
.training-content>p{border-top:1px solid var(--line);padding-top:20px}
.training-topics{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:20px}
.training-topics h4{color:var(--ink);margin-bottom:6px}
/* 연락처는 두 연락 방법을 같은 위계로 보여 주는 차분한 정보 그리드다. */
.contact-composition{min-width:0}
.contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--layout-gap)}
.contact-links,.contact-meta{display:grid;grid-template-rows:repeat(2,minmax(132px,1fr));min-width:0;border-top:1px solid var(--line)}
.contact-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0;padding-block:var(--row-space);border-bottom:1px solid var(--line)}
.contact-row-copy{min-width:0}
.contact-meta-label{display:block;margin-bottom:8px;color:var(--muted);font-size:.875rem;line-height:1.5}
.contact-row strong,.contact-region p{display:block;color:var(--ink);font-size:var(--contact-value-size);font-weight:550;line-height:1.5;letter-spacing:-.015em;overflow-wrap:anywhere}
.contact-phone strong{font-variant-numeric:tabular-nums}
.contact-residence{display:block;color:var(--muted);font-size:.875rem;margin-top:4px}
.contact-interests ul{list-style:none;font-size:1rem;line-height:1.75}
.contact-link-icon{color:var(--muted);width:20px;height:20px;transition:color .2s}
a.contact-row:hover strong{color:var(--blue);text-decoration:underline;text-underline-offset:5px}
a.contact-row:hover .contact-link-icon{color:var(--blue)}
@media(max-width:850px){.contact-grid{grid-template-columns:minmax(0,1fr);gap:0}.contact-links,.contact-meta{grid-template-rows:none}.contact-meta{border-top:0}.contact-row{align-items:flex-start;min-height:0}.contact-link-icon{margin-top:25px}}
.site-footer{display:flex;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid var(--line);padding-block:18px;font-size:.8125rem;color:var(--muted)}
.site-footer a{display:inline-flex;align-items:center;gap:12px;min-height:44px}.site-footer a:hover{text-decoration:underline;text-underline-offset:5px}