/* =========================================================
   style.css — 보이는 모양(색, 글자, 크기, 움직임)은 전부 여기서 관리
   구조는 index.html, 동작은 script.js

   목차
   1. 변수 (색·글꼴·크기·속도)
   2. 기본
   3. 메인 화면 — 번호가 붙은 작업 목록
   4. About 박스 (오른쪽 위)
   5. 프로젝트 패널 — 박스를 누르면 펼쳐지는 창
   6. 패널 내용 — 인트로, 섹션, 이미지
   7. 도식 — 카드, 수치, 막대 그래프, 칩
   8. 반응형 (태블릿·모바일)
   ========================================================= */


/* ---------- 1. 변수 ---------- */
:root {
    /* 회색 (0 = 가장 밝음 → 950 = 가장 어두움) */
    --n0:   #ffffff;
    --n50:  #f5f5f5;   /* 배경 */
    --n100: #e2e2e2;   /* 선 */
    --n300: #bbbbbb;
    --n400: #a8a8a8;
    --n500: #8e8e8e;
    --n600: #747474;
    --n700: #5b5b5b;
    --n900: #272727;   /* 글자 */
    --n950: #0d0d0d;

    /* 포인트 컬러 */
    --accent: #2b3cff;
    --accent-soft: #eef0ff;

    --font: "SUIT Variable", "SUIT", sans-serif;
    --hair: .0625rem;   /* 1px 선 */
    --corner: .3125rem; /* 모서리 작은 사각형 크기 */
    --cover: 1980 / 1080; /* 표지 비율 */
    /* 별표(✱) 아이콘 */
    --asterisk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M4.5 0v9M.6 2.25l7.8 4.5M.6 6.75l7.8-4.5' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E");

    /* 메인 작업 목록 */
    --works-max: 72rem;      /* 최대 폭 */
    --works-side: 2.5rem;    /* 좌우 여백 */
    --dim: .25;              /* 다른 작업에 마우스를 올렸을 때 나머지 작업의 투명도 */
    --ease-out: cubic-bezier(.22, 1, .36, 1);

    /* About 박스 크기: 기본 → 마우스 올림 → 클릭 */
    --about-top: 2rem;
    --about-right: 2.5rem;
    --about-w: 15rem;
    --about-h: 2.125rem;
    --about-w-open: 16.5rem;
    --about-h-open: 7.125rem;
    --about-w-full: min(50rem, 100% - var(--about-right) * 2);

    /* 프로젝트 패널 */
    --project-margin: 1.25rem;  /* 화면 가장자리와 패널 사이 */
    --project-column: 40rem;    /* 본문 폭 */
    --project-inset: 1.25rem;
    --project-gap: 10rem;       /* 섹션 사이 간격 */
    --media-gap: .25rem;        /* 이미지 사이 간격 */

    /* 움직임 */
    --hover-dim: #00000080;
    --hover-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
    --hover-in: .3s;
    --hover-in-ease: cubic-bezier(.15, .5, .25, 1);
    --hover-out: .45s;
    --hover-out-ease: cubic-bezier(.2, 1, .4, 1);
    --expand: .4s;    /* 패널 펼치기 */
    --collapse: .35s; /* 패널 접기 */
}


/* ---------- 2. 기본 ---------- */
html { background: var(--n50); interpolate-size: allow-keywords; scroll-behavior: smooth; }
body {
    margin: 0; container-type: inline-size;
    font: 300 .875rem/1.25rem var(--font); color: var(--n900);
    -webkit-font-smoothing: antialiased;
}
body.modal-open { overflow: hidden; }
body.modal-open .stage > :not(.project) { visibility: hidden; }
a { color: inherit; text-decoration-color: var(--n400); text-underline-offset: 18%; transition: color .2s; }
a:hover, .about .email:hover { color: var(--accent); text-decoration-color: currentColor; }
button { font: inherit; color: inherit; }

/* 별표 아이콘 — About 이름 옆(SVG), 메타 라벨·연락처 앞(::before) */
.asterisk { flex: none; width: .5625rem; height: .5625rem; fill: none; stroke: currentColor; stroke-width: 1.1; display: block; }
.meta-label::before, .contact-link::before {
    content: ""; flex: none; width: .5625rem; height: .5625rem; background: currentColor;
    -webkit-mask: var(--asterisk-icon) center / contain no-repeat; mask: var(--asterisk-icon) center / contain no-repeat;
}

/* 노이즈가 깜빡이며 움직이는 효과 */
@keyframes grain {
    0%    { background-position: 0 0; }
    12.5% { background-position: -2.3rem 1.3rem; }
    25%   { background-position: 2.6rem -1.1rem; }
    37.5% { background-position: -.7rem -2.75rem; }
    50%   { background-position: 1.8rem 2rem; }
    62.5% { background-position: -3rem .45rem; }
    75%   { background-position: .9rem -1.8rem; }
    87.5% { background-position: -1.45rem 2.45rem; }
}
@keyframes asterisk-spin { from { rotate: 30deg; } to { rotate: 390deg; } }

.copyright {
    position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 1.5rem 0;
    text-align: center; font: 300 .625rem/.875rem var(--font); color: var(--n400);
}


/* ---------- 3. 메인 화면 — 번호가 붙은 작업 목록 ---------- */
.stage { position: relative; isolation: isolate; min-height: max(100dvh, var(--about-reach, 0rem)); }

.works-section {
    box-sizing: border-box; max-width: var(--works-max); margin-inline: auto;
    padding: 7.5rem var(--works-side);
    display: flex; flex-direction: column; gap: 3.5rem;
}
/* 두 줄 제목: 진한 첫 줄 + 회색 둘째 줄 */
.works-title, .works-sub { margin: 0; font: 500 1.75rem/2.25rem var(--font); letter-spacing: -.02em; text-wrap: balance; }
.works-title { color: var(--n900); }
.works-sub { color: var(--n400); }

/* 8칸 그리드 — 각 작업(.work)은 이 칸을 그대로 이어받아(subgrid) 이미지·글을 배치 */
.works {
    margin: 0; padding: 0; list-style: none;
    display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3rem 1rem;
}
.work { grid-column: span 4; display: grid; grid-template-columns: subgrid; cursor: pointer; }   /* .half: 4칸 */
.work.wide { grid-column: 1 / span 6; }          /* 6칸, 맨 왼쪽부터 */
.work.wide.indent { grid-column: 2 / span 6; }   /* 6칸, 한 칸 들여서 */

/* 이미지 칸 — .half는 2칸(9:8), .wide는 4칸(7:3) */
.work-media {
    grid-column: span 2; aspect-ratio: 9 / 8; box-sizing: border-box; overflow: hidden;
    display: flex; align-items: center; justify-content: center; padding: 1.5rem;
    background: var(--art);   /* 이미지가 없을 때 임시 색 */
}
.work.wide .work-media { grid-column: span 4; aspect-ratio: 7 / 3; }
.work-media:has(img) { background: var(--media-bg, var(--n100)); }
.work-media img { display: block; width: 100%; height: 100%; object-fit: contain; transition: scale .6s var(--ease-out); }

/* 글 칸 — 번호는 위, 제목·설명은 아래 */
.work-text {
    grid-column: span 2; min-width: 0;
    display: flex; flex-direction: column; justify-content: space-between; gap: .75rem;
    text-wrap: balance;
}
.work-num { font: 400 .8125rem/1.125rem var(--font); color: var(--n400); }
.work-info { display: flex; flex-direction: column; gap: .25rem; }
.work-title { margin: 0; font: 500 .875rem/1.25rem var(--font); color: var(--n900); }
.work-desc { margin: 0; font: 300 .875rem/1.25rem var(--font); color: var(--n600); }

/* "프로젝트 보기" 버튼 — 평소엔 접혀 있다가 마우스를 올리면 아래에서 펼쳐짐 */
.work-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease-out); }
.work-more > div { min-height: 0; overflow: hidden; }
.work-open {
    margin-top: 1rem; padding: .25rem .75rem; cursor: pointer;
    border: var(--hair) solid var(--n100); background: var(--n50);
    font: 300 .8125rem/1.125rem var(--font);
    opacity: 0; transition: opacity .3s var(--ease-out), color .2s, background-color .2s, border-color .2s;
}
.work-open:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.work:is(:hover, :focus-within) .work-more { grid-template-rows: 1fr; }
.work:is(:hover, :focus-within) .work-open { opacity: 1; }

/* 마우스가 있는 기기: 한 작업에 올리면 나머지는 흐려지고, 이미지는 살짝 커짐 */
.work-media, .work-text { transition: opacity .5s var(--ease-out); }
@media (hover: hover) {
    .works:has(.work:hover) .work:not(:hover) :is(.work-media, .work-text) { opacity: var(--dim); }
    .work:hover .work-media img { scale: 1.03; }
}
/* 터치 기기: 버튼을 항상 보여 줌 */
@media (hover: none) {
    .work-more { grid-template-rows: 1fr; }
    .work-open { opacity: 1; }
}

/* 프로젝트별 표지 색 — 이미지가 없을 때의 임시 색, 그리고 패널이 닫힐 때 보이는 배경 */
.p1 { --art: radial-gradient(circle at 30% 70%, #f0b49a, transparent 45%), linear-gradient(160deg, #b72a1e, #3a0b08); }
.p2 { --art: radial-gradient(circle at 70% 30%, #9fb6d3, transparent 40%), linear-gradient(200deg, #31496a, #0c121b); }
.p3 { --art: var(--n900); --media-bg: var(--n900); }
div.file.cover { background: var(--art); }

/* 선 (About 박스 가장자리에서 화면 끝까지 — script.js가 자동으로 넣음) */
.line { position: absolute; z-index: -1; pointer-events: none; background: var(--n100); }
.line.h { height: var(--hair); left: -100vw; right: -100vw; }
.line.v { width: var(--hair); top: -100vh; bottom: -100vh; }
.line.top { top: 0; } .line.bottom { bottom: 0; } .line.left { left: 0; } .line.right { right: 0; }

/* 모서리 작은 사각형 (About 박스 — script.js가 자동으로 넣음) */
.about .corner {
    position: absolute; z-index: 3; box-sizing: border-box; pointer-events: none;
    width: var(--corner); height: var(--corner);
    background: var(--n0); border: var(--hair) solid var(--n100);
}
.about .tl { top: .03rem; left: .03rem; translate: -50% -50%; }
.about .tr { top: .03rem; right: .03rem; translate: 50% -50%; }
.about .bl { bottom: .03rem; left: .03rem; translate: -50% 50%; }
.about .br { bottom: .03rem; right: .03rem; translate: 50% 50%; }

/* ---------- 4. About 박스 (오른쪽 위) ---------- */
/* 기본: 이름만 → 마우스 올림: 연락처가 보임 → 클릭(.open): 소개 패널로 펼쳐짐 */
.about {
    position: absolute;   /* z-index 없음 → 선이 프로젝트 박스 뒤로 지나감 */
    top: calc(var(--about-top) + var(--scrolled, 0rem)); right: var(--about-right);
    box-sizing: border-box; width: var(--about-w); height: var(--about-h);
    padding: .5rem 1rem;
    display: flex; flex-direction: column; align-items: flex-end; gap: .5rem;
    background: var(--n0); box-shadow: inset 0 0 0 var(--hair) var(--n100);
    font: 300 .8125rem/1.125rem var(--font); color: var(--n900); white-space: nowrap;
    cursor: pointer;
    transition: width var(--hover-out) var(--hover-out-ease), height var(--hover-out) var(--hover-out-ease), padding-left var(--hover-out) var(--hover-out-ease);
}
.about-head { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.about .name { display: flex; align-items: center; gap: .25rem; }
.about .name .asterisk { color: var(--accent); }
.about .info {
    display: flex; flex-direction: column; align-items: flex-end; gap: .5rem;
    opacity: 0; pointer-events: none; transition: opacity var(--hover-out) var(--hover-out-ease);
}
.about .mail { position: relative; display: flex; align-items: center; }
.about .email { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--n400); text-underline-offset: 18%; }
.about .elsewhere { text-decoration: underline; }
.about .more { color: var(--n600); }
.about .more .arrow { display: inline-block; width: .665em; height: .665em; fill: none; stroke: currentColor; stroke-width: 88; }

/* 이메일 복사 후 잠깐 보이는 "copied!" */
.copied { position: absolute; right: 100%; margin-right: .25rem; color: var(--accent); white-space: nowrap; opacity: 0; }
.copied.on { opacity: 1; }

@media (min-width: 53.125rem) {
    .about:hover:not(.open) {
        width: var(--about-w-open); height: var(--about-h-open); padding-left: 2rem;
        transition-duration: var(--hover-in); transition-timing-function: var(--hover-in-ease);
    }
    .about:hover .asterisk { animation: asterisk-spin 1.6s linear infinite; }
    .about:hover .info { opacity: 1; pointer-events: auto; transition: opacity var(--hover-in) var(--hover-in-ease); }
}

/* 클릭해서 열렸을 때 */
.about-me, .columns, .shut {
    position: relative; z-index: 1;
    opacity: 0; pointer-events: none; transition: opacity .2s ease-out;
}
.about.open {
    width: var(--about-w-full); height: auto; padding: .5rem 1rem 2rem;
    align-items: stretch; gap: 2.5rem; cursor: default;
    transition: width var(--expand) var(--hover-in-ease), height var(--expand) var(--hover-in-ease);
}
.about.open .info { opacity: 1; pointer-events: auto; }
.about.open .more { display: none; }
.about.open .about-me, .about.open .columns, .about.open .shut {
    opacity: 1; pointer-events: auto; transition: opacity .2s ease-out var(--expand);
}
.about .line, .about .corner { transition: opacity var(--hover-out) var(--hover-out-ease), background-color var(--hover-out) var(--hover-out-ease), border-color var(--hover-out) var(--hover-out-ease); }
.about:not(.open) .line { opacity: 0; }   /* 선은 About이 열렸을 때만 */
.about.open .line { z-index: auto; background: var(--accent); }
.about.open .corner { background: var(--n0); border-color: var(--accent); }

/* 사진 + 자기소개 */
.about-me { display: flex; gap: 1rem; white-space: normal; border-block: var(--hair) solid var(--n100); }
.portrait { flex: 0 0 31%; aspect-ratio: 1; background: var(--n100); position: relative; }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-intro { flex: 1; min-width: 0; padding: .5rem 1rem .5rem 0; font: 300 .875rem/1.25rem var(--font); }
.about-intro p { margin: 0; text-wrap: balance; }

/* Education / Experience */
.columns { display: flex; gap: 1.5rem; align-items: flex-start; white-space: normal; border-block: var(--hair) solid var(--n100); }
.column { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1rem; padding: .5rem; }
.column h2 { margin: 0; font: 500 .8125rem/1.125rem var(--font); color: var(--n400); }
.column ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1.75rem; }
.column li { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.what { display: flex; flex-direction: column; }
.what b { font-weight: 400; }
.when { flex: none; font: 300 .75rem/1rem var(--font); }

/* 닫기 버튼 (About의 .shut, 패널의 .close — script.js가 자동으로 넣음) */
.shut, .project .close { width: 2rem; height: 2rem; padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 .0625rem .25rem #0c0c0d0d); }
.shut { align-self: center; flex: none; }
.shut svg, .project .close svg { display: block; width: 100%; height: 100%; }
.shut .box, .project .close .box { fill: var(--n300); stroke: var(--n100); transition: fill var(--hover-in) var(--hover-in-ease); }
.shut .mark, .project .close .mark { stroke: var(--n0); }
.shut:hover .box, .project .close:hover .box { fill: var(--accent); stroke: var(--accent); }

/* About이 열리면 뒤를 덮는 어두운 노이즈 */
.scrim {
    position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: var(--hover-noise), var(--n950);
    animation: grain .8s steps(1, end) infinite;
    transition: opacity .2s ease-out;
}
.stage:has(.about.open) .scrim { opacity: .92; pointer-events: auto; transition-duration: var(--expand); }


/* ---------- 5. 프로젝트 패널 — 박스 자리에서 화면 가득 펼쳐짐 ---------- */
.project {
    --margin: var(--project-margin);
    --column: min(var(--project-column), 100cqw - (var(--margin) + var(--project-inset)) * 2);
    /* 닫혀 있을 때: 박스 위치(--from-*, script.js가 계산)에 겹쳐 있음 */
    position: fixed; z-index: 10; overflow: hidden; visibility: hidden;
    top: var(--from-top, 0rem); left: var(--from-left, 0rem);
    width: var(--from-width, 0rem); height: var(--from-height, 0rem);
    --frame-top: var(--from-top, 0rem);
    --frame-left: var(--from-left, 0rem);
    --frame-bottom: calc(var(--from-top, 0rem) + var(--from-height, 0rem));
    --frame-right: calc(var(--from-left, 0rem) + var(--from-width, 0rem));
    background: var(--n0);
    box-shadow: inset 0 0 0 var(--hair) var(--n100), 0 0 0 100vmax transparent;
    transition: top var(--collapse) ease-out, left var(--collapse) ease-out, width var(--collapse) ease-out, height var(--collapse) ease-out,
                visibility 0s var(--collapse), box-shadow .2s ease-out;
}
.project.open {
    top: var(--margin); left: var(--margin);
    width: calc(100% - var(--margin) * 2); height: calc(100% - var(--margin) * 2);
    --frame-top: var(--margin); --frame-left: var(--margin);
    --frame-bottom: calc(100% - var(--margin)); --frame-right: calc(100% - var(--margin));
    box-shadow: inset 0 0 0 var(--hair) var(--n100), 0 0 0 100vmax var(--n50);
    visibility: visible;
    transition: top var(--expand) var(--hover-in-ease), left var(--expand) var(--hover-in-ease),
                width var(--expand) var(--hover-in-ease), height var(--expand) var(--hover-in-ease), visibility 0s;
}
.project.placing, .project.placing .edge, .project.placing .corner { transition: none !important; }

/* 닫힐 때 박스의 표지 + 노이즈로 돌아가는 느낌 */
.project::before { content: ""; position: absolute; inset: 0; background: var(--art); opacity: 0; pointer-events: none; }
.project::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background-image: var(--hover-noise); animation: grain .8s steps(1, end) infinite;
}
.project:not(.open)::before { opacity: 1; transition: opacity .15s linear .2s; }
.project:not(.open)::after { opacity: 1; background-color: var(--hover-dim); transition: background-color .2s linear 50ms; }

.scroll, .column-rule, .project .close { opacity: 0; transition: opacity .2s ease-out; }
.project.open .scroll, .project.open .column-rule, .project.open .close { opacity: 1; transition: opacity .2s var(--hover-in-ease) var(--expand); }

/* 패널 테두리 선과 모서리 — 화면에 고정, 내용만 스크롤 */
.edge { position: fixed; z-index: 1; background: var(--n100); }
.edge.h { height: var(--hair); left: 0; right: 0; }
.edge.v { width: var(--hair); top: 0; bottom: 0; }
.edge.top { top: var(--frame-top); }
.edge.bottom { top: calc(var(--frame-bottom) - var(--hair)); }
.edge.left { left: var(--frame-left); }
.edge.right { left: calc(var(--frame-right) - var(--hair)); }
.project .edge { opacity: 0; transition: opacity .12s ease, top var(--collapse) ease-out, left var(--collapse) ease-out; }
.project.open .edge { opacity: 1; transition: opacity 0s, top var(--expand) var(--hover-in-ease), left var(--expand) var(--hover-in-ease); }

.project .corner {
    position: fixed; z-index: 1; box-sizing: border-box; translate: -50% -50%;
    width: var(--corner); height: var(--corner); background: var(--n0); border: var(--hair) solid var(--n100);
    transition: top var(--collapse) ease-out, left var(--collapse) ease-out;
}
.project.open .corner { transition: top var(--expand) var(--hover-in-ease), left var(--expand) var(--hover-in-ease); }
.project .corner.tl { left: var(--frame-left); top: var(--frame-top); }
.project .corner.tr { left: var(--frame-right); top: var(--frame-top); }
.project .corner.bl { left: var(--frame-left); top: var(--frame-bottom); }
.project .corner.br { left: var(--frame-right); top: var(--frame-bottom); }

/* 본문 폭 양옆의 세로선, 위쪽 가운데 닫기 버튼 */
.column-rule { position: fixed; z-index: 1; top: var(--margin); bottom: var(--margin); left: 50%; width: var(--hair); background: var(--n100); }
.column-rule.left  { translate: calc(var(--column) / -2) 0; }
.column-rule.right { translate: calc(var(--column) / 2 - var(--hair)) 0; }
.project .close { position: fixed; z-index: 2; top: calc(var(--margin) + 1rem); left: 50%; translate: -50%; }

.scroll { height: 100%; overflow: clip auto; overscroll-behavior: contain; scrollbar-gutter: stable both-edges; position: relative; z-index: 0; }
.content { position: relative; display: flex; flex-direction: column; align-items: center; padding: 7.5rem 0 15rem; }


/* ---------- 6. 패널 내용 — 인트로, 섹션, 이미지 ---------- */
/* 섹션 사이 간격 + 위아래로 화면 폭 전체를 가로지르는 선 */
.content > .p-intro, .content > .section { position: relative; margin-top: var(--project-gap); }
.content > :first-child { margin-top: 0; }
.content > .p-intro::before, .content > .p-intro::after,
.content > .section::before, .content > .section::after {
    content: ""; position: absolute; left: 50%; translate: -50%;
    width: calc(100vw - var(--margin) * 2); height: var(--hair); background: var(--n100);
}
.content > .p-intro::before, .content > .section::before { top: 0; }
.content > .p-intro::after, .content > .section::after { bottom: 0; }

/* 인트로: 표지 + 제목 + 요약 + 팀/역할/파트너 */
.p-intro { width: var(--column); display: flex; flex-direction: column; gap: 1rem; }
.p-text { display: flex; flex-direction: column; gap: .5rem; padding: .5rem 1rem; }
.p-title { margin: 0; font: 500 1.375rem/1.75rem var(--font); letter-spacing: -.01em; text-wrap: balance; }
.summary { margin: 0; font: 400 1rem/1.5rem var(--font); letter-spacing: -.01em; }
.meta { display: flex; gap: 1rem; }
.meta-block {
    flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .25rem;
    padding: .5rem 1rem; text-align: center; border: var(--hair) solid var(--n100); background: var(--n50);
}
.meta-label { display: flex; align-items: center; gap: .25rem; margin: 0; font: 500 .75rem/1rem var(--font); color: var(--n400); }
.lines p { margin: 0; font: 300 .75rem/1.125rem var(--font); }

/* 섹션: 작은 제목(overline) + 제목(heading) + 본문(body) */
.section { width: var(--column); display: flex; flex-direction: column; gap: .5rem; padding-block: .75rem; scroll-margin-top: 4rem; }
.section.ends-media { padding-bottom: 0; }   /* 이미지로 끝나는 섹션 */
.section.starts-media { padding-top: 0; }    /* 번호 막대로 시작하는 섹션 */
.sec-head { display: flex; flex-direction: column; gap: .25rem; padding-inline: .75rem; }
.overline { margin: 0; font: 500 .75rem/1rem var(--font); color: var(--accent); }
.heading { margin: 0; font: 500 1.125rem/1.5rem var(--font); letter-spacing: -.01em; text-wrap: balance; }
.body { margin: 0; max-width: 30rem; font: 300 .875rem/1.25rem var(--font); }

/* 번호 막대 (예: ① 첫 번째 문제) + Problem / Solution */
.bar {
    display: flex; align-items: center; gap: .5rem; margin: 0 -.75rem; padding: .4375rem 1.6875rem .4375rem .6875rem;
    border: var(--hair) solid var(--n100); background: var(--n50);
    font: 500 1.125rem/1.5rem var(--font); letter-spacing: -.01em;
}
.bar .number { width: 1.5rem; height: 1.5rem; }
.number {
    flex: none; display: grid; place-items: center; width: 1.25rem; height: 1.25rem;
    background: var(--accent); color: var(--n0); font: 500 .75rem/1rem var(--font);
}
.blocks { display: flex; flex-direction: column; gap: 1rem; padding-inline: .75rem; margin-top: .5rem; }
.sec-block { display: flex; flex-direction: column; gap: .25rem; max-width: 32.5rem; }
.subheading { margin: 0; font: 500 .75rem/1rem var(--font); }

/* 이미지 줄 — .fig.full(한 줄 전체) / .fig.half(반씩 두 개) */
.rows { display: flex; flex-wrap: wrap; row-gap: .25rem; column-gap: var(--media-gap); }
.rows.labelled { --media-gap: .5rem; }   /* 라벨이 붙은 이미지 줄은 간격을 조금 넓게 */
.sec-head + .rows, .blocks + .rows { margin-top: .5rem; }
.rows.labelled:not(:first-child) { margin-top: 1.5rem; }

.fig { margin: 0; display: flex; flex-direction: column; gap: .25rem; }
.fig.full { width: 100%; }
.fig.half { width: calc((100% - var(--media-gap)) / 2); }
.fig.spaced { margin-top: 1.75rem; }   /* 위 이미지와 거리 두기 */

/* 이미지 칸 — <div class="file">은 회색 빈 칸, <img class="file">은 원본 비율 그대로 */
.file { display: block; width: 100%; aspect-ratio: var(--cover); object-fit: cover; background: var(--n100); }
.file.tall { aspect-ratio: 338 / 382; }
img.file { aspect-ratio: auto; height: auto; background: none; }
.caption { text-align: center; font: 300 .75rem/1.125rem var(--font); color: var(--n400); }

/* 이미지 위 라벨 — .plain(굵게) / .eyebrow(누르면 해당 섹션으로 이동하는 버튼) */
.fig-label {
    display: flex; align-items: center; gap: .5rem; margin: 0 0 .25rem; padding-inline: .75rem;
    font: 400 .875rem/1.25rem var(--font); color: var(--n900); white-space: nowrap;
}
.fig-label.plain { font-weight: 500; }
.fig-label.eyebrow { width: 100%; box-sizing: border-box; padding: .5rem 1rem; border: var(--hair) solid var(--n100); background: var(--n50); text-align: left; cursor: pointer; }
.fig-label.eyebrow:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* Show more / Show less 접기 */
.footnote { padding-inline: .75rem; }
.footnote summary {
    width: fit-content; cursor: pointer; list-style: none;
    font: 300 .75rem/1.125rem var(--font); color: var(--n400); text-decoration: underline;
}
.footnote summary:hover { color: var(--accent); }
.footnote summary::-webkit-details-marker { display: none; }
.footnote .less, .footnote[open] .more { display: none; }
.footnote[open] .less { display: inline; }
.footnote p { margin: 0; padding-top: .25rem; font: 300 .875rem/1.25rem var(--font); }

/* 연락처 (패널 맨 아래) */
.contact { margin-top: var(--project-gap); display: flex; flex-direction: column; gap: .5rem; }
.contact-link {
    position: relative; display: flex; align-items: center; justify-content: center; gap: .25rem;
    padding: .5rem 1rem; border: var(--hair) solid var(--n100); background: var(--n50);
    font: 300 .875rem/1.25rem var(--font); color: var(--n900); text-decoration: none; cursor: pointer;
}
.contact-link:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.contact .copied { margin-right: .5rem; }


/* ---------- 7. 도식 — 이미지 대신 HTML로 만든 정보 블록 ---------- */
/* 회색 상자 (막대 그래프·칩을 담는 틀) */
.panel {
    width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: .5rem;
    padding: .75rem 1rem 1rem; background: var(--n50); border: var(--hair) solid var(--n100);
}
.panel-title { margin: .25rem 0 0; font: 500 .75rem/1rem var(--font); color: var(--n900); }
.rows > * + .panel, .rows > * + .cards { margin-top: .5rem; }   /* 도식 블록이 이어질 때 간격 */

/* 막대 그래프 — 막대 길이는 HTML의 style="--v: 54%" */
.meter { display: grid; grid-template-columns: 6.5rem 1fr; gap: .5rem; align-items: center; }
.meter-label { font: 300 .75rem/1rem var(--font); color: var(--n700); }
.meter-track { display: block; height: 1.375rem; background: var(--n0); box-shadow: inset 0 0 0 var(--hair) var(--n100); }
.meter-fill {
    display: flex; align-items: center; justify-content: flex-end; box-sizing: border-box;
    width: var(--v); height: 100%; padding-right: .5rem; background: var(--n300);
    font: 500 .6875rem/1 var(--font); color: var(--n0); white-space: nowrap;
}
.meter-fill.hi { background: var(--accent); }   /* 강조할 막대 */

/* 카드 — .cards(2열) / .cards.three(3열) */
.cards { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: .25rem; }
.cards.three { grid-template-columns: repeat(3, 1fr); }
.card {
    margin: 0; display: flex; flex-direction: column; gap: .375rem; padding: .75rem 1rem;
    background: var(--n50); border: var(--hair) solid var(--n100);
    font: 300 .8125rem/1.25rem var(--font);
}
.card p { margin: 0; }
.card b { font-weight: 500; }
.card cite { font: normal 300 .6875rem/1rem var(--font); color: var(--n400); }   /* 인용 출처 */
.card-tag { font: 500 .6875rem/1rem var(--font); color: var(--accent); }
.card-title { margin: 0; font: 500 .875rem/1.25rem var(--font); }
.card-need { padding-top: .375rem; border-top: var(--hair) dashed var(--n300); color: var(--n500); font-size: .75rem; }

/* 정보 3칸 (대상 / 방식 / 목적) */
.stats { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; }
.stat { display: flex; flex-direction: column; gap: .125rem; padding: .75rem 1rem; background: var(--n50); border: var(--hair) solid var(--n100); font: 300 .75rem/1.125rem var(--font); }
.stat-label { font-weight: 500; color: var(--accent); }

/* 칩 — 한 줄: 왼쪽 이름(.chip-key) + 선택지들(.chip) */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.chip-key { width: 4.5rem; font: 300 .6875rem/1rem var(--font); color: var(--n500); }
.chip { padding: .125rem .5rem; background: var(--n0); border: var(--hair) solid var(--n100); font: 300 .75rem/1.125rem var(--font); }


/* ---------- 8. 반응형 ---------- */
/* 태블릿·모바일: 작업을 한 줄에 하나씩 (이미지 위, 글 아래) */
@media (max-width: 53.0625rem) {
    :root { --about-right: 1rem; --about-top: 1rem; --works-side: 1rem; }
    .works-section { padding-top: 5.5rem; padding-bottom: 4rem; gap: 2.5rem; }
    .works-title, .works-sub { font-size: 1.375rem; line-height: 1.875rem; }
    .works { display: flex; flex-direction: column; gap: 3rem; }
    .work { display: flex; flex-direction: column; gap: 1rem; }
    .work-media, .work.wide .work-media { aspect-ratio: 3 / 2; }
    .about { width: auto; left: var(--about-right); align-items: flex-start; }
    .about-head, .about .info { align-items: flex-start; }
    .about.open { top: .75rem; left: .75rem; right: .75rem; width: auto; }
    .about-me, .columns { flex-direction: column; }
    .portrait { flex: none; width: 100%; }
    .about-intro { padding: .5rem 1rem; }
    .copyright { position: static; padding: 2rem 0 1.5rem; }
    .project { --margin: 1rem; }
}
/* 작은 모바일: 모든 것을 한 줄에 하나씩 */
@media (max-width: 27.5rem) {
    .project { --column: min(23.75rem, 100cqw - (var(--margin) + .75rem) * 2); }
    .fig.half { width: 100%; }
    .meta { flex-direction: column; }
    .cards, .cards.three, .stats { grid-template-columns: 1fr; }
    .meter { grid-template-columns: 1fr; gap: .25rem; }
    .p-title { font-size: 1.25rem; line-height: 1.625rem; }
    .summary { font-size: .875rem; line-height: 1.375rem; }
}