@charset "utf-8";
:root {
	--bg:#FFFFFF;
	--sky:#EEF4FF;
	--sky2:#DDE9FF;
	--ink:#1B2336;
	--steel:#54607A;
	--line:#DCE4F3;
	--blue:#2F6FED;
	--blue-d:#1F4FBF;
	--cyan:#6EC6FF;
	--sun:#FFD84A;
	--white:#FFFFFF;
	--mono:"Pretendard Variable","Pretendard",sans-serif;
	--r:24px;
	--shadow:0 10px 30px rgba(47,111,237,.10);
	--pad:clamp(20px,5vw,72px);
	--max:1400px; /* 콘텐츠 영역의 최대 가로 폭(좌우 여백 제외) */
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body.gumi-page {
	font-family:'Pretendard Variable','Pretendard',sans-serif;
	font-size:17px; font-weight:400; line-height:1.75; color:var(--ink); background:var(--bg);
	word-break:keep-all; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
.gumi-page ul, .gumi-page ol { list-style:none; }
.gumi-page a { color:inherit; text-decoration:none; }
.gumi-page img { max-width:100%; display:block; }
.gumi-page :focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.skip { position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:10px 16px; z-index:200; }
.skip:focus { left:0; }
.wrap { max-width:calc(var(--max) + var(--pad) * 2); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.mono { letter-spacing:0; }

/* ---------- 상단바 ---------- */
.top { position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92); backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid var(--line); }
.top .wrap { display:flex; align-items:center; justify-content:space-between; height:72px; gap:16px; }
.top .logo img { height:30px; width:auto; }
.top .tag { font-size:13px; color:var(--steel); }
.top nav { display:flex; align-items:center; gap:10px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 26px; font-weight:700; font-size:15px; border:2px solid transparent; border-radius:999px; transition:transform .2s, background .2s, color .2s, box-shadow .2s; cursor:pointer; }
.btn:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(47,111,237,.22); }
.btn.solid { background:var(--blue); border-color:var(--blue); color:#fff; }
.btn.orange { background:var(--sun); border-color:var(--sun); color:var(--ink); }
.btn.line { background:#fff; border-color:var(--blue); color:var(--blue); }
.top .btn { min-height:42px; padding:0 20px; font-size:14px; }

/* ---------- 히어로 ---------- */
.hero { position:relative; padding:clamp(56px,8vw,112px) 0 clamp(64px,8vw,110px); background:linear-gradient(180deg,#F3F8FF 0%,#FFFFFF 100%); overflow:hidden; }
.hero::before { content:""; position:absolute; left:-230px; top:-250px; width:380px; height:380px; border-radius:50%; border:56px solid var(--sun); opacity:.9; pointer-events:none; }
.hero::after { content:""; position:absolute; right:-130px; bottom:-170px; width:420px; height:420px; border-radius:50%; border:64px solid var(--blue); opacity:.14; pointer-events:none; }
.hero .grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr); gap:clamp(32px,5vw,72px); align-items:center; position:relative; z-index:1; }
.kicker { display:inline-flex; align-items:center; gap:10px; font-size:14px; color:var(--blue); font-weight:700; background:#fff; border:1px solid var(--sky2); padding:8px 18px; border-radius:999px; margin-bottom:24px; box-shadow:var(--shadow); }
.kicker i { width:8px; height:8px; border-radius:50%; background:var(--sun); display:block; }
.hero h1 { font-size:clamp(34px,4.7vw,62px); font-weight:800; line-height:1.22; letter-spacing:-.035em; }
.hero h1 em { font-style:normal; color:var(--blue); background:linear-gradient(transparent 64%, rgba(255,216,74,.75) 64%, rgba(255,216,74,.75) 92%, transparent 92%); padding:0 .06em; }
.hero .lead { margin-top:28px; max-width:34em; font-size:clamp(17px,1.7vw,20px); color:var(--steel); }
.hero .cta { margin-top:34px; display:flex; flex-wrap:wrap; gap:12px; }

.spec { background:var(--white); border-radius:28px; box-shadow:0 18px 50px rgba(47,111,237,.18); overflow:hidden; border:1px solid var(--sky2); }
.spec .bar { display:flex; justify-content:space-between; align-items:center; background:var(--blue); color:#fff; padding:16px 24px; font-size:14px; font-weight:700; letter-spacing:.04em; }
.spec .bar b { color:var(--ink); background:var(--sun); font-weight:800; padding:3px 12px; border-radius:999px; font-size:12px; }
.spec dl { display:block; padding:8px 12px 12px; }
.spec .row { display:grid; grid-template-columns:104px 1fr; gap:14px; padding:14px 14px; border-bottom:1px solid var(--sky); font-size:15.5px; line-height:1.55; }
.spec .row:last-child { border-bottom:0; }
.spec dt { font-size:14.5px; font-weight:600; color:var(--blue); padding-top:1px; }
.spec dd { font-weight:600; }
.spec dd small { font-weight:400; color:var(--steel); font-size:13px; }

/* ---------- 한눈에 보기 (AEO 요약) ---------- */
.answer { background:var(--bg); padding:clamp(28px,4vw,48px) 0 0; position:relative; z-index:2; margin-top:calc(clamp(40px,5vw,64px) * -1); }
.answer .wrap { display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,3vw,44px); padding:clamp(30px,4vw,48px) clamp(24px,4vw,56px); align-items:center; background:var(--blue); color:#fff; border-radius:32px; box-shadow:0 18px 44px rgba(47,111,237,.28); max-width:calc(var(--max) + 0px); width:calc(100% - var(--pad) * 2); position:relative; overflow:hidden; }
.answer .wrap::after { content:""; position:absolute; right:-60px; top:-70px; width:220px; height:220px; border-radius:50%; background:var(--cyan); opacity:.35; pointer-events:none; }
.answer .q { font-size:clamp(54px,7vw,96px); line-height:.9; font-weight:800; color:var(--sun); }
.answer h2 { font-size:clamp(20px,2.4vw,28px); font-weight:800; letter-spacing:-.02em; line-height:1.4; margin-bottom:12px; }
.answer p { font-size:clamp(16px,1.5vw,18px); color:#EAF1FF; max-width:52em; position:relative; z-index:1; }
.answer p b { color:#fff; }

/* ---------- 공통 섹션 ---------- */
section.sec { padding:clamp(64px,9vw,120px) 0; }
#why, #process, #faq { background:var(--sky); }
.sec .head { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr); gap:clamp(24px,5vw,80px); align-items:start; }
.sec .idx { font-size:14px; font-weight:700; color:var(--blue); margin-bottom:14px; display:inline-flex; align-items:center; gap:8px; background:var(--sky); padding:6px 16px; border-radius:999px; }
#why .idx, #process .idx, #faq .idx { background:#fff; }
.sec .idx::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--sun); }
.sec h2 { font-size:clamp(28px,3.6vw,46px); font-weight:800; line-height:1.25; letter-spacing:-.03em; }
.sec .sub { margin-top:16px; color:var(--steel); font-size:17px; max-width:30em; }
.sec .body { min-width:0; }
@media (min-width:961px) { .sec .head > div:first-child { position:sticky; top:104px; align-self:start; } }

/* 01 목록 */
.facts { display:grid; gap:16px; }
.facts li { display:grid; grid-template-columns:64px 1fr; gap:20px; padding:26px 28px; background:#fff; border-radius:var(--r); box-shadow:var(--shadow); align-items:start; }
.facts .n { width:54px; height:54px; border-radius:50%; background:var(--sun); color:var(--ink); display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; line-height:1; }
.facts h3 { font-size:21px; font-weight:800; letter-spacing:-.02em; margin-bottom:6px; }
.facts p { color:var(--steel); font-size:16.5px; }

/* 02 선택 기준 표 */
.check { border-radius:var(--r); background:var(--white); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--sky2); }
.check .tr { display:grid; grid-template-columns:150px 1.25fr 1fr; }
.check .tr > * { padding:16px 20px; border-bottom:1px solid var(--sky); font-size:15.5px; line-height:1.6; }
.check .tr:last-child > * { border-bottom:0; }
.check .th > *, .check .th .w { background:var(--blue); color:#fff; font-size:14px; font-weight:700; padding:14px 20px; border-bottom:0; border-left:0; }
.check .k { font-weight:800; background:var(--sky); color:var(--blue-d); }
.check .w { color:var(--steel); }

/* 03 절차 */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.steps li { padding:28px 24px 30px; background:#fff; border-radius:var(--r); box-shadow:var(--shadow); position:relative; }
.steps .no { display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; background:var(--blue); color:#fff; font-size:20px; font-weight:800; line-height:1; }
.steps li:nth-child(even) .no { background:var(--sun); color:var(--ink); }
.steps h3 { margin-top:18px; font-size:19px; font-weight:800; letter-spacing:-.02em; }
.steps p { margin-top:8px; font-size:15px; color:var(--steel); line-height:1.65; }

/* 04 사례 */
.cases { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.case { background:var(--white); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--sky2); display:flex; flex-direction:column; transition:transform .25s, box-shadow .25s; }
.case:hover { transform:translateY(-6px); box-shadow:0 20px 44px rgba(47,111,237,.20); }
.case .img { aspect-ratio:3/4; width:100%; background:var(--sky); overflow:hidden; }
.case .img img { width:100%; height:100%; object-fit:cover; object-position:left top; }
.case .txt { padding:24px 28px 30px; min-width:0; }
.case .lb { display:inline-block; font-size:12.5px; color:var(--blue); font-weight:700; background:var(--sky); padding:3px 12px; border-radius:999px; }
.case h3 { font-size:21px; font-weight:800; margin:10px 0 6px; letter-spacing:-.02em; }
.case p { font-size:15px; color:var(--steel); line-height:1.65; }
.more { margin-top:28px; }
.btn.big { width:100%; min-height:76px; font-size:clamp(18px,2vw,22px); letter-spacing:-.01em; }
.btn.big span { color:var(--sun); font-size:1.2em; }

/* 05 FAQ */
.faq { }
.faq details { background:#fff; border-radius:20px; margin-bottom:12px; box-shadow:var(--shadow); }
.faq summary { list-style:none; cursor:pointer; display:grid; grid-template-columns:44px 1fr 28px; gap:12px; align-items:start; padding:22px 26px; font-size:clamp(17px,1.6vw,19.5px); font-weight:800; letter-spacing:-.02em; line-height:1.5; }
.faq summary::-webkit-details-marker { display:none; }
.faq .qn { color:var(--blue); font-size:16px; font-weight:800; padding-top:2px; }
.faq .pm { position:relative; width:28px; height:28px; margin-top:0; border-radius:50%; background:var(--sky); }
.faq .pm::before, .faq .pm::after { content:""; position:absolute; left:50%; top:50%; width:12px; height:2px; background:var(--blue); transform:translate(-50%,-50%); transition:transform .25s; }
.faq .pm::after { transform:translate(-50%,-50%) rotate(90deg); }
.faq details[open] .pm { background:var(--blue); }
.faq details[open] .pm::before, .faq details[open] .pm::after { background:#fff; }
.faq details[open] .pm::after { transform:translate(-50%,-50%) rotate(0); }
.faq .ans { padding:0 26px 26px 82px; max-width:50em; color:var(--steel); font-size:16.5px; line-height:1.8; }
.faq .ans a { color:var(--blue); font-weight:700; text-decoration:underline !important; text-underline-offset:3px; }

/* 06 CTA */
.cta-sec { position:relative; overflow:hidden; background:var(--blue); color:#fff; padding:clamp(64px,9vw,120px) 0; border-radius:56px 56px 0 0; }
.cta-sec::before { content:""; position:absolute; right:-120px; top:-140px; width:420px; height:420px; border-radius:50%; background:var(--sun); opacity:.95; pointer-events:none; }
.cta-sec::after { content:""; position:absolute; right:140px; bottom:-120px; width:280px; height:280px; border-radius:50%; border:44px solid var(--cyan); opacity:.45; pointer-events:none; }
.cta-sec .wrap { position:relative; z-index:1; }
.cta-sec .idx { font-size:14px; color:var(--ink); background:var(--sun); display:inline-block; padding:5px 16px; border-radius:999px; letter-spacing:.02em; font-weight:800; margin-bottom:18px; }
.cta-sec h2 { font-size:clamp(30px,4.4vw,58px); font-weight:800; letter-spacing:-.035em; line-height:1.2; max-width:16em; }
.cta-sec .tel { display:inline-block; margin-top:30px; font-size:clamp(40px,7vw,92px); font-weight:800; color:var(--sun); letter-spacing:-.02em; line-height:1; }
.cta-sec .hours { margin-top:12px; color:#DCE7FF; font-size:15px; }
.cta-sec .acts { margin-top:30px; display:flex; flex-wrap:wrap; gap:12px; }
.cta-sec .btn.line { background:transparent; color:#fff; border-color:#fff; }
.cta-sec .btn.line:hover { background:#fff; color:var(--blue); }
.rel { margin-top:56px; padding-top:28px; border-top:1px solid rgba(255,255,255,.28); display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; }
.rel strong { font-size:13px; font-weight:700; color:#C9D8EE; }
.rel a { color:#fff; font-size:15px; text-decoration:underline !important; text-underline-offset:4px; text-decoration-color:var(--sun) !important; }

/* ---------- 푸터 ---------- */
.foot { background:var(--sky); padding:40px 0 48px; font-size:14px; color:var(--steel); line-height:1.8; }
.foot .row { display:flex; flex-wrap:wrap; gap:4px 22px; }
.foot b { color:var(--ink); font-weight:700; margin-right:4px; }
.foot address { font-style:normal; margin-top:10px; }
.foot .cp { margin-top:14px; font-size:12px; }
.foot a { text-decoration:underline !important; text-underline-offset:3px; }

/* 모바일 하단 고정 상담바 */
.dock { display:none; }

/* ---------- 스크롤 등장 (JS 있을 때만) ---------- */
.js .rv { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.js .rv.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior:auto; }
	.js .rv { opacity:1; transform:none; transition:none; }
	.btn, .case { transition:none; }
}

/* ---------- 02 함께 제작 (홈페이지·브로슈어·카탈로그) ---------- */
.trio { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.trio article { padding:30px 28px 32px; background:#fff; border-radius:var(--r); box-shadow:var(--shadow); border:1px solid var(--sky2); display:flex; flex-direction:column; gap:10px; }
.trio .tg { align-self:flex-start; font-size:12px; font-weight:800; letter-spacing:.1em; background:var(--blue); color:#fff; padding:5px 14px; border-radius:999px; }
.trio article:nth-child(2) .tg { background:var(--sun); color:var(--ink); }
.trio article:nth-child(3) .tg { background:var(--cyan); color:var(--ink); }
.trio h3 { font-size:23px; font-weight:800; letter-spacing:-.025em; margin-top:6px; }
.trio p { color:var(--steel); font-size:16px; line-height:1.7; }
.trio .ln { margin-top:auto; padding-top:10px; font-weight:800; color:var(--blue); text-decoration:underline !important; text-underline-offset:4px; }
.reuse { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px; }
.reuse li { padding:18px 22px; font-size:15px; color:var(--steel); background:var(--sky); border-radius:18px; line-height:1.6; }
.reuse b { display:block; color:var(--ink); font-size:16px; margin-bottom:2px; }
.note { margin-top:20px; font-size:15px; color:var(--steel); padding:14px 20px; background:#FFF8DB; border-radius:16px; max-width:44em; }

.gumi-page strong { color:inherit; }
.gumi-page .rel strong { color:#C9D8EE; }

/* ---------- 반응형 ---------- */
@media (max-width:960px) {
	.cases { grid-template-columns:1fr; }
	.hero .grid { grid-template-columns:1fr; align-items:start; }
	.sec .head { grid-template-columns:1fr; gap:28px; }
	.steps { grid-template-columns:repeat(2,1fr); }
	.check .tr { grid-template-columns:130px 1fr; }
	.check .tr .w { grid-column:1 / -1; padding-top:0; background:var(--white); }
	.check .th .w { display:none; }
	.trio { grid-template-columns:1fr; }
	.reuse { grid-template-columns:1fr; }
}
@media (max-width:640px) {
	body.gumi-page { font-size:16px; padding-bottom:68px; }
	.hero::before { width:200px; height:200px; left:-120px; top:-130px; border-width:36px; }
	.hero::after { width:240px; height:240px; right:-110px; bottom:-120px; border-width:40px; }
	.top .tag { display:none; }
	.top .wrap { height:62px; }
	.top .logo img { height:26px; }
	.top .btn.line { display:none; }
	.steps { grid-template-columns:1fr; }
	.answer .wrap { grid-template-columns:1fr; gap:10px; border-radius:24px; }
	.answer .q { font-size:56px; }
	.facts li { grid-template-columns:48px 1fr; gap:14px; padding:20px; }
	.facts .n { width:44px; height:44px; font-size:17px; }
	.spec .row { grid-template-columns:84px 1fr; gap:10px; padding:12px 10px; }
	.check .tr { grid-template-columns:1fr; }
	.check .th { display:none; }
	.check .k { padding-bottom:4px; background:var(--white); color:var(--ink); font-size:16.5px; }
	.check .tr > * { padding:12px 18px; }
	.faq summary { grid-template-columns:34px 1fr 28px; padding:18px 18px; }
	.faq .ans { padding:0 18px 22px 18px; }
	.cta-sec { border-radius:36px 36px 0 0; }
	.cta-sec::before { width:260px; height:260px; right:-90px; top:-100px; }
	.dock { display:grid; grid-template-columns:1fr 1fr; position:fixed; left:12px; right:12px; bottom:12px; z-index:150; border-radius:999px; overflow:hidden; box-shadow:0 10px 28px rgba(20,40,100,.28); }
	.dock a { display:flex; align-items:center; justify-content:center; min-height:54px; color:#fff; background:var(--blue); font-weight:800; font-size:15px; }
	.dock a:first-child { background:var(--sun); color:var(--ink); }
}

/* 다른 지역 더 보기 */
.region { margin-top:22px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 16px; padding:18px 22px; background:var(--sky); border-radius:20px; }
.region strong { font-size:14px; font-weight:700; color:var(--steel); }
.region a { display:inline-block; padding:9px 20px; background:#fff; color:var(--blue); font-weight:800; font-size:15px; border:1px solid var(--sky2); border-radius:999px; transition:background .2s, color .2s; }
.region a:hover { background:var(--blue); color:#fff; }
.region a::after { content:" →"; }