/* 블로그 전용 스타일시트. index.html의 :root 토큰을 그대로 복사해서 쓴다.
   새 색, 새 서체는 만들지 않는다. */
:root{
  --paper:#F7F6F2; --ink:#101418; --blue:#0094DB; --harbour:#003B5C;
  --slate:#6B6D6C; --hair:rgba(16,20,24,.16);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper); color:var(--ink);
  font-family:'Archivo','Pretendard Variable',Pretendard,sans-serif;
  font-size:17px; line-height:1.7; letter-spacing:-.01em; word-break:keep-all;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.mono{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:500;}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px;}

/* ---------- nav (index.html의 .nav 블록에서 그대로 옮김) ---------- */
.nav{position:sticky; top:0; z-index:50; background:rgba(247,246,242,.92); backdrop-filter:blur(10px); border-bottom:.5px solid var(--hair);}
.nav-in{max-width:1320px; margin:0 auto; padding:0 clamp(20px,4vw,56px); height:64px; display:flex; align-items:center; gap:36px;}
.nav-logo{flex-shrink:0;}
.nav-logo img{height:29px; width:auto;}
.nav-links{display:flex; gap:28px; margin-left:auto; flex-wrap:wrap;}
.nav-links a{font-size:14px; font-weight:600; letter-spacing:-.01em; position:relative;}
.nav-links a::after{content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:var(--blue); transition:width .25s;}
.nav-links a:hover::after,.nav-links a:focus-visible::after,.nav-links a[aria-current="page"]::after{width:100%;}
.btn{display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:14px; letter-spacing:-.01em; padding:13px 26px; border:1px solid var(--ink); transition:all .22s; cursor:pointer;}
.btn-solid{background:var(--blue); border-color:var(--blue); color:#fff;}
.btn-solid:hover{background:var(--harbour); border-color:var(--harbour);}
.ghost{background:transparent; color:var(--ink);}
.ghost:hover{background:var(--ink); color:var(--paper);}
.nav .btn{padding:9px 20px; margin-left:8px;}
/* burger — hidden on desktop, phones get it instead of the collapsed nav-links.
   같은 규칙을 index.html/contact.html과 맞춘다(2026-09-26). LMIA 링크는 예외로 유지. */
.nav-burger{display:none; width:40px; height:40px; flex:none; background:none; border:0; cursor:pointer; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent;}
.nav-burger span{display:block; position:relative; width:20px; height:14px;}
.nav-burger span::before,.nav-burger span::after{content:""; position:absolute; left:0; right:0; height:2px; background:var(--ink); transition:transform .25s,top .25s,bottom .25s;}
.nav-burger span::before{top:1px;}
.nav-burger span::after{bottom:1px;}
.nav-burger[aria-expanded="true"] span::before{top:6px; transform:rotate(45deg);}
.nav-burger[aria-expanded="true"] span::after{bottom:6px; transform:rotate(-45deg);}
.menu{position:fixed; top:64px; left:0; right:0; bottom:0; z-index:45; background:var(--ink); color:var(--paper); padding:28px clamp(20px,4vw,56px) 40px; overflow:auto;}
.menu a{display:block; padding:16px 0; border-bottom:.5px solid rgba(247,246,242,.16); font-size:clamp(21px,6vw,28px); font-weight:800; letter-spacing:-.03em;}
.menu a:last-child{border-bottom:none;}
.menu a:hover,.menu a:focus-visible{color:var(--blue);}
.menu a[aria-current="page"]{color:var(--blue);}
@media(max-width:860px){
  .nav-in{gap:16px;}
  .nav-links a:not([href="/lmia-check"]){display:none;}
  .nav-links a{padding:12px 0;}
  .nav-links a::after{bottom:8px;}
  .nav-links a,.nav .btn{white-space:nowrap;}
  .nav-burger{display:flex;}
}
/* index.html과 같은 좁은 폭 대응(2026-09-27) */
@media(max-width:390px){
  .nav-in{gap:12px;}
  .nav .btn{padding:9px 14px; margin-left:0;}
}
/* 로고가 더는 flex-shrink로 찌그러지지 않으니, 이 폭부터는 로고 자체를
   높이만 줄여서(폭은 비율대로 자동) 자리를 만든다. */
@media(max-width:350px){
  .nav-in{gap:8px;}
  .nav .btn{padding:8px 10px;}
  .nav-logo img{height:24px;}
}

/* ---------- wrap ---------- */
.wrap{max-width:1320px; margin:0 auto; padding:0 clamp(20px,4vw,56px);}

/* ---------- list page ---------- */
.blog-list{padding:clamp(56px,8vw,96px) 0 clamp(80px,10vw,120px);}
.list-head{max-width:960px; margin:0 auto clamp(36px,5vw,56px); padding:0 clamp(20px,4vw,32px);}
.list-head h1{font-size:clamp(38px,5.6vw,60px); font-weight:850; letter-spacing:-.04em; line-height:1.12;}
.list-head .lede{color:var(--slate); font-size:17px; margin-top:16px; max-width:36em;}

.cats{max-width:960px; margin:0 auto clamp(32px,4vw,48px); padding:0 clamp(20px,4vw,32px); display:flex; gap:10px; flex-wrap:wrap;}
.cat-btn{font-family:inherit; font-size:13px; font-weight:600; letter-spacing:-.01em; padding:9px 18px; border:1px solid var(--ink); background:transparent; color:var(--ink); border-radius:999px; cursor:pointer; transition:all .2s;}
.cat-btn:hover{background:var(--hair);}
.cat-btn.is-active{background:var(--ink); border-color:var(--ink); color:var(--paper);}

.cards{max-width:960px; margin:0 auto; padding:0 clamp(20px,4vw,32px); display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
.card{display:flex; flex-direction:column; gap:12px; padding:28px 26px; border:1px solid var(--ink); background:var(--paper); transition:all .22s;}
.card:hover{background:var(--ink); color:var(--paper);}
.card:hover .meta{color:var(--blue);}
.card .meta{color:var(--slate);}
.card h2{font-size:21px; font-weight:800; letter-spacing:-.03em; line-height:1.35;}
.card .summary{font-size:15px; opacity:.8; line-height:1.7;}
.card .go{margin-top:auto; padding-top:10px; font-weight:700; font-size:13px;}
.card .go::after{content:" →";}
@media(max-width:720px){.cards{grid-template-columns:1fr;}}

.empty{max-width:720px; margin:0 auto; padding:40px clamp(20px,4vw,32px); color:var(--slate);}

/* ---------- post page ---------- */
.post{max-width:720px; margin:0 auto; padding:clamp(56px,8vw,96px) clamp(20px,4vw,32px) 0;}
.post .meta{color:var(--slate); margin-bottom:14px;}
.post h1{font-size:clamp(32px,5vw,48px); font-weight:850; letter-spacing:-.035em; line-height:1.2; margin-bottom:28px;}
.post .cover{width:100%; height:auto; margin-bottom:32px;}
.post .video{position:relative; padding-top:56.25%; margin:0 0 32px; background:var(--ink);}
.post .video iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.post h2{font-size:26px; font-weight:800; letter-spacing:-.03em; margin:40px 0 16px; line-height:1.35;}
.post h3{font-size:21px; font-weight:750; letter-spacing:-.02em; margin:32px 0 14px; line-height:1.4;}
.post p{margin:0 0 20px;}
.post ul{margin:0 0 20px 22px;}
.post li{margin-bottom:8px;}
.post blockquote{border-left:3px solid var(--blue); padding-left:18px; color:var(--slate); margin:0 0 24px;}
.post hr{border:0; border-top:1px solid var(--hair); margin:36px 0;}
.post a{text-decoration:underline; text-decoration-color:var(--hair); text-underline-offset:3px;}
.post a:hover{color:var(--blue); text-decoration-color:var(--blue);}
.post .disclaimer{margin-top:32px; padding-top:20px; border-top:.5px solid var(--hair); color:var(--slate); font-size:14px;}
.post .cta{display:flex; gap:14px; flex-wrap:wrap; margin:32px 0 clamp(56px,8vw,88px);}

.recent{max-width:720px; margin:0 auto; padding:0 clamp(20px,4vw,32px) clamp(80px,10vw,120px);}
.recent h2{font-size:15px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--slate); margin-bottom:16px;}
.recent ul{list-style:none; border-top:.5px solid var(--hair);}
.recent li{border-bottom:.5px solid var(--hair);}
.recent a{display:block; padding:16px 0; font-size:15.5px; font-weight:600;}
.recent a:hover{color:var(--blue);}

/* ---------- footer (index.html의 footer 블록에서 그대로 옮김) ---------- */
footer{background:var(--ink); color:var(--paper); border-top:.5px solid rgba(247,246,242,.14); margin-top:clamp(40px,6vw,64px);}
.foot-in{max-width:1320px; margin:0 auto; padding:56px clamp(20px,4vw,56px) 44px; display:grid; gap:40px;}
.foot-top{display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap;}
.foot-tag{font-family:'Archivo'; font-stretch:120%; font-weight:900; font-size:clamp(28px,4vw,52px); letter-spacing:-.02em; line-height:1;}
.foot-logo img{height:26px; width:auto;}
.foot-links{display:flex; gap:26px; flex-wrap:wrap;}
.foot-links a{color:rgba(247,246,242,.6);}
.foot-links a:hover{color:var(--blue);}
.foot-legal{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; color:rgba(247,246,242,.42); font-size:12.5px; border-top:.5px solid rgba(247,246,242,.12); padding-top:26px;}
.foot-nap{line-height:1.75; max-width:820px;} .foot-nap .nw{white-space:nowrap;} .foot-nap a{color:inherit; text-decoration:underline; text-decoration-thickness:.5px; text-underline-offset:2px;}