/* 블로그 · 제품 페이지가 같이 쓴다. index.html 은 제 스타일을 따로 갖는다
(첫 화면만의 짜임이 있어 섞지 않는다). 색과 글꼴은 여기와 같게 맞춘다. */
/* 2026-10-04 다시 그림 - 폭 720 → 1120(글은 760), 글자 한 단계 키움, 크림 상자(--card) 는 흰 바탕 + 선으로.
금색은 포인트 한 가지로만 쓴다(번호 · 밑줄 · hover). 모서리는 단추 6px 하나. */
:root{--navy:#193248;--gold:#AC8540;--ink:#1c2b3a;--muted:#5f6f7e;--line:#e3e6ea;--bg:#ffffff;--card:#ffffff;--wash:#f4f5f7}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic",sans-serif;
background:var(--bg);color:var(--ink);line-height:1.7;letter-spacing:-.012em;font-size:17px}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
/* 위 */
.top{display:flex;align-items:center;gap:12px;padding:22px 0 0;min-height:72px}
.top a.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.top img{height:32px;width:auto}
.top span{font-size:15.5px;font-weight:700;color:var(--navy);letter-spacing:-.01em}
.top nav{margin-left:auto;display:flex;align-items:center;gap:28px}
.top nav a{font-size:16px;color:var(--ink);text-decoration:none;font-weight:500}
.top nav a:hover,.top nav a[aria-current]{color:var(--gold)}
.top nav a.btn{background:var(--navy);color:#fff;font-size:15px;line-height:1;padding:11px 16px;border-radius:6px;font-weight:600}
.top nav a.btn:hover{background:#0f2234;color:#fff}
/* 「제품」에 올리면 펴진다. 아래 여백은 마우스가 지날 다리다 - 없으면 내려가다 닫힌다 */
.top .menu{position:relative;display:inline-flex;padding-bottom:14px;margin-bottom:-14px}
.top .sub{position:absolute;top:100%;left:50%;transform:translateX(-50%);display:none;
min-width:168px;z-index:20;padding:6px;background:#fff;
border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px rgba(20,32,44,.09)}
.top .menu:hover .sub{display:block}
.top .sub a{display:block;padding:8px 12px;border-radius:7px;white-space:nowrap;font-size:14.5px}
.top .sub a:hover{background:var(--wash);color:var(--gold)}
/* 자주 묻는 질문 - 제목만 서고 누르면 답이 펴진다 */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;position:relative;
padding:15px 32px 15px 0;font-size:16px;font-weight:600;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:13px;
color:var(--gold);font-size:19px;font-weight:400;line-height:1.4}
.faq details[open] summary::after{content:"2"}
.faq summary:hover{color:var(--gold)}
.faq p{margin:0;padding:0 32px 17px 0;font-size:15.5px;color:var(--muted)}
hr{border:0;border-top:1px solid var(--line);margin:0}
section{padding:48px 0}
/* 구역 제목 - 작은 금색 머리글 대신 제목답게. 글(article) 안의 h2 는 아래 따로 */
h2{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--navy);margin-bottom:20px}
/* 제품 · 목록 쪽은 읽기 폭으로 */
.page{max-width:760px}
/* 머리 */
header{padding:56px 0 44px}
.kicker{font-size:14px;font-weight:600;color:var(--gold);margin-bottom:14px}
header h1{font-size:40px;line-height:1.25;font-weight:800;color:var(--navy);letter-spacing:-.03em}
header p{margin-top:18px;font-size:19px;color:var(--muted);line-height:1.7}
header p b{color:var(--ink);font-weight:600}
/* 제품 페이지 머리 - 첫 화면의 남색 띠(.check)와 같은 사진 · 같은 덮개. 사진은 img/check-bg.jpg (Unsplash MNsXlmQ3r1g) */
header.band{position:relative;isolation:isolate;color:#fff;padding:72px 0 68px;
background:var(--navy) url(/img/check-bg.jpg) center right / cover no-repeat}
header.band::before{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(90deg, rgba(25,50,72,.96) 0%, rgba(25,50,72,.88) 42%, rgba(25,50,72,.35) 100%)}
header.band .kicker{color:#d6b474}
header.band h1{color:#fff}
header.band p{color:rgba(255,255,255,.78)}
header.band p b{color:#fff}
/* 카드 묶음 - 상자 대신 윗선 */
.cards{display:grid;gap:0;border-top:1px solid var(--line)}
.cards > *{padding:22px 0;border-bottom:1px solid var(--line)}
.cards b{display:block;font-size:19px;color:var(--navy);margin-bottom:6px;letter-spacing:-.015em}
/* 글 안의 굵은 글씨는 줄을 안 바꾼다 - 위 규칙이 제목용이라 본문까지 블록이 됐다 */
.cards p b{display:inline;font-size:inherit;color:var(--ink);margin:0}
.cards p{font-size:16.5px;color:var(--muted)}
a.card{text-decoration:none;display:block}
a.card:hover b{color:var(--gold)}
/* 알약 - 다 테두리. 누를 수 있는 것(a)은 남색 글자 · 남색 선 · 화살표, 아닌 것(div)은 회색 글자 · 옅은 선 */
.two{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center}
.two > *{border:1px solid #c6ccd3;border-radius:6px;padding:9px 14px;font-size:15.5px;font-weight:500;color:var(--muted)}
.two a{border-color:var(--navy);font-weight:600;color:var(--navy);text-decoration:none}
.two a::after{content:" →"}
.two a:hover{background:var(--navy);color:#fff}
/* 차례 */
.steps{list-style:none;counter-reset:s;display:grid;gap:20px;margin-top:2px}
.steps li{display:grid;grid-template-columns:22px 1fr;column-gap:14px;row-gap:3px;align-items:baseline}
.steps li::before{counter-increment:s;content:counter(s);grid-row:1 / span 2;align-self:start;
width:22px;height:22px;
border-radius:50%;background:var(--navy);color:#fff;font-size:12px;font-weight:700;
display:inline-flex;align-items:center;justify-content:center;transform:translateY(3px)}
.steps b{font-weight:600;color:var(--navy)}
.steps span{color:var(--muted);font-size:15.5px}
/* 단계 안에 붙는 화면 - 설명 아래, 같은 들여쓰기 */
/* 글 - 읽기 폭 760 */
article{padding:56px 0 8px;max-width:760px}
article h1{font-size:38px;line-height:1.3;font-weight:800;color:var(--navy);letter-spacing:-.03em}
article .date{margin-top:14px;font-size:15px;color:var(--muted)}
article h2{font-size:24px;font-weight:700;color:var(--navy);margin:52px 0 16px;letter-spacing:-.02em}
article h3{font-size:19px;font-weight:700;color:var(--navy);margin:36px 0 10px}
article p{margin:0 0 20px;font-size:17.5px;line-height:1.8}
article b{font-weight:600;color:var(--navy)}
article ul{margin:0 0 20px;padding-left:20px}
article li{margin:8px 0;font-size:17.5px;line-height:1.8}
blockquote{border-left:3px solid var(--gold);margin:22px 0;padding:6px 0 6px 20px;color:var(--muted)}
blockquote p{margin:0 0 6px;font-size:17px}
pre{background:var(--wash);border:1px solid var(--line);border-radius:6px;padding:16px 18px;
font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14.5px;line-height:1.9;
white-space:pre-wrap;margin:0 0 20px;overflow-x:auto}
table{border-collapse:collapse;width:100%;margin:0 0 20px;font-size:16px}
th,td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
th{background:var(--wash);font-weight:600;color:var(--navy)}
/* 목록 */
.list{padding:48px 0;max-width:760px}
.list h1{font-size:34px;font-weight:800;color:var(--navy);margin-bottom:28px;letter-spacing:-.03em}
/* 갈래 제목과 글 제목이 비슷해 보였다(2026-10-13 대표님) - 갈래는 키우고 글은 줄이고 굵기를 뺀다 */
.list h2{font-size:22px;font-weight:800;color:var(--navy);margin:40px 0 10px;letter-spacing:-.02em}
.list h2:first-of-type{margin-top:0}
.list ol{list-style:none;border-top:1px solid var(--line)}
/* 한 줄에 제목 · 날짜. 글이 쌓여도 한 화면에 열 편은 든다 (2026-10-04 대표님: 「5개인데 거의 꽉 차네」) */
.list li{border-bottom:1px solid var(--line)}
.list a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;
text-decoration:none;color:var(--ink,#222);font-size:15.5px;font-weight:400;letter-spacing:-.01em}
.list a:hover{color:var(--gold)}
.list .d{flex:none;font-size:14px;color:var(--muted);font-weight:400;font-variant-numeric:tabular-nums}
/* 아래 */
.foot{padding:28px 0 8px;font-size:16px;color:var(--muted);max-width:760px}
.foot a{color:var(--navy);font-weight:600;text-decoration:none}
.foot a:hover{color:var(--gold)}
/* 끝맺음 - 첫 화면과 같은 단추 */
.cta{padding:72px 0 80px}
.cta h2{font-size:32px;margin-bottom:26px}
.btn-main{display:inline-block;text-decoration:none;font-weight:600;font-size:17px;line-height:1;
padding:18px 26px;border-radius:6px;background:var(--navy);color:#fff}
.btn-main:hover{background:#0f2234}
.cta .mail{display:inline-block;margin-left:18px;font-size:17px;color:var(--muted);text-decoration:none}
.cta .mail:hover{color:var(--navy)}
.more{margin-top:14px;font-size:16px}
.more a{color:var(--navy);text-decoration:none;font-weight:600}
.more a:hover{color:var(--gold)}
footer{padding:32px 0 56px;font-size:14px;color:var(--muted);line-height:2}
footer strong{color:var(--ink);font-weight:600}
footer a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
footer a:hover{color:var(--navy)}
@media (max-width:640px){
.wrap{padding:0 20px}
.top{min-height:60px;padding-top:16px}
.top span{display:none}
.top nav{gap:18px}
header{padding:40px 0 36px}
header.band{padding:48px 0 44px;background-position:center}
header.band::before{background:rgba(25,50,72,.82)}
header h1{font-size:30px}
header p{font-size:17px}
article h1{font-size:28px}
article p,article li{font-size:17px}
section{padding:36px 0}
h2{font-size:23px}
.cta{padding:52px 0 60px}
.cta h2{font-size:26px}
.cta .mail{display:block;margin:16px 0 0}
}
figure{margin:24px 0}
figure img{width:100%;height:auto;display:block}
figcaption{font-size:13.5px;color:var(--muted);margin-top:8px;text-align:center}