/* 개인 디자인 사례. 기존 공공기관·일러스트 레이아웃은 변경하지 않습니다. */
#design-work.graphic-design-portfolio{padding:64px 0 16px;margin-top:60px;border-top:1px solid var(--line);min-width:0}
#design-work :is(header,article,section,figure,nav,div){min-width:0}
#design-work :is(h2,h3,h4,p,dt,dd,figcaption,a){word-break:keep-all;overflow-wrap:break-word}
#design-work .graphic-heading{max-width:870px}
#design-work .graphic-heading .eyebrow{margin-bottom:14px}
#design-work .graphic-heading h2{font-size:clamp(30px,3.3vw,42px);line-height:1.4;letter-spacing:-.045em}
#design-work .graphic-headline{font-size:21px;line-height:1.7;letter-spacing:-.025em;margin-top:16px}
#design-work .graphic-introduction{font-size:15px;line-height:1.9;color:var(--muted);margin-top:16px;max-width:58em}
#design-work .graphic-index{display:block;margin:30px 0 0;padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#design-work .graphic-index ol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));list-style:none;margin:0;padding:0}
#design-work .graphic-index li{min-width:0}
#design-work .graphic-index a{display:flex;align-items:flex-start;gap:10px;min-height:70px;padding:18px 14px 16px 0;border:0;font-size:12px;line-height:1.65;font-weight:600}
#design-work .graphic-index a>span:first-child{font-family:var(--serif);font-size:14px;font-style:italic;font-weight:400;color:var(--green);flex:0 0 auto}
#design-work .graphic-index a:hover{color:var(--green);text-decoration:underline;text-underline-offset:5px}
#design-work .graphic-project{padding:48px 0 42px;border-bottom:1px solid var(--line);scroll-margin-top:0}
#design-work .graphic-project:last-child{padding-bottom:18px;border-bottom:0}
#design-work .graphic-project-heading{display:grid;grid-template-columns:46px minmax(0,1fr);align-items:start;gap:18px;margin-bottom:28px}
#design-work .graphic-project-number{font:italic 29px/1.4 var(--serif);color:var(--green);padding-top:4px}
#design-work .graphic-category{font-size:11px;line-height:1.7;color:var(--green);letter-spacing:.04em;margin-bottom:7px}
#design-work .graphic-project h3{font-size:clamp(25px,2.5vw,32px);line-height:1.5;letter-spacing:-.04em}
#design-work .graphic-feature{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:44px;align-items:start}
#design-work .graphic-summary{font-size:16px;line-height:1.9;color:var(--ink)}
#design-work .graphic-meta{margin:24px 0 0;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;gap:8px}
#design-work .graphic-meta>div{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px}
#design-work .graphic-meta dt{font-size:11px;line-height:1.9;color:var(--muted)}
#design-work .graphic-meta dd{font-size:12px;line-height:1.8;margin:0;color:var(--ink)}
#design-work .graphic-decisions{display:grid;gap:20px;margin-top:24px}
#design-work .graphic-decisions h4{font-size:14px;line-height:1.7;letter-spacing:-.02em;margin:0 0 6px}
#design-work .graphic-decisions p{font-size:13px;line-height:1.9;color:var(--muted);margin:0}
/* 공통 디자인 확대 이미지의 absolute 규칙을 해제하고 재단 원본 전체를 표시합니다. */
#design-work .media.graphic-art{display:block;width:100%;margin:0;min-width:0}
#design-work .media.graphic-art .zoom-trigger{display:grid;place-items:center;position:relative;width:100%;height:auto;max-height:600px;overflow:hidden;margin:0;padding:0;border:1px solid var(--line);background:var(--media);line-height:0}
#design-work .media.graphic-art .zoom-trigger img{position:static;inset:auto;transform:none;display:block;width:100%;height:auto;max-width:100%;max-height:598px;object-fit:contain;object-position:center}
#design-work .graphic-art figcaption{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-top:9px;font-size:11px;line-height:1.75;color:var(--muted)}
#design-work .graphic-zoom-hint{flex:0 0 auto;color:var(--green);font-size:10px}
@media(max-width:900px){
 #design-work .graphic-feature{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
 #design-work .graphic-index ol{grid-template-columns:repeat(3,minmax(0,1fr))}
 #design-work .graphic-index a{min-height:62px;padding-top:15px;padding-bottom:13px}
 #design-work .graphic-project-heading{gap:14px}
}
@media(max-width:640px){
 #design-work.graphic-design-portfolio{padding-top:40px;margin-top:38px}
 #design-work .graphic-headline{font-size:18px;line-height:1.8;margin-top:14px}
 #design-work .graphic-introduction{font-size:14px;line-height:1.9;margin-top:14px}
 #design-work .graphic-index{margin-top:24px}
 #design-work .graphic-index ol{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
 #design-work .graphic-index a{font-size:12px;min-height:60px;gap:8px;padding-right:0}
 #design-work .graphic-project{padding:34px 0}
 #design-work .graphic-project-heading{grid-template-columns:30px minmax(0,1fr);gap:12px;margin-bottom:22px}
 #design-work .graphic-project-number{font-size:24px}
 #design-work .graphic-project h3{font-size:25px;line-height:1.5}
 #design-work .graphic-feature{grid-template-columns:1fr;gap:25px}
 #design-work .graphic-summary{font-size:15px;line-height:1.85}
 #design-work .graphic-meta{margin-top:20px;padding:15px 0}
 #design-work .graphic-meta>div{gap:10px}
 #design-work .graphic-decisions{margin-top:21px;gap:18px}
 #design-work .graphic-decisions p{font-size:13px;line-height:1.9}
 #design-work .graphic-art figcaption{font-size:11px;gap:10px}
}
@media print{
 #design-work.graphic-design-portfolio{margin-top:30px;padding-top:25px}
 #design-work .graphic-project{padding:28px 0}
 #design-work .graphic-feature{grid-template-columns:1fr 1fr;gap:24px}
 #design-work .graphic-art{break-inside:avoid}
}

/* 작품별로 한 장씩 보여 높이가 이미지 개수에 따라 늘어나지 않게 합니다. */
#design-work .graphic-slider .goods-slider-controls{margin:0 0 12px;padding:0;border-top:0;min-height:44px}
#design-work .graphic-slider .goods-slider-buttons button{color:var(--ink);flex:0 0 44px}
#design-work .graphic-slider .goods-slider-buttons button:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
#design-work .graphic-slider .graphic-art[hidden]{display:none}
#design-work .graphic-slider[data-ready] .graphic-art{flex:0 0 100%;width:100%}
#design-work .graphic-slider[data-ready] .zoom-trigger{height:clamp(300px,58vh,520px);aspect-ratio:auto;max-height:none}
#design-work .graphic-slider[data-ready] .zoom-trigger img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain}
#design-work .graphic-slider[data-ready] figcaption{min-height:39px;margin-top:9px}
@media(max-width:640px){
 #design-work .graphic-slider[data-ready] .zoom-trigger{height:clamp(220px,62svh,440px)}
 #design-work .graphic-slider .goods-slider-controls{margin-bottom:10px}
}
@media(prefers-reduced-motion:reduce){#design-work .graphic-slider[data-ready] .goods-slider-track{transition:none}}
@media print{
 #design-work .graphic-slider .goods-slider-controls,#design-work .graphic-zoom-hint{display:none}
 #design-work .graphic-slider[data-ready] .zoom-trigger{height:300px}
}
@media print{
 #design-work .graphic-index{display:none}
 #design-work .graphic-slider[data-ready] .graphic-art{display:none}
 #design-work .graphic-slider[data-ready] .graphic-art[aria-hidden="false"]{display:block}
}