/* 북극성과 시행착오 노트 — shared design system (premium · calm · sage · SUIT) */
:root{
  --bg:#E7EAE3; --surface:#F1F3ED; --ink:#282B26; --soft:#5F635B; --faint:#989C90;
  --line:#D6DACF; --accent:#4E5D51;
  --panel-tx:#E8EBE2; --panel-soft:#9BA292;
  --panel-grad:linear-gradient(158deg,#252D23 0%,#1A201A 62%,#151A14 100%);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:'SUIT Variable','SUIT',system-ui,-apple-system,sans-serif;
  word-break:keep-all; -webkit-font-smoothing:antialiased; line-height:1.65; letter-spacing:-.01em;}
body::before{content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
::selection{background:#D3D8CB;}
.wrap{max-width:1220px; margin:0 auto; padding:0 clamp(22px,4.5vw,64px);}
.eyebrow{font-size:12px; font-weight:500; letter-spacing:.14em; color:var(--faint);}
.num{font-feature-settings:"tnum" 1; font-weight:200; letter-spacing:-.03em;}

/* nav */
.nav{display:flex; justify-content:space-between; align-items:center; padding:26px 0; border-bottom:1px solid var(--line);}
.nav .brand{font-weight:600; font-size:15px;}
.nav .links{display:flex; gap:26px; align-items:center;}
.nav .links a{position:relative; font-size:13.5px; font-weight:500; color:var(--soft); transition:color .25s;}
.nav .links a:not(.no)::after{content:""; position:absolute; left:0; bottom:-5px; width:0; height:1px; background:var(--ink); transition:width .3s cubic-bezier(.2,.7,.2,1);}
.nav .links a:hover{color:var(--ink);} .nav .links a:not(.no):hover::after{width:100%;}
.nav .links .no{color:var(--faint);}

/* section head */
.shead{border-top:1px solid var(--line); padding-top:18px; margin:clamp(60px,10vh,120px) 0 clamp(24px,4vh,38px); display:flex; justify-content:space-between; align-items:baseline; gap:16px;}
.shead h2{margin:0; font-weight:600; font-size:clamp(19px,2.4vw,24px); letter-spacing:-.02em;}
.shead .rt{font-size:13px; color:var(--faint);}

/* page header */
.phead{padding:clamp(52px,9vh,100px) 0 clamp(36px,6vh,64px); border-bottom:1px solid var(--line);}
.phead .eyebrow{display:block; margin-bottom:22px;}
.phead h1{margin:0; font-weight:500; font-size:clamp(38px,5.4vw,72px); line-height:1.1; letter-spacing:-.04em;}
.phead p{margin:26px 0 0; max-width:46ch; font-size:16.5px; font-weight:400; color:var(--soft); line-height:1.9;}

/* ── home: hero ── */
.hero{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,60px); align-items:stretch; padding:clamp(52px,9vh,104px) 0 clamp(44px,7vh,88px);}
.hero .lead{display:flex; flex-direction:column; justify-content:space-between; padding:4px 0;}
.hero .lead .eyebrow{display:block; margin-bottom:26px;}
.hero h1{margin:0; font-weight:500; font-size:clamp(38px,5.3vw,72px); line-height:1.12; letter-spacing:-.04em;}
.hero .lead p{margin:28px 0 0; max-width:32ch; font-size:16px; font-weight:400; color:var(--soft); line-height:1.9;}
.hero .lead .foot{margin-top:40px; font-size:14px; font-weight:400; color:var(--faint);}

/* cover card */
.cover{position:relative; display:flex; flex-direction:column; justify-content:space-between;
  background:var(--panel-grad); color:var(--panel-tx); border:1px solid rgba(232,235,226,.09); border-radius:24px; overflow:hidden;
  min-height:clamp(340px,44vw,500px); padding:clamp(30px,3.2vw,46px);
  transition:transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s;}
.cover:hover{transform:translateY(-5px); box-shadow:0 30px 70px rgba(30,36,28,.28);}
.cover .ghost{position:absolute; right:-.05em; bottom:-.2em; margin:0; pointer-events:none; font-size:clamp(220px,32vw,420px); line-height:.8; color:rgba(232,235,226,.07); transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.cover:hover .ghost{transform:scale(1.04) translateX(-4px);}
.cover>*{position:relative; z-index:1;}
.cover .eyebrow{color:var(--panel-soft);}
.cover .ttl{font-weight:500; font-size:clamp(21px,2.3vw,29px); line-height:1.32; letter-spacing:-.02em; max-width:16ch;}
.cover .read{display:inline-flex; align-items:center; gap:9px; margin-top:20px; font-size:14px; font-weight:500; color:var(--panel-tx); border-bottom:1px solid rgba(232,235,226,.42); padding-bottom:4px; width:max-content;}
.cover .read .a{transition:transform .3s;} .cover:hover .read .a{transform:translateX(5px);}

/* archive grid + mini cover */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,36px);}
.card{display:flex; flex-direction:column;}
.card .mini{position:relative; overflow:hidden; border-radius:20px; min-height:clamp(210px,21vw,270px); padding:clamp(24px,2.6vw,34px); transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.card:hover .mini{transform:translateY(-5px);}
.card .mini.t2{background:linear-gradient(158deg,#CDD4C6,#C0C8B9); color:#2A2E27;} .card .mini.t2 .eyc{color:#5A6153;} .card .mini.t2 .ghost{color:rgba(42,46,39,.09);}
.card .mini.t1{background:linear-gradient(158deg,#DED9CC,#D2CCBD); color:#2E2A22;} .card .mini.t1 .eyc{color:#645E4E;} .card .mini.t1 .ghost{color:rgba(46,42,34,.09);}
.card .mini.t3{background:var(--panel-grad); color:var(--panel-tx);} .card .mini.t3 .eyc{color:var(--panel-soft);} .card .mini.t3 .ghost{color:rgba(232,235,226,.08);}
.card .eyc{position:relative; z-index:1; font-size:12px; font-weight:500; letter-spacing:.13em;}
.card .mini .ghost{position:absolute; right:-.04em; bottom:-.24em; margin:0; pointer-events:none; font-size:clamp(150px,20vw,240px); line-height:.8;}
.card .body{padding:20px 4px 6px;}
.card .body h3{margin:0; font-weight:500; font-size:clamp(16.5px,1.9vw,19px); line-height:1.45; letter-spacing:-.015em;}
.card:hover .body h3{text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px;}
.card .body .k{margin:8px 0 0; font-size:13.5px; font-weight:400; color:var(--soft);}

/* about teaser (home) + about page columns */
.about{display:grid; grid-template-columns:5fr 7fr; gap:clamp(28px,5vw,72px); align-items:start; padding:8px 0;}
.about h3{margin:0; font-weight:500; font-size:clamp(26px,3.6vw,42px); line-height:1.22; letter-spacing:-.03em;}
.about .col p{margin:0 0 18px; font-size:16px; font-weight:400; color:var(--soft); line-height:2;}
.link-underline{position:relative; display:inline-block; margin-top:10px; font-size:14px; font-weight:500; color:var(--ink); padding-bottom:4px;}
.link-underline::after{content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--ink); transform-origin:right; transition:transform .35s cubic-bezier(.2,.7,.2,1);}
.link-underline:hover::after{transform:scaleX(0); transform-origin:left;}

/* tenets (about §2) */
.tenets{margin:0;}
.tenet{display:grid; grid-template-columns:auto 1fr; gap:clamp(22px,4vw,56px); align-items:baseline; border-top:1px solid var(--line); padding:clamp(24px,3.5vw,38px) 0;}
.tenet:last-child{border-bottom:1px solid var(--line);}
.tenet .tn{font-size:clamp(30px,4vw,52px); line-height:1; color:var(--faint); min-width:1.6em;}
.tenet h3{margin:0 0 12px; font-weight:500; font-size:clamp(19px,2.2vw,25px); letter-spacing:-.02em;}
.tenet p{margin:0; max-width:60ch; font-size:15.5px; font-weight:400; color:var(--soft); line-height:1.85;}

/* members (about §3) */
.members{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(28px,3.5vw,48px);}
.member .avatar{width:56px; height:56px; border-radius:50%; background:#D7DCD0; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; margin-bottom:20px;}
.member .avatar span{font-size:20px; color:var(--soft);}
.member .role{font-size:12px; font-weight:500; letter-spacing:.1em; color:var(--accent); margin-bottom:9px;}
.member h4{margin:0 0 10px; font-weight:600; font-size:19px; letter-spacing:-.02em;}
.member p{margin:0; font-size:14.5px; font-weight:400; color:var(--soft); line-height:1.85;}
.member .contact{margin:16px 0 0; font-size:13.5px; color:var(--soft);}
.member .contact b{color:var(--ink); font-weight:600;}
.member .contact a{color:var(--soft); transition:color .25s;}
.member .contact a:hover{color:var(--accent);}

/* colophon (about §4) */
.colophon{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:28px 40px;}
.colophon .c h4{margin:0 0 12px; font-size:12px; font-weight:500; letter-spacing:.13em; color:var(--faint);}
.colophon .c p{margin:0; font-size:14.5px; color:var(--soft); line-height:1.8;}
.colophon .c b{color:var(--ink); font-weight:600;}

/* ── issues list ── */
.ilist{display:flex; flex-direction:column; gap:clamp(22px,3vw,40px); padding:clamp(36px,6vh,60px) 0 0;}
.ientry{display:grid; grid-template-columns:minmax(280px,380px) 1fr; gap:clamp(24px,4vw,56px); align-items:center;}
.ientry .cov{position:relative; overflow:hidden; border-radius:20px; min-height:220px; padding:clamp(24px,2.4vw,32px); display:flex; flex-direction:column; justify-content:space-between; transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.ientry:hover .cov{transform:translateY(-5px);}
.ientry .cov .ghost{position:absolute; right:-.04em; bottom:-.24em; margin:0; pointer-events:none; font-size:clamp(150px,18vw,230px); line-height:.8;}
.ientry .txt .eyebrow{display:block; margin-bottom:12px;}
.ientry .txt h3{margin:0; font-weight:500; font-size:clamp(20px,2.5vw,28px); line-height:1.32; letter-spacing:-.025em;}
.ientry:hover .txt h3{text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px;}
.ientry .txt p{margin:14px 0 0; max-width:52ch; font-size:15px; color:var(--soft); line-height:1.85;}
.ientry .txt .read{display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-size:14px; font-weight:500; color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:3px;}

/* ── article ── */
.imast{display:flex; justify-content:space-between; align-items:baseline; padding:24px 0 0; font-size:13px; color:var(--soft);}
.imast a:hover{color:var(--ink);} .imast .no{color:var(--faint);}
.article{max-width:720px; margin:0 auto;}
.ihead{padding:clamp(34px,6vh,64px) 0 clamp(30px,5vh,52px); border-bottom:1px solid var(--line);}
.ihead .eyebrow{display:block; margin-bottom:20px; color:var(--accent);}
.ihead h1{margin:0; font-weight:500; font-size:clamp(30px,4.8vw,54px); line-height:1.14; letter-spacing:-.035em;}
.ihead .dek{margin:26px 0 0; font-size:clamp(16px,1.6vw,19px); font-weight:400; color:var(--soft); line-height:1.8;}
.ihead .sub{margin:22px 0 0; display:flex; gap:20px; flex-wrap:wrap; font-size:13px; color:var(--faint);}
.art{padding:clamp(40px,6vh,68px) 0 0;}
.art p{margin:0 0 24px; font-size:clamp(16px,1.35vw,17.5px); font-weight:400; line-height:1.95; color:var(--ink);}
.art p.lede{font-size:clamp(19px,1.9vw,23px); line-height:1.6; margin-bottom:30px;}
.art strong{font-weight:600; box-shadow:inset 0 -9px 0 rgba(78,93,81,.16);}

/* spec table */
.spec{margin:clamp(30px,5vh,44px) 0;}
.spec .cap{font-size:12px; font-weight:500; letter-spacing:.13em; color:var(--accent); margin-bottom:6px;}
.spec .r{display:grid; grid-template-columns:92px 1fr; gap:20px; align-items:baseline; border-top:1px solid var(--line); padding:15px 0;}
.spec .r:last-child{border-bottom:1px solid var(--line);}
.spec dt{margin:0; font-size:12.5px; font-weight:500; letter-spacing:.06em; color:var(--faint);}
.spec dd{margin:0; font-size:15.5px; color:var(--ink); line-height:1.6;}

/* pull quote */
.pq{margin:clamp(40px,7vh,72px) auto; max-width:600px; text-align:center;}
.pq::before{content:""; display:block; width:30px; height:2px; background:var(--accent); margin:0 auto 24px;}
.pq p{margin:0; font-weight:500; font-size:clamp(21px,3vw,30px); line-height:1.42; letter-spacing:-.02em; color:var(--ink);}

/* dark band (contained rounded panel — matches cover language) */
.band{background:var(--panel-grad); color:var(--panel-tx); max-width:860px; margin:clamp(40px,6vh,72px) auto; border:1px solid rgba(232,235,226,.09); border-radius:24px; overflow:hidden;}
.band .inner{padding:clamp(32px,5vh,52px) clamp(26px,4vw,50px);}
.band .lab{font-size:12px; font-weight:500; letter-spacing:.16em; color:var(--panel-soft); margin-bottom:24px;}
.band figure{margin:0;}
.band figcaption{font-size:11.5px; letter-spacing:.02em; color:var(--panel-soft); margin-top:16px;}

/* author + pager */
.author{display:grid; grid-template-columns:60px 1fr; gap:20px; align-items:start; border-top:1px solid var(--line); padding:30px 0; margin-top:clamp(20px,4vh,40px);}
.author .av{width:60px; height:60px; border-radius:50%; background:#D7DCD0; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--soft);}
.author .rl{font-size:12px; font-weight:500; letter-spacing:.1em; color:var(--accent); margin-bottom:9px;}
.author p{margin:0; font-size:14.5px; color:var(--soft); line-height:1.8;}
.pager{display:flex; justify-content:space-between; gap:16px; border-top:1px solid var(--line); padding:22px 0 0; font-size:13.5px; font-weight:500;}
.pager a{color:var(--ink);} .pager a:hover{color:var(--accent);}
.pager .dim{color:var(--faint); font-weight:400;}

/* footer */
footer{margin-top:clamp(68px,11vh,130px); border-top:1px solid var(--line);}
footer .wrap{display:grid; grid-template-columns:1fr; gap:28px; padding-top:clamp(40px,6vh,64px); padding-bottom:60px; align-items:start;}
footer .b .fs{font-size:16px; font-weight:500; margin:0 0 8px;}
footer .b .fk{margin:0; font-size:13.5px; font-weight:400; color:var(--soft);}
footer .fc h4{margin:0 0 14px; font-size:12px; font-weight:500; letter-spacing:.13em; color:var(--faint);}
footer .fc a{display:block; font-size:14px; color:var(--soft); margin-bottom:9px; transition:color .25s;}
footer .fc a:hover{color:var(--ink);}
footer .fc p{margin:0; font-size:14px; color:var(--soft); line-height:1.8;}

/* motion */
@keyframes rise{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
.rise{animation:rise 1s cubic-bezier(.2,.7,.2,1) both;}
@media(prefers-reduced-motion:reduce){ .rise{animation:none;} body::before{display:none;} }

@media(max-width:820px){
  .hero{grid-template-columns:1fr; gap:34px;}
  .grid2{grid-template-columns:1fr;}
  .about{grid-template-columns:1fr; gap:20px;}
  .ientry{grid-template-columns:1fr; gap:20px;}
  footer .wrap{grid-template-columns:1fr; gap:32px;}
}