/* 수건축디자인 시안 — 워드프레스 포트폴리오 테마 느낌, 모바일 우선 */
:root{--bg:#f6f5f2;--paper:#fff;--ink:#16181b;--ink2:#5c6168;--line:#e3e1dc;--acc:#1f5f4a;--acc2:#e8f1ec;--r:6px;
  --font:'Noto Sans KR','Malgun Gothic',-apple-system,sans-serif}
@media (prefers-color-scheme:dark){:root{--bg:#121416;--paper:#1a1d20;--ink:#eceae6;--ink2:#a3a8ad;--line:#2b2f33;--acc:#6fc3a3;--acc2:#1d2c26}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;word-break:keep-all;overflow-wrap:anywhere;background:var(--bg);color:var(--ink);font:16px/1.75 var(--font);letter-spacing:-.01em}
img{max-width:100%;height:auto;display:block}a{color:inherit}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:10px 16px;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.logo{text-decoration:none;display:flex;flex-direction:column;line-height:1.2}.logo b{font-size:19px;font-weight:900;letter-spacing:-.03em}.logo small{font-size:11px;color:var(--ink2)}
.menu{margin-left:auto;display:flex;gap:4px;align-items:center}
.menu a{text-decoration:none;padding:8px 12px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--ink2)}
.menu a:hover,.menu a[aria-current]{color:var(--ink);background:var(--acc2)}
.menu a.cta{background:var(--acc);color:#fff;font-weight:700}
.burger{display:none;margin-left:auto;background:none;border:0;width:40px;height:40px;padding:9px;cursor:pointer}
.burger span{display:block;height:2px;background:var(--ink);margin:5px 0;border-radius:2px}
@media (max-width:820px){.burger{display:block}.menu{position:fixed;inset:57px 0 auto 0;flex-direction:column;align-items:stretch;background:var(--paper);padding:10px 16px 18px;border-bottom:1px solid var(--line);display:none;gap:2px}
  .menu.open{display:flex}.menu a{border-radius:var(--r);padding:12px 14px;font-size:16px}}
main{min-height:60vh}.wrap{max-width:1240px;margin:0 auto;padding:0 16px}
.crumbs{max-width:1240px;margin:14px auto 0;padding:0 16px;font-size:13px;color:var(--ink2)}.crumbs a{text-decoration:none}
h1{font-size:clamp(26px,4.4vw,40px);line-height:1.3;letter-spacing:-.03em;margin:.4em 0 .3em;text-wrap:balance}
h2{font-size:clamp(20px,3vw,26px);letter-spacing:-.02em;margin:1.8em 0 .6em;line-height:1.35}
h3{font-size:18px;margin:1.4em 0 .4em}
.lead{color:var(--ink2);margin:0 0 18px;max-width:62ch}
.hero{position:relative;height:min(78vh,720px);overflow:hidden;background:#000}
.hero img{width:100%;height:100%;object-fit:cover;opacity:.88}
.hero-t{position:absolute;left:0;right:0;bottom:0;padding:28px 16px 32px;max-width:1240px;margin:0 auto;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55) 45%)}
.hero-t h1{color:#fff;margin:0 0 6px}.hero-t p{margin:0 0 16px;max-width:52ch;opacity:.92}
.btn{display:inline-block;background:var(--acc);color:#fff;text-decoration:none;font-weight:700;padding:11px 20px;border-radius:999px;border:0;font:inherit;font-weight:700;cursor:pointer;margin:0 6px 6px 0}
.btn.ghost{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.6)}
.svcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:12px}
@media (max-width:640px){.svcs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.svc b{font-size:15px;padding:8px 10px 0}.svc small{padding:0 10px 10px;font-size:12.5px;line-height:1.45}}
.svc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;display:flex;flex-direction:column}
.svc img{aspect-ratio:4/3;object-fit:cover;width:100%}.svc b{padding:10px 12px 0;font-size:17px}.svc small{padding:0 12px 12px;color:var(--ink2)}
.facs{display:flex;flex-wrap:wrap;gap:8px}
.fac{text-decoration:none;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:14.5px}
.fac:hover{border-color:var(--acc);color:var(--acc)}
.chips{display:flex;gap:6px;overflow-x:auto;padding:2px 0 12px;margin-bottom:6px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:7px 14px;font:inherit;font-size:14px;cursor:pointer}
.chip i{font-style:normal;color:var(--ink2);font-size:12px;margin-left:2px}.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}.chip.on i{color:inherit;opacity:.7}
/* 포트폴리오 그리드 — 메이슨리 (워드프레스 포트폴리오 테마처럼) */
.grid{columns:3 300px;column-gap:10px}
.tile{display:block;position:relative;margin:0 0 10px;break-inside:avoid;border-radius:var(--r);overflow:hidden;background:#ddd;text-decoration:none}
.tile img{width:100%;transition:transform .5s}.tile:hover img{transform:scale(1.04)}
.cap{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.62));display:flex;flex-direction:column;line-height:1.35}
.cap b{font-size:15px}.cap small{font-size:12px;opacity:.85}
.tile.hide{display:none}
@media (max-width:640px){.grid{columns:2 150px;column-gap:6px}.tile{margin-bottom:6px}.cap{padding:16px 8px 7px}.cap b{font-size:13px}.cap small{display:none}}
.prose{max-width:780px}.prose p{margin:0 0 1em}.prose ul{padding-left:1.2em}.prose li{margin:.25em 0}
.prose figure{margin:1.4em 0}.prose figcaption{font-size:13px;color:var(--ink2);margin-top:6px}
.prose img{border-radius:var(--r)}
.case .meta{color:var(--ink2);font-size:13.5px;margin:18px 0 0}
.gal{display:grid;gap:12px;margin-top:18px}.gal figure{margin:0}.gal img{width:100%;border-radius:var(--r);cursor:zoom-in}
.todo{background:var(--acc2);border-left:3px solid var(--acc);padding:10px 12px;border-radius:4px;font-size:14px;color:var(--ink2)}
.related{margin-top:30px}.ctab{margin:40px auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px 18px}
.ctab h2{margin-top:0}
.intro{max-width:780px;margin-top:30px;color:var(--ink2)}
.head{padding-top:6px}
.form{display:grid;gap:12px;max-width:560px}.form label{display:grid;gap:4px;font-weight:500}
.form input,.form select,.form textarea{font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);color:var(--ink)}
.foot{margin-top:60px;border-top:1px solid var(--line);background:var(--paper);padding:26px 16px 30px;display:grid;gap:14px;max-width:none}
.foot>*{max-width:1240px;margin:0 auto;width:100%}.foot p{margin:4px 0 0;color:var(--ink2);font-size:14px}
.flinks{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px}.flinks a{text-decoration:none;color:var(--ink2)}
.copy{font-size:12px!important}
.lb{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px}
.lb[hidden]{display:none}.lb img{max-height:82vh;width:auto;border-radius:4px}.lb p{color:#ddd;font-size:14px;max-width:70ch;text-align:center}
.lbx{position:absolute;top:10px;right:12px;background:none;border:0;color:#fff;font-size:26px;cursor:pointer;width:44px;height:44px}
.svc i{font-style:normal;color:var(--acc);font-size:13px;font-weight:700;padding:0 12px 12px}.svc b{padding-top:14px}
/* 10-29 사용자 "이미지를 좀 줄이고 메뉴가 한눈에 더 들어와야" — 첫 화면에 메뉴 6개가 다 보이게 (현투시도 휴대폰: 로고 → 메뉴 버튼 → 갤러리) */
.hero{height:min(40vh,400px)}.hero-t{padding:18px 16px 18px}.hero-t h1{font-size:clamp(20px,2.6vw,30px);line-height:1.3}.hero-t p{margin:0;font-size:14px}
.svcs{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:14px}
.svc{justify-content:center;text-align:center;padding:12px 6px}.svc b{padding:0;font-size:16px}.svc small{padding:2px 0 4px;font-size:12px}.svc i{padding:0;font-size:12px}
@media (max-width:900px){.svcs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.hero{height:26vh}.hero-t p{display:none}.hero-t h1{font-size:17px}.svcs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
 .svc{padding:11px 4px}.svc b{font-size:15px;padding:0}.svc small{display:none}.svc i{font-size:11.5px;padding:0}}
/* 10-29 상호 밑 전화번호 */
.logo a{text-decoration:none;color:inherit}.logo .tel{font-size:13px;font-weight:700;color:var(--acc);letter-spacing:.02em;margin-top:2px}.logo .tel.todo{color:var(--ink2);font-weight:400}

/* 11-02 사용자: "제작문의는 파란색" — 위 메뉴의 [제작 문의] 와 글 아래 문의 버튼 */
.menu a.cta,.t7 .menu a.cta,.t8 .menu a.cta{background:#2f7df6!important;color:#fff!important;font-weight:700;box-shadow:none}
.menu a.cta:hover,.t7 .menu a.cta:hover,.t8 .menu a.cta:hover{background:#1f63d0!important;color:#fff!important}
.ctab .btn,.t7 .ctab .btn{background:#2f7df6;color:#fff}.ctab .btn:hover{background:#1f63d0}

/* 11-02 소개 쪽: 서비스 세 가지 카드 */
.svc7{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:12px 0 28px}
.svc7 a{display:block;padding:18px;border:1px solid var(--line);border-radius:var(--r,10px);background:var(--paper);text-decoration:none;color:var(--ink)}
.svc7 b{display:block;font-size:18px;margin-bottom:6px}.svc7 span{color:var(--ink2);font-size:14px;line-height:1.6}
.svc7 a:hover,.svc7 a:focus-visible{border-color:#2f7df6}