
/* In + Sight editorial design system v2 · 2026-10-22 */
:root{--paper:#f3f1ec;--ink:#1c2623;--sub:#646d66;--line:#d1d8ce;--accent:#526e63}
html{scroll-padding-top:28px}
body.insight-home,body.insight-issue{background:#f4f2ed;color:var(--ink);-webkit-font-smoothing:antialiased}
body.insight-home .shell,body.insight-issue .shell{max-width:1320px;padding-left:clamp(22px,4.2vw,64px);padding-right:clamp(22px,4.2vw,64px)}
.top{border-bottom-color:#aeb7ad!important;padding:21px 0!important}
.top .brand{font-size:clamp(25px,2.2vw,34px)!important;font-weight:600!important;letter-spacing:-.075em!important;color:#17221d}
.top .edition{font-size:10px;letter-spacing:.19em;color:#5e6a62}
.hero .eyebrow{font-size:10px;letter-spacing:.24em;color:#526e63}
.hero h1{font-family:Georgia,"Iowan Old Style","Noto Serif KR","AppleMyungjo",serif!important;font-weight:500!important;letter-spacing:-.063em!important}
body.insight-home .hero,body.insight-issue .hero{
 display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
 grid-template-rows:auto 1fr auto auto;gap:0 4.5%;
 padding:78px 0 49px;border-bottom:1px solid #9fa99e;
 min-height:660px;align-items:center
}
body.insight-home .hero .eyebrow,body.insight-issue .hero .eyebrow{grid-column:1;grid-row:1;align-self:end}
body.insight-home .hero h1,body.insight-issue .hero h1{grid-column:1;grid-row:2;align-self:center;margin:22px 0 22px!important;max-width:640px}
body.insight-home .hero h1{font-size:clamp(57px,6.4vw,100px)!important;line-height:1.06!important}
body.insight-issue .hero h1{font-size:clamp(43px,4.1vw,72px)!important;line-height:1.23!important}
body.insight-home .hero .deck,body.insight-issue .hero .deck{grid-column:1;grid-row:3;max-width:530px;color:#5c645d!important;font-size:clamp(16px,1.45vw,20px)!important;line-height:1.9!important}
body.insight-home .hero-foot,body.insight-issue .hero-foot{grid-column:1/-1;grid-row:4;margin-top:38px!important;padding-top:18px;border-top:1px solid #cad0c8}
.hero-art{grid-column:2;grid-row:1/4;position:relative;display:flex;flex-direction:column;
 height:510px;min-width:0;overflow:hidden;padding:24px 28px;color:#f5f1e7;
 background:linear-gradient(145deg,#14372f,#1d4742 55%,#1b2726);
 isolation:isolate;box-shadow:0 20px 45px rgba(25,38,30,.10)}
.hero-art::before{content:"";position:absolute;width:78%;aspect-ratio:1;right:-22%;top:7%;
 background:radial-gradient(circle,rgba(227,238,192,.86) 0 18%,transparent 19% 100%);border:1px solid #d3ddbf;border-radius:50%;
 box-shadow:0 0 0 47px rgba(225,235,204,.08),0 0 0 100px rgba(225,235,204,.045);transform:rotate(-17deg);z-index:-1}
.hero-art::after{content:"";position:absolute;inset:20% -12% -20% 36%;border:1px solid rgba(248,241,215,.25);
 border-radius:50%;transform:rotate(-18deg);z-index:-1}
.hero-art .cover-row{display:flex;justify-content:space-between;gap:10px;font:700 10px system-ui,sans-serif;letter-spacing:.17em}
.hero-art .cover-mark{font:italic 600 clamp(75px,11vw,166px)/.9 Georgia,serif;letter-spacing:-.09em;
 margin:auto 0 32px -8px;transform:rotate(-4deg)}
.hero-art .cover-end{border-top:1px solid rgba(255,255,255,.45);padding-top:15px;
 display:flex;justify-content:space-between;gap:16px;letter-spacing:.1em;font:600 11px system-ui,sans-serif}
.hero-art .cover-number{position:absolute;right:25px;bottom:68px;font:italic 135px/1 Georgia,serif;opacity:.14}
body.insight-issue[data-volume="002"] .hero-art{background:linear-gradient(140deg,#222f49,#2b5368 60%,#6c8791)}
body.insight-issue[data-volume="002"] .hero-art::before{background:radial-gradient(circle,#d7d6c2 0 22%,transparent 22.4%)}
body.insight-issue[data-volume="003"] .hero-art{background:linear-gradient(143deg,#452c27,#884b36 60%,#b07747)}
body.insight-issue[data-volume="003"] .hero-art::before{background:radial-gradient(circle,#edc694 0 22%,transparent 22.4%)}
body.insight-home .overview,body.insight-issue .overview{display:block!important;padding:72px 0 95px!important;border-bottom-color:#cbd2c9!important}
.overview h2{font:italic 400 clamp(35px,4vw,58px)/1.2 Georgia,serif!important;letter-spacing:-.052em;margin:0 0 32px!important}
body.insight-home .overview-list{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
body.insight-home .overview-item{display:flex!important;flex-direction:column;gap:0;padding:0!important;background:#fff;
 border:1px solid #e1e4dc!important;overflow:hidden;box-shadow:0 5px 24px rgba(21,31,28,.035);transition:transform .2s ease,box-shadow .2s}
body.insight-home .overview-item:hover{transform:translateY(-5px);box-shadow:0 16px 35px rgba(21,31,28,.09)}
body.insight-home .overview-item>span:not(.mini-cover){display:block;padding:24px 26px 30px}
body.insight-home .overview-no{display:none}
body.insight-home .overview-title{font:500 22px/1.52 Georgia,"Noto Serif KR",serif;letter-spacing:-.045em}
body.insight-home .overview-tag{font-size:10px;line-height:1.8;letter-spacing:.1em;margin-top:14px}
.mini-cover{position:relative;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;
 min-height:270px;padding:23px 24px;color:#faf7ed;background:#174339;isolation:isolate}
.mini-cover::before{content:"";position:absolute;width:78%;aspect-ratio:1;right:-14%;top:16%;
 border:1px solid rgba(255,255,255,.56);border-radius:50%;
 box-shadow:0 0 0 32px rgba(255,255,255,.055),0 0 0 67px rgba(255,255,255,.04);z-index:-1}
.mini-cover::after{content:"";position:absolute;width:42%;aspect-ratio:1;right:2%;top:33%;background:#cfdcbd;border-radius:50%;z-index:-1;mix-blend-mode:screen;opacity:.7}
.mini-cover .mini-meta{display:flex;justify-content:space-between;font:700 10px system-ui,sans-serif;letter-spacing:.17em}
.mini-cover .mini-number{font:italic 500 clamp(90px,12vw,166px)/.85 Georgia,serif;letter-spacing:-.11em}
.mini-cover .mini-bottom{font:500 11px system-ui,sans-serif;letter-spacing:.16em}
.mini-cover.volume-002{background:linear-gradient(145deg,#20374b,#547a86)}
.mini-cover.volume-001{background:linear-gradient(145deg,#4d513d,#99957a)}
.mini-cover.volume-003{background:linear-gradient(145deg,#59352a,#b26c48)}
body.insight-issue .overview-list{background:#eeede7}
body.insight-issue .overview-item{padding:23px 14px!important;grid-template-columns:74px 1fr!important;gap:15px!important}
body.insight-issue .overview-no{font:italic 35px Georgia,serif!important;color:#84948c!important}
body.insight-issue .overview-title{font-size:clamp(19px,2vw,25px)!important;font-weight:500!important;letter-spacing:-.035em}
body.insight-issue .article{max-width:1000px!important;padding:106px 0 100px!important;border-bottom-color:#cbd1c9!important}
body.insight-issue .article .article-top,body.insight-issue .article>h2,body.insight-issue .article>.subhead{max-width:820px;margin-left:auto;margin-right:auto}
body.insight-issue .article>p,body.insight-issue .article>.editor,body.insight-issue .article>.apply,
body.insight-issue .article>.proof,body.insight-issue .article>.source{max-width:700px;margin-left:auto;margin-right:auto}
body.insight-issue .article .article-num{font:italic 400 70px Georgia,serif!important;color:#71887e!important}
body.insight-issue .article h2{font-size:clamp(32px,4vw,53px)!important;line-height:1.37!important;letter-spacing:-.048em!important}
body.insight-issue .article .subhead{color:#607168!important;font-size:18px!important}
body.insight-issue .article>p{font-size:17px!important;line-height:2.05!important;color:#303a34}
body.insight-issue .editor{background:#e7ebe4!important;border-left:0!important;border-top:2px solid #749184;
 padding:34px 40px!important}
body.insight-issue .editor .label,body.insight-issue .apply .label{color:#496e5e!important}
body.insight-issue .apply{border-top:1px solid #ccd5cd;border-bottom:1px solid #ccd5cd;padding:24px 0!important}
.story-visual{margin:35px auto 58px;max-width:960px}
.story-stage{position:relative;min-height:390px;padding:26px 32px;overflow:hidden;display:flex;
 flex-direction:column;justify-content:space-between;color:#f6f4e9;background:linear-gradient(150deg,var(--tone1),var(--tone2));isolation:isolate}
.story-stage::before{content:"";position:absolute;width:43%;aspect-ratio:1;right:10%;top:6%;border-radius:50%;
 background:var(--shape);filter:blur(1px);z-index:-2}
.story-stage::after{content:"";position:absolute;width:66%;aspect-ratio:1;right:-14%;top:-11%;border-radius:50%;
 border:1px solid rgba(255,255,255,.66);box-shadow:0 0 0 30px rgba(255,255,255,.09),
 0 0 0 62px rgba(255,255,255,.06),0 0 0 98px rgba(255,255,255,.045);z-index:-1}
.story-stage .visual-overline{display:flex;justify-content:space-between;font:600 10px system-ui,sans-serif;
 letter-spacing:.19em;gap:14px}
.story-stage .visual-display{font:italic 500 clamp(56px,8vw,110px)/.91 Georgia,serif;
 letter-spacing:-.078em;max-width:82%;overflow-wrap:anywhere;text-shadow:0 1px 1px rgba(0,0,0,.1)}
.story-stage .visual-foot{display:flex;justify-content:space-between;font:650 10px system-ui,sans-serif;letter-spacing:.18em;
 border-top:1px solid rgba(255,255,255,.42);padding-top:13px}
.story-visual figcaption{margin-top:12px;font-size:11px;color:#68746c;line-height:1.7}
.story-visual.tone-red{--tone1:#873e2f;--tone2:#dc7954;--shape:#f7ae72}
.story-visual.tone-violet{--tone1:#272c51;--tone2:#8669b8;--shape:#c7b4e1}
.story-visual.tone-blue{--tone1:#22434d;--tone2:#679aa1;--shape:#b3d3c6}
.story-visual.tone-green{--tone1:#22463e;--tone2:#678676;--shape:#c4d5a8}
.story-visual.tone-graphite{--tone1:#272a31;--tone2:#6a737e;--shape:#b3c1c2}
.story-visual.tone-amber{--tone1:#725039;--tone2:#c29562;--shape:#efc68e}
.story-visual.tone-moss{--tone1:#3d4b3a;--tone2:#8a9c6f;--shape:#c0d08c}
.story-visual.tone-rose{--tone1:#663f4e;--tone2:#b78694;--shape:#e5bac2}
.story-visual.tone-indigo{--tone1:#35455b;--tone2:#7e91af;--shape:#d6d0bd}
body.insight-home footer,body.insight-issue footer{font-size:12px}
@media(min-width:1100px){body.insight-home .hero,body.insight-issue .hero{gap:0 7%}body.insight-home .hero-art,body.insight-issue .hero-art{height:550px}}
@media(max-width:850px){
 body.insight-home .hero,body.insight-issue .hero{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:54px 0 40px;gap:0}
 body.insight-home .hero h1{font-size:clamp(55px,10vw,83px)!important}
 body.insight-issue .hero h1{font-size:clamp(38px,7.8vw,60px)!important}
 body.insight-home .hero .deck,body.insight-issue .hero .deck{font-size:16px!important;max-width:720px}
 .hero-art{width:100%;height:420px;margin-top:35px}
 .hero-art .cover-mark{font-size:clamp(105px,17vw,155px)}
 body.insight-home .hero-foot,body.insight-issue .hero-foot{margin-top:25px!important}
 body.insight-home .overview-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 body.insight-home .overview-item:first-child{grid-column:1/-1}
 body.insight-home .overview-item:first-child .mini-cover{min-height:310px}
}
@media(max-width:580px){
 body.insight-home .shell,body.insight-issue .shell{padding:0 20px}
 .top .brand{font-size:25px!important}.top .edition{font-size:9px;letter-spacing:.08em}
 body.insight-home .hero,body.insight-issue .hero{padding:42px 0 35px}
 body.insight-home .hero h1{font-size:clamp(53px,13.8vw,75px)!important}
 body.insight-issue .hero h1{font-size:clamp(33px,9vw,51px)!important;line-height:1.33!important}
 .hero-art{height:370px;padding:21px}
 .hero-art .cover-mark{font-size:105px}
 .hero-art .cover-number{font-size:105px}
 body.insight-home .overview,body.insight-issue .overview{padding:48px 0 62px!important}
 body.insight-home .overview-list{grid-template-columns:1fr!important;gap:15px}
 body.insight-home .overview-item:first-child{grid-column:auto}
 .mini-cover,body.insight-home .overview-item:first-child .mini-cover{min-height:245px}
 body.insight-home .overview-title{font-size:20px}
 body.insight-issue .overview-item{grid-template-columns:53px 1fr!important;gap:6px!important;padding:18px 3px!important}
 body.insight-issue .overview-no{font-size:27px!important}
 body.insight-issue .overview-title{font-size:17px!important}
 body.insight-issue .article{padding:65px 0 70px!important}
 body.insight-issue .article .article-num{font-size:51px!important}
 body.insight-issue .article h2{font-size:clamp(30px,8.2vw,41px)!important}
 body.insight-issue .article>.subhead{font-size:16px!important}
 body.insight-issue .article>p{font-size:15.5px!important;line-height:1.98!important}
 .story-visual{margin:28px -20px 43px}
 .story-stage{min-height:305px;padding:21px 23px}
 .story-stage .visual-display{font-size:clamp(56px,15vw,82px);max-width:94%}
 .story-visual figcaption{padding:0 20px}
 body.insight-issue .editor{padding:24px!important}
}
@media(prefers-reduced-motion:reduce){body.insight-home .overview-item{transition:none}}
