/* kimboohee.com — 크림 종이, 검정 잉크, 코랄은 Udangtang 표시에만 */
:root{
  --paper:#F2F0EC;      /* Udangtang 크림 */
  --sheet:#FAF8F5;
  --ink:#1F1D1B;
  --graphite:#5F5A54;
  --rule:#D8D2C9;
  --coral:#E87A63;
  --coral-ink:#A3462F;  /* 글자로 쓸 때 (대비 확보) */
  --serif:"Gowun Batang", "Nanum Myeongjo", serif;
  --sans:"Pretendard Variable", Pretendard, -apple-system, system-ui, "Apple SD Gothic Neo", sans-serif;
  --gutter:clamp(16px, 4vw, 56px);
  --max:1240px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16.5px/1.7 var(--sans);word-break:keep-all;overflow-wrap:anywhere}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{text-decoration-color:var(--coral)}
:focus-visible{outline:2px solid var(--coral-ink);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.25;margin:0}
p{margin:0 0 1em}
figure{margin:0}
ul,ol{list-style:none;margin:0;padding:0}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.5em 1em;z-index:10}
.skip:focus{left:8px}

/* header */
.site-head{max-width:var(--max);margin:0 auto;padding:22px var(--gutter) 18px;display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand img{width:56px;height:auto}
.brand span{display:flex;flex-direction:column;line-height:1.25}
.brand b{font:700 17px/1.3 var(--serif);letter-spacing:.02em}
.brand i{font-style:normal;font-size:12.5px;color:var(--graphite);letter-spacing:.03em}
.site-nav{display:flex;gap:4px 26px;flex-wrap:wrap;font-size:15.5px}
.site-nav a{text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.site-nav a:hover{border-bottom-color:var(--rule)}
.site-nav a[aria-current]{border-bottom-color:var(--coral)}

main{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:0 clamp(24px,4vw,56px);align-items:end;padding:clamp(24px,5vw,64px) 0 clamp(48px,7vw,104px)}
.tagline{grid-column:1/-1;font-size:clamp(2.1rem,5.1vw,4.6rem);line-height:1.08;letter-spacing:-.015em;margin-bottom:clamp(28px,4vw,56px)}
.tagline span{display:block}
.tagline span:nth-child(2){padding-left:1.2em}
.tagline span:nth-child(3){padding-left:2.4em}
.hero-sub{font-size:16px;color:var(--graphite);border-left:2px solid var(--ink);padding-left:14px;margin:0 0 52px}
.hero-sub b{color:var(--ink);font-weight:600}
.hero-art img{width:100%;box-shadow:0 1px 0 rgba(31,29,27,.08)}
@media (prefers-reduced-motion:no-preference){
  .tagline span{opacity:0;transform:translateY(.25em);animation:line .9s cubic-bezier(.2,.7,.2,1) forwards}
  .tagline span:nth-child(2){animation-delay:.35s}
  .tagline span:nth-child(3){animation-delay:.7s}
  @keyframes line{to{opacity:1;transform:none}}
}

/* wall label */
.label{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--graphite)}
.label b{display:block;color:var(--ink);font-weight:600;font-size:14.5px}
.hero-art .label{text-align:right}

/* blocks */
.block{padding:clamp(40px,6vw,80px) 0;border-top:1px solid var(--rule)}
.block-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:28px}
.block-head h2{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.block-head a{font-size:14.5px;color:var(--graphite)}

/* exhibitions list */
.ex-list li{border-top:1px solid var(--rule)}
.ex-list li:last-child{border-bottom:1px solid var(--rule)}
.ex-list a{display:grid;grid-template-columns:7.5rem minmax(0,1fr) auto;gap:20px;align-items:center;padding:16px 0;text-decoration:none}
.ex-list a:hover{background:var(--sheet)}
.ex-year{font:400 1.7rem/1 var(--serif);font-variant-numeric:tabular-nums}
.ex-list .ex-year{font-size:clamp(1.3rem,2.2vw,1.8rem)}
.ex-text b{display:block;font:400 1.2rem/1.35 var(--serif)}
.ex-text span{font-size:14px;color:var(--graphite)}
.ex-thumbs{display:flex;gap:6px}
.ex-thumbs img{height:64px;width:auto;max-width:96px;object-fit:cover}

/* cards */
.ed-list,.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:clamp(20px,3vw,40px)}
.ed-list a,.card-grid a{display:block;text-decoration:none}
.ed-list img,.card-grid img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--sheet);margin-bottom:12px}
.card-grid img{aspect-ratio:4/3}
.ed-list b,.card-grid b{display:block;font:400 1.15rem/1.4 var(--serif)}
.ed-list span,.card-grid a>span:not(.ex-year){display:block;font-size:13.5px;color:var(--graphite)}
.card-grid .ex-year{display:block;font-size:1rem;margin-bottom:4px;color:var(--graphite)}
.ed-list a:hover b,.card-grid a:hover b{text-decoration:underline;text-decoration-color:var(--coral)}

/* udangtang */
.udt-block{border-top:3px solid var(--coral)}
.udt-lede{max-width:40em;font-size:17px;margin-bottom:32px}
.prod-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr));gap:clamp(20px,3vw,40px)}
.prod img{width:100%;aspect-ratio:1;object-fit:cover;margin-bottom:14px}
.prod b{display:block;font:400 1.2rem/1.35 var(--serif)}
.prod-en{display:block;font-size:13px;color:var(--graphite);margin-bottom:10px}
.prod p{font-size:15px;color:var(--ink);max-width:28em}
.btn{display:inline-block;font-size:14.5px;font-weight:500;text-decoration:none;border:1.5px solid var(--ink);padding:.5em 1.1em;border-radius:2px;background:transparent;transition:background .15s,color .15s}
.btn:hover{background:var(--ink);color:var(--paper)}
.udt-head{border-bottom:3px solid var(--coral);padding-bottom:36px;margin-bottom:40px}
.channel-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr));gap:20px}
.channel-list a{display:block;height:100%;padding:20px 22px;background:var(--sheet);text-decoration:none;border:1px solid var(--rule)}
.channel-list a:hover{border-color:var(--ink)}
.channel-list b{display:block;font:400 1.1rem/1.4 var(--serif);margin-bottom:6px}
.channel-list span{font-size:14px;color:var(--graphite)}

/* books */
.book-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(45%,12rem),1fr));gap:clamp(20px,3vw,48px)}
.book-list.big{grid-template-columns:repeat(auto-fill,minmax(min(45%,15rem),1fr))}
.book-list li{display:flex}
.book-list a{display:flex;flex-direction:column;justify-content:flex-end;width:100%;text-decoration:none}
.book-list b{display:block;font:400 1.1rem/1.4 var(--serif);margin-top:14px}
.book-list span{font-size:13.5px;color:var(--graphite)}
img.cover{box-shadow:0 1px 2px rgba(31,29,27,.18),0 14px 28px -16px rgba(31,29,27,.45)}

.series{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 32px;align-items:end;padding:28px 0;text-decoration:none;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.series b{font:400 clamp(1.5rem,3vw,2.3rem)/1.25 var(--serif);grid-column:1}
.series span{grid-column:1;max-width:38em;color:var(--graphite);font-size:15.5px}
.series i{grid-column:2;grid-row:1/3;font-style:normal;font-size:14.5px;border-bottom:1.5px solid var(--ink);padding-bottom:2px;white-space:nowrap}
.series:hover i{border-color:var(--coral)}

/* page heads */
.page-head{padding:clamp(24px,4vw,56px) 0 clamp(32px,4vw,56px);max-width:52em}
.page-head h1{font-size:clamp(2rem,4.4vw,3.6rem);margin-bottom:.4em}
.page-head h1 span[lang=en]{display:block;font-size:.45em;color:var(--graphite);margin-top:.3em}
.page-head .h-year{display:block;font-size:.42em;color:var(--graphite);margin-bottom:.2em;font-variant-numeric:tabular-nums}
.page-head>p,.page-head div>p{color:var(--graphite);font-size:16px;max-width:40em}
.page-head .lede{color:var(--ink);font:400 1.25rem/1.6 var(--serif);margin-top:1em}
.crumb{font-size:14px;margin-bottom:12px}
.crumb a{color:var(--graphite)}
.with-cover{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:32px;align-items:end;max-width:none}
.head-cover img{box-shadow:0 1px 2px rgba(31,29,27,.18),0 14px 28px -16px rgba(31,29,27,.45)}

/* works (exhibition / editorial) */
.works{display:flex;flex-direction:column;gap:clamp(48px,7vw,104px);padding-bottom:clamp(48px,6vw,88px)}
.work{display:grid;grid-template-columns:minmax(0,max-content) 14rem;justify-content:start;gap:28px;align-items:end}
.work img{width:auto;max-width:100%;height:auto;max-height:min(72vh,820px);cursor:zoom-in}
.work.land{grid-template-columns:minmax(0,1fr) 14rem}
.work.land img{width:100%}
.work .label{margin:0;padding-bottom:4px;border-top:1px solid var(--ink);padding-top:10px}
.tile-grid{columns:3 16rem;column-gap:clamp(16px,2.4vw,32px);padding-bottom:clamp(40px,6vw,80px)}
.tile-grid.three{columns:3 15rem}
.tile{break-inside:avoid;margin-bottom:clamp(16px,2.4vw,32px)}
.tile img{width:100%;background:#fff;cursor:zoom-in}
.tile figcaption{font-size:13.5px;color:var(--graphite);margin-top:8px}
.tile figcaption b{display:block;font-weight:500;color:var(--ink)}
.row-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,48px) clamp(16px,2.4vw,32px);align-items:end;padding-bottom:clamp(40px,6vw,80px)}
.row-grid .tile{margin:0}
.more{padding:clamp(32px,5vw,64px) 0;border-top:1px solid var(--rule)}
.more h2{font-size:1.5rem;margin-bottom:24px}
.more-grid{columns:4 11rem;column-gap:16px}
.more-grid img{margin-bottom:16px;width:100%;cursor:zoom-in}
.poster{max-width:600px;padding-bottom:64px}

/* essays */
.essay{max-width:38rem;padding:clamp(40px,6vw,80px) 0;border-top:1px solid var(--rule)}
.essay h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:.4em}
.essay-by{font-size:14px;color:var(--graphite);margin-bottom:2em}
.essay-body p{font:400 17.5px/2 var(--serif);margin-bottom:1.3em;text-align:left}
.essay-body q{quotes:none;display:block;color:var(--graphite);border-left:2px solid var(--rule);padding-left:1em}
.essay-body small{display:block;font:13.5px/1.6 var(--sans);color:var(--graphite);margin-top:.6em;padding-left:1.1em}
.essay-body b{font-family:var(--sans);font-weight:600;margin-right:.35em}
.essay.verse .essay-body p{line-height:2.1}
.essay-bio{font-size:13.5px;color:var(--graphite);border-top:1px solid var(--rule);padding-top:14px;margin-top:2em}

.prevnext{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--ink);padding:20px 0 clamp(48px,6vw,80px)}
.prevnext a{display:flex;flex-direction:column;text-decoration:none;font:400 1.1rem/1.4 var(--serif)}
.prevnext a span{font:13px/1.5 var(--sans);color:var(--graphite)}
.prevnext .pn-next{text-align:right}
.prevnext a:hover{text-decoration:underline;text-decoration-color:var(--coral)}

/* book page */
.book{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,72px);padding:clamp(24px,4vw,56px) 0 clamp(40px,5vw,72px);align-items:start}
.book-covers{display:flex;gap:20px}
.book-covers img{flex:1;min-width:0}
.book h1{font-size:clamp(2rem,4vw,3.2rem);margin-bottom:.3em}
.book-sub{color:var(--graphite);margin-bottom:1.6em}
.book-text>p{max-width:34em}
.stores{display:flex;flex-wrap:wrap;gap:8px;margin:1.6em 0}
.stores a{display:block;font-size:14px;text-decoration:none;border:1px solid var(--rule);padding:.4em .9em;background:var(--sheet)}
.stores a:hover{border-color:var(--ink)}
.freebie{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:start;margin-top:2em;padding:18px;background:var(--sheet);border:1px solid var(--rule)}
.freebie b{display:block;font:400 1.05rem/1.4 var(--serif);margin-bottom:4px}
.freebie p{font-size:14px;color:var(--graphite);margin-bottom:12px}

/* about */
.about-head{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start;max-width:none}
.about-head h1 span[lang=en]{display:block}
.role{font-family:var(--serif);color:var(--ink)!important;font-size:1.1rem!important}
.cv{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,24rem),1fr));gap:8px clamp(24px,4vw,64px);padding:clamp(24px,4vw,48px) 0 clamp(48px,6vw,88px);border-top:1px solid var(--rule)}
.cv-sec{padding:20px 0}
.cv-sec h2{font-size:1.25rem;margin-bottom:14px}
.cv-sec li{display:grid;grid-template-columns:4.2em minmax(0,1fr);gap:12px;font-size:15px;padding:6px 0;border-top:1px solid var(--rule)}
.cv-sec li span{color:var(--graphite);font-variant-numeric:tabular-nums}

/* footer */
.site-foot{background:var(--ink);color:var(--paper);margin-top:clamp(40px,6vw,80px);padding:clamp(48px,6vw,80px) var(--gutter) 32px}
.site-foot>*{max-width:calc(var(--max) - 2*var(--gutter));margin-left:auto;margin-right:auto}
.foot-contact{margin-bottom:48px}
.foot-tag{font:400 clamp(1.3rem,2.4vw,1.9rem)/1.35 var(--serif);margin-bottom:1.2em}
.foot-contact p:not(.foot-tag){color:#BDB6AC;font-size:15px;margin-bottom:.4em}
.foot-mail{font:400 clamp(1.2rem,2.2vw,1.6rem) var(--serif);text-decoration-color:var(--coral)}
.foot-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:2px 24px;border-top:1px solid #3A3733;padding-top:24px}
.foot-links a{display:flex;flex-direction:column;padding:8px 0;text-decoration:none;font-size:14.5px}
.foot-links a span{font-size:12.5px;color:#9C958B}
.foot-links a:hover{text-decoration:underline;text-decoration-color:var(--coral)}
.foot-copy{font-size:12.5px;color:#9C958B;margin-top:32px}
.site-foot a:focus-visible{outline-color:var(--coral)}

/* lightbox */
.lightbox{position:fixed;inset:0;background:rgba(31,29,27,.94);display:flex;align-items:center;justify-content:center;z-index:20;padding:24px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:94vw;max-height:90vh;width:auto;height:auto;cursor:zoom-out}
.lightbox button{position:absolute;top:14px;right:18px;background:none;border:1px solid #7A746C;color:var(--paper);font:14px var(--sans);padding:.4em .9em;cursor:pointer}

/* responsive */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;align-items:start}
  .hero-sub{margin:0 0 24px}
  .work{grid-template-columns:1fr;gap:12px}
  .work img{max-height:78vh;width:auto;max-width:100%}
  .with-cover{grid-template-columns:minmax(0,1fr) 120px;gap:20px}
  .book{grid-template-columns:1fr}
  .book-covers{max-width:420px}
  .about-head{grid-template-columns:1fr}
  .about-head .portrait{max-width:200px}
  .ex-list a{grid-template-columns:4.2rem minmax(0,1fr)}
  .ex-thumbs{display:none}
}
@media (max-width:560px){
  body{font-size:16px}
  .site-head{padding-top:16px}
  .brand img{width:44px}
  .site-nav{gap:2px 18px;font-size:15px;width:100%}
  .tagline{font-size:clamp(1.6rem,7.6vw,2.3rem)}
  .tagline span:nth-child(2){padding-left:.6em}
  .tagline span:nth-child(3){padding-left:1.2em}
  .prod-list{grid-template-columns:1fr 1fr;gap:20px 14px}
  .prod b{font-size:1.02rem}
  .prod .btn{font-size:13px;padding:.45em .8em}
  .series{grid-template-columns:1fr}
  .series i{grid-column:1;grid-row:auto;justify-self:start;margin-top:8px}
  .with-cover{grid-template-columns:1fr}
  .head-cover{max-width:140px}
  .tile-grid{columns:2 9rem}
  .row-grid{grid-template-columns:1fr 1fr}
  .more-grid{columns:2}
  .essay-body p{font-size:16.5px;line-height:1.95}
}