/* 마인솔루션 블로그 - 랜딩(/service/app)과 같은 토큰, 머리글 구성은 홈페이지(www.minesolution.co.kr)를 따른다 */
@font-face{font-family:Interop;src:url(fonts/Interop-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Interop;src:url(fonts/Interop-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Interop;src:url(fonts/Interop-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Interop;src:url(fonts/Interop-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Interop;src:url(fonts/Interop-ExtraBold.woff2) format("woff2");font-weight:800;font-display:swap}
:root{
  --ink:#111B2B;--ink-2:#4A5568;--ink-3:#636F82;--line:#E1E5EC;
  --sky:#E4ECF8;--sky-line:#C9D6EC;--mint:#DEF1E6;--mint-line:#C5DFD0;
  --navy:#485F8F;--navy-d:#3D537E;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{font-family:Interop,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;color:var(--ink);background:#fff;font-size:17px;line-height:1.75;word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
.wrap.narrow{max-width:760px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.nw{white-space:nowrap}

/* 머리글: 홈페이지처럼 흰 바탕 + 로고 + 메뉴 + 테두리 버튼 */
.top{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:40px;height:72px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex:0 0 auto}
.brand img{height:26px;width:auto}
.brand span{font-size:17px;font-weight:700;color:var(--ink);padding-left:14px;border-left:1px solid var(--sky-line);line-height:1.2}
.cats{display:flex;gap:30px;margin-left:auto}
.cats a{font-size:15px;font-weight:600;color:var(--ink-2);text-decoration:none;padding:10px 0;border-bottom:2px solid transparent}
.cats a[aria-current]{color:var(--ink);border-bottom-color:var(--navy)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border:1px solid var(--navy);border-radius:6px;color:var(--navy);font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap;transition:background-color .15s,color .15s}

/* 첫 화면: 하늘색에서 흰색으로 길게 내려오는 띠 */
.intro{padding:76px 0 120px;background:linear-gradient(180deg,#E4ECF8 0,#E4ECF8 40%,#E9EFF9 62%,#F2F6FC 78%,#FAFCFE 90%,#fff 100%)}
.intro h1{font-size:44px;line-height:1.3;letter-spacing:-1.4px;font-weight:800;text-wrap:balance}
.intro p{margin-top:18px;max-width:34em;font-size:18px;color:var(--ink-2)}
.intro.small{padding:56px 0 72px}
.intro.small h1{font-size:36px}

/* 최근 글 */
.feature{margin-top:-64px}
.feature a{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center;text-decoration:none}
.feature img{border-radius:6px;box-shadow:0 1px 2px rgba(17,27,43,.06),0 18px 44px rgba(72,95,143,.14);border-left:8px solid var(--spine)}
.feature .kicker{display:flex;gap:12px;-webkit-line-clamp:unset;margin-top:0;font-size:14px;font-weight:600;color:var(--ink-3)}
.feature .kicker span:first-child{color:var(--navy)}
.feature h2{margin-top:12px;font-size:30px;line-height:1.38;letter-spacing:-.8px;font-weight:800;text-wrap:balance}
.feature p{margin-top:14px;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.feature time{display:block;margin-top:18px;font-size:14px;color:var(--ink-3)}

/* 글 목록 = 문서철 등록부. 왼쪽 굵은 색 띠가 그 글 대표 이미지의 색 */
.register{padding:88px 0 112px}
.register ol{list-style:none;border-top:2px solid var(--ink)}
.row a{display:grid;grid-template-columns:132px minmax(0,1fr) 176px;grid-template-areas:"date cat thumb" "date title thumb" "date text thumb";column-gap:28px;align-items:start;padding:26px 0 26px 22px;border-bottom:1px solid var(--line);text-decoration:none;position:relative}
.row a::before{content:"";position:absolute;left:0;top:26px;bottom:26px;width:6px;border-radius:2px;background:var(--spine)}
.row time{grid-area:date;font-size:14px;color:var(--ink-3);padding-top:2px}
.row .cat{grid-area:cat;font-size:14px;font-weight:600;color:var(--ink-3)}
.row h3{grid-area:title;margin-top:4px;font-size:21px;line-height:1.45;letter-spacing:-.4px;font-weight:700;text-wrap:balance}
.row p{grid-area:text;margin-top:8px;font-size:15px;line-height:1.7;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row img{grid-area:thumb;width:176px;aspect-ratio:3/2;object-fit:cover;border-radius:4px;border:1px solid var(--line)}

/* 글 */
.post{padding:56px 0 96px;background:linear-gradient(180deg,#E4ECF8 0,#F2F6FC 160px,#fff 320px)}
.crumb a{font-size:14px;font-weight:600;color:var(--navy);text-decoration:none}
.post h1{margin-top:12px;font-size:38px;line-height:1.36;letter-spacing:-1.1px;font-weight:800;text-wrap:balance}
.meta{margin-top:16px;padding-bottom:28px;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink-3);display:flex;gap:14px;flex-wrap:wrap}
.meta span{color:var(--ink-3)}
.body{margin-top:36px;font-size:17.5px;line-height:1.95;color:#1E2836}
.body p+p,.body p+figure,.body figure+p{margin-top:28px}
.body figure{margin-left:-24px;margin-right:-24px}
.body figure img{border-radius:6px;border:1px solid var(--line)}
.body figcaption{margin-top:10px;font-size:14px;line-height:1.6;color:var(--ink-3);text-align:center}
.body a{color:var(--navy);text-underline-offset:3px}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:44px;font-size:14px;color:var(--ink-3)}
.contact{margin-top:48px;padding:32px 36px;background:var(--mint);border-radius:8px}
.contact h2{font-size:22px;line-height:1.4;font-weight:800;letter-spacing:-.4px}
.contact p{margin-top:10px;color:var(--ink-2);max-width:32em}
.contact ul{list-style:none;margin-top:14px;font-size:15px;color:var(--ink-2)}
.contact ul a{color:var(--ink);text-underline-offset:3px}
.contact .btn{margin-top:20px;background:var(--navy);color:#fff}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px}
.pager a{display:block;padding:18px 0;border-top:2px solid var(--ink);text-decoration:none;font-weight:700;line-height:1.5}
.pager a:last-child:nth-child(2){text-align:right}
.pager span{display:block;font-size:13px;font-weight:600;color:var(--ink-3);margin-bottom:4px}
.origin{margin-top:24px;font-size:14px}
.origin a{color:var(--ink-3);text-underline-offset:3px}

/* 바닥글: 랜딩과 같은 구성 */
.foot{padding:44px 0 56px;border-top:1px solid var(--line);font-size:14px;line-height:1.9;color:var(--ink-2)}
.foot b{display:block;color:var(--ink);font-size:15px}
.foot a{text-underline-offset:3px}
.foot-links{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:10px;border-top:1px solid var(--line)}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:none}
.foot .copy{margin-top:2px;color:var(--ink-3)}

@media (hover:hover){
  .cats a:hover{color:var(--ink)}
  .btn:hover{background:var(--navy);color:#fff}
  .contact .btn:hover{background:var(--navy-d)}
  .row a:hover h3,.feature a:hover h2,.pager a:hover{color:var(--navy)}
}
@media (max-width:960px){
  .top .wrap{gap:20px}
  .cats{gap:18px}
  .feature a{grid-template-columns:1fr;gap:24px}
}
@media (max-width:760px){
  .wrap{padding:0 20px}
  .top .wrap{height:auto;flex-wrap:wrap;padding-top:12px;padding-bottom:0;gap:0}
  .brand img{height:22px}
  .top .btn{margin-left:auto;min-height:40px;padding:0 14px;font-size:14px}
  .cats{order:3;width:100%;margin:6px 0 0;gap:22px;overflow-x:auto}
  .intro{padding:44px 0 84px}
  .intro h1{font-size:30px;letter-spacing:-.9px}
  .intro p{font-size:16px}
  .intro.small h1{font-size:28px}
  .feature{margin-top:-48px}
  .feature h2{font-size:23px}
  .register{padding:56px 0 72px}
  .row a{grid-template-columns:minmax(0,1fr) 92px;grid-template-areas:"date thumb" "title thumb" "text text";column-gap:16px;padding:20px 0 20px 18px}
  .row a::before{top:20px;bottom:20px;width:5px}
  .row .cat{display:none}
  .row h3{font-size:18px}
  .row img{width:92px}
  .post{padding:36px 0 72px}
  .post h1{font-size:28px;letter-spacing:-.7px}
  .body{font-size:16.5px;line-height:1.9}
  .body figure{margin-left:0;margin-right:0}
  .contact{padding:26px 22px}
  .pager{grid-template-columns:1fr}
  .pager a:last-child:nth-child(2){text-align:left}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}