:root{--ink:#181b18;--ink-2:#232823;--ink-3:#303830;--paper:#fdfdfb;--cream:#f2f0e9;--cream-2:#e8e4d9;--line:#deded4;--muted:#65685f;--faint:#73786e;--on-dark-muted:#bfc2b8;--peach:#dfc7a0;--peach-hi:#f0ddbb;--bronze:#756244;--r:3px}
[hidden]{display:none!important}
.wrap{max-width:1360px;padding-inline:48px}.sec{padding-block:112px}.h-lg{font-size:clamp(30px,3.3vw,46px);font-weight:600;letter-spacing:-.05em}.eyebrow{font-size:12px;letter-spacing:.19em;color:var(--bronze)}.lead{line-height:1.9}.btn{border-radius:3px;min-height:52px;font-size:14px;gap:25px}.btn-sm{min-height:41px;padding-inline:18px}.btn-peach{background:var(--peach)}.btn:hover{transform:translateY(-2px);transition:transform .2s,background .2s}.hd{background:rgba(24,27,24,.97)}.hd-in{height:84px}.logo{gap:12px}.logo-b{font-size:44px}.logo-t{font-size:17px}.logo-t small{font-size:10px;letter-spacing:.24em;margin-top:5px}.nav{gap:20px}.nav a:not(.btn){font-size:14px}.skip-link{position:fixed;left:15px;top:-100px;z-index:100;padding:15px;background:white}.skip-link:focus{top:10px}
.hero,.phero{background:var(--ink)}.hero::before,.phero::before{display:none}.home-hero{min-height:700px}.hero-photo{position:absolute;right:0;top:0;height:100%;width:66%;object-fit:cover;object-position:center;opacity:.75}.home-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#181b18 5%,rgba(24,27,24,.96) 24%,rgba(24,27,24,.66) 48%,rgba(24,27,24,.07) 100%);pointer-events:none}.home-hero .hero-in{z-index:1;min-height:740px;grid-template-columns:1.3fr .7fr;padding-block:86px 125px}.hero-copy{gap:25px}.home-hero .h-xl{font-size:clamp(43px,5vw,72px);line-height:1.27;letter-spacing:-.055em;font-weight:500}.home-hero .accent{font-weight:600}.home-hero .lead{color:#d5d7cf;font-size:17px}.hero-note{align-self:end;justify-self:end;border-top:1px solid #ffffff65;padding-top:20px;margin-bottom:5px;width:250px}.hero-note span{font-size:11px;letter-spacing:.13em}.hero-note p{font-size:19px;line-height:1.7;margin-top:12px}.hero-bottom{position:absolute;bottom:30px;left:48px;right:48px;border-top:1px solid #ffffff30;padding-top:22px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#d0d3c9;letter-spacing:.03em}.hero-bottom a{text-decoration:none;font-size:11px;letter-spacing:.14em}.hero-actions{gap:12px}.svc-grid{gap:24px;grid-template-columns:repeat(4,minmax(0,1fr))}.svc{border:0;border-radius:0;background:transparent;transition:none}.svc:hover{transform:none;box-shadow:none}.photo-visual{aspect-ratio:4/4.4;background:#272c28;position:relative;border-radius:2px}.photo-visual img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .65s;filter:saturate(.65)}.svc:hover .photo-visual img{transform:scale(1.045)}.visual-label{position:absolute;bottom:0;left:0;right:0;padding:42px 18px 18px;color:white;background:linear-gradient(transparent,#0009);font-size:10px;letter-spacing:.12em}.svc:nth-child(2) .photo-visual img{object-position:80% center}.svc:nth-child(4) .photo-visual img{object-position:20% center;filter:grayscale(1)}.svc-body{padding:25px 0 12px;gap:12px}.svc-body h3{font-size:21px}.svc-body p{font-size:15px;line-height:1.8}.svc-foot{margin-top:8px;padding-top:16px;border-top:1px solid var(--line)}.circ{border:0;background:none;font-size:24px}.diag{margin-top:30px;border-radius:3px;background:var(--cream);padding:28px 32px}.diag-tag{border-radius:0;background:none;color:var(--bronze);font-family:var(--serif);font-size:22px}.about{background:#252d26}.bigB{opacity:.045}.about-copy{gap:25px}.about-in{gap:100px}.fact{padding-block:27px}.fact b{font-weight:500;color:var(--peach)}.fact span{font-size:14px;color:#c5cbc0}.price-row{padding-block:27px}.price-val{font-family:var(--serif);font-weight:500;font-size:28px}.note{border-radius:3px}.note-ic{border-radius:0;background:none;color:var(--bronze);font:italic 44px var(--serif)}.process-in{gap:85px}.step-n{font:italic 36px var(--serif);color:var(--bronze)}.step{padding-top:24px;border-top:1px solid #d2d3c8}.pf-card{border-radius:2px}.pf-thumb{background:#efefe8;position:relative;aspect-ratio:16/10;display:flex;flex-direction:column;gap:9px;align-items:start;justify-content:end;padding:24px}.pf-thumb .pf-index{font:italic 56px var(--serif);background:none;border:0;padding:0;color:#b4b8a8;line-height:1}.pf-thumb span{font-size:12px;background:none;border:0;padding:0;border-radius:0;color:#6a705f}.pf-meta{padding:20px 24px}.pf-cat{font-size:12px}.pf-meta h3{font-size:16px}.pf-card[hidden]{display:none!important}.pf-grid{gap:22px}.cta{background:#242d26}.cta-in{padding-block:85px}.cta h2{font-size:clamp(29px,3vw,42px)}.cta p{max-width:570px;font-size:15px;margin-top:10px}.ft{padding-top:60px;background:#f7f7f2}.ft-nav a{font-size:13px}.biz{font-size:12px}.copyright{font-size:12px}.phero-in{gap:75px;padding-block:75px}.phero .visual{border-radius:2px;max-height:380px;aspect-ratio:5/4}.phero .h-xl{font-weight:500;letter-spacing:-.05em;font-size:clamp(36px,4.2vw,57px)}.phero .lead{font-size:17px}.chips{gap:10px}.chip{border-radius:3px;font-size:13px}.crumbs{margin-bottom:12px}.plan,.kakao-card,.diag-card,.form-card,.empty,.pain{border-radius:3px}.plan{padding:32px}.plan.hl{background:#252d26}.plan li{font-size:16px}.plan li::before{background-color:#e7dfcc}.plan.hl li::before{background-color:#46533f}.plan-tag{font-size:12px}.plans{gap:24px}.incl-item{padding-block:28px}.faq details{border-radius:0}.faq summary{padding-block:24px}.tone{border-radius:2px}.tone-specimen{padding:26px;aspect-ratio:16/12;display:flex;flex-direction:column;justify-content:space-between;background:#e9dfd0;color:#554732}.tone-specimen small{font-size:10px;letter-spacing:.13em}.tone-specimen strong{font:500 33px/1.1 var(--serif)}.tone-specimen p{font-size:13px}.tone-1{background:#242724;color:#f5f3e9}.tone-2{background:#18394b;color:#eff5f8}.tone-3{background:#e4c440;color:#302816}.swatch-line{display:block;border-top:1px solid currentColor;opacity:.4;width:100%}.tone-body{padding:24px}.tabs button{border-radius:3px;padding:13px 20px}.field input,.field textarea,.preview,.id-box{border-radius:3px}.opt span{border-radius:3px}.form-card{box-shadow:0 14px 40px #17251c06}.status{color:#5a713c}.contact-in{gap:36px}.empty{background:var(--cream)}
@media(min-width:1081px) and (max-width:1250px){.nav{gap:13px}.nav a:not(.btn){font-size:13px}.wrap{padding-inline:32px}}
@media(max-width:1080px){.wrap{padding-inline:32px}.nav{left:-32px;right:-32px}.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.photo-visual{aspect-ratio:4/3}.home-hero .hero-in{min-height:720px}.hero-note{display:none}.hero-bottom{left:32px;right:32px}.about-in{gap:45px}}
@media(max-width:700px){.wrap{padding-inline:22px}.sec{padding-block:65px}.hd-in{height:72px}.nav{left:-22px;right:-22px}.hero-photo{width:100%;opacity:.47;object-position:70%}.home-hero:after{background:linear-gradient(90deg,#181b18d9,#181b1855),linear-gradient(0deg,#181b18,transparent 40%)}.home-hero{min-height:650px}.home-hero .hero-in{display:block;min-height:650px;padding-block:70px 130px}.home-hero .h-xl{font-size:44px}.hero-copy{gap:23px}.home-hero .lead{font-size:15px}.hero-bottom{left:22px;right:22px;bottom:23px;font-size:11px}.hero-bottom span:nth-child(2){display:none}.hero-bottom a{font-size:9px}.hero-actions{gap:10px}.hero-actions .btn{font-size:13px;padding-inline:18px;gap:14px}.svc-grid{gap:32px 18px}.svc-body h3{font-size:18px}.svc-body p{font-size:14px}.svc-price{font-size:14px}.visual-label{font-size:8px;padding:25px 10px 12px}.diag{padding:25px;margin-top:10px}.diag h3{font-size:19px}.phero-in{gap:30px;padding-block:45px}.phero .visual{aspect-ratio:16/10;max-height:300px}.phero .lead{font-size:16px}.process-in{gap:35px}.cta-in{padding-block:60px}.logo-t{font-size:16px}.pf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pf-meta{padding:18px}.pf-meta h3{font-size:14px}.pf-thumb{padding:18px}.pf-thumb .pf-index{font-size:42px}.btn{white-space:normal}.cta-in .btn{width:100%}.contact-in{gap:25px}.form-card,.kakao-card{padding:25px}.h-lg{line-height:1.4}.price-row{gap:12px}.ft-top{gap:25px}.ft-nav{gap:10px 18px}}
@media(max-width:390px){.home-hero .h-xl{font-size:39px}.svc-grid{grid-template-columns:1fr}.pf-grid{grid-template-columns:1fr}.hero-actions .btn{width:100%}.home-hero .hero-in{min-height:700px}}
/* ---- QA 수정 (2026-09-29) ---- */
/* 서브 페이지 상단 설명글: 어두운 배경에서 읽히도록 */
.phero .lead{color:#c9ccc2}
/* 메인 사진 왼쪽 경계가 칼로 자른 듯 보이던 부분을 부드럽게 */
.hero-photo{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28%);mask-image:linear-gradient(90deg,transparent 0,#000 28%)}
@media(max-width:700px){.hero-photo{-webkit-mask-image:none;mask-image:none}}
/* 4번 카드는 같은 사진의 책상 부분을 잘라 쓴 architecture-desk.jpg 사용 (3번 카드와 똑같아 보이던 문제) */
.svc:nth-child(4) .photo-visual img{object-position:center}
/* 가격표: 줄마다 가운데 설명 시작 위치가 달라지던 문제 */
.price-row{grid-template-columns:minmax(180px,1fr) 1.7fr 170px}
@media(max-width:720px){.price-row{grid-template-columns:1fr}}
/* 요금 카드: 버튼을 카드 아래쪽에 맞춤 */
.plan{display:flex;flex-direction:column}
.plan > .btn:last-child{margin-top:auto}
/* 디자인 톤 카드 제목이 한 줄로 맞게 */
.tone-specimen strong{font-size:clamp(24px,2vw,29px)}
.form-card{scroll-margin-top:100px}
/* 문의 미리보기 칸이 4줄만 보이던 문제 */
.field textarea.preview{min-height:230px}
/* 모바일 메뉴: 화면 옆으로 삐져나가고, 작은 폰에서 아래 메뉴가 잘리던 문제 */
@media(max-width:1080px){
  .nav,.nav.open{left:0;right:0;max-height:calc(100vh - 84px);max-height:calc(100dvh - 84px);overflow-y:auto;overscroll-behavior:contain}
}
@media(max-width:700px){.nav,.nav.open{max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px)}}
/* 모바일 서브 페이지 버튼 폭을 메인과 맞춤 */
@media(max-width:480px){.phero .hero-actions .btn{flex:1 1 100%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* 가격 목록: 같은 서비스의 플랜을 한 줄에 묶음 */
.price-row.multi{align-items:start}
.price-row.multi h3{padding-top:6px}
.plan-lines{grid-column:2 / 4;display:grid;gap:14px}
.pline{display:grid;grid-template-columns:1fr 170px;column-gap:28px;align-items:center}
.pline + .pline{padding-top:14px;border-top:1px dashed var(--line)}
.pl-tag{display:inline-block;min-width:78px;margin-right:10px;font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--bronze)}
@media(max-width:720px){.plan-lines{grid-column:auto}.pline{grid-template-columns:1fr;row-gap:4px}.pl-tag{display:block;margin-bottom:2px}}
/* 문의 접수 폼 */
.flow{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:flow}
.flow li{counter-increment:flow;display:grid;grid-template-columns:34px 1fr;column-gap:14px;padding:14px 0;border-top:1px solid var(--line-dark)}
.flow li::before{content:counter(flow,decimal-leading-zero);grid-row:span 2;font:italic 20px/1.2 var(--serif);color:var(--peach)}
.flow b{font-size:16px;font-weight:600}
.flow span{font-size:14px;color:var(--on-dark-muted);line-height:1.6}
.req{color:#b0482f;font-weight:600}
.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.consent{display:grid;gap:8px;padding:16px 18px;border-radius:3px;background:var(--cream)}
.consent-check{display:flex;gap:10px;align-items:flex-start;font-size:15px;font-weight:500;cursor:pointer}
.consent-check input{width:18px;height:18px;margin-top:3px;accent-color:#252d26;flex:none}
.consent-more summary{font-size:13px;color:var(--muted);cursor:pointer}
.consent-more p{font-size:13px;color:var(--muted);line-height:1.8;margin-top:6px}
.field.invalid input,.consent.invalid{box-shadow:0 0 0 2px #b0482f55;border-color:#b0482f}
.status.error{color:#b0482f}
#inqSend[disabled]{opacity:.6;cursor:wait}
.sent{display:grid;gap:12px;justify-items:start;padding:8px 0}
.sent h2{font-size:24px}
.sent p{color:var(--muted)}
/* 관리자 문의함 */
.admin-link{color:var(--faint);text-decoration:underline;text-underline-offset:3px}
.adm-state{padding:40px;border-radius:3px;background:var(--cream);display:grid;gap:16px;justify-items:start}
.adm-state p{color:var(--muted)}
.adm-bar{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;margin-bottom:22px}
.adm-bar .tabs{margin-bottom:0}
.adm-bar .tabs span{margin-left:4px;font-variant-numeric:tabular-nums;opacity:.7}
.adm-note{font-size:13px;color:var(--faint)}
.adm-list{display:grid;gap:14px}
.adm-none{padding:28px;color:var(--muted);background:var(--cream);border-radius:3px}
.adm-card{display:grid;grid-template-columns:minmax(200px,.8fr) 1.8fr minmax(170px,.6fr);gap:20px 28px;padding:24px 26px;border:1px solid var(--line);border-radius:3px;background:var(--paper)}
.adm-card.st-new{border-color:#cdb58f;background:#fffdf8}
.adm-card.st-done,.adm-card.st-spam{opacity:.72}
.adm-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.adm-date{font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.adm-who{display:grid;gap:8px;align-content:start}
.adm-who h3{font-size:18px;margin-top:4px}
.adm-contact,.adm-link{display:flex;gap:10px;font-size:14.5px;flex-wrap:wrap}
.adm-contact b,.adm-link b{font-weight:500;color:var(--faint);min-width:44px}
.sel{user-select:all;word-break:break-all}
.adm-what{display:grid;gap:12px;align-content:start;min-width:0}
.adm-meta{display:flex;flex-wrap:wrap;gap:6px}
.svc-chip{border:1px solid #d9ccb6;color:var(--bronze);background:#fbf7f0}
.adm-body{white-space:pre-wrap;font-size:15px;line-height:1.75}
.adm-memo{display:grid;gap:6px;padding-top:12px;border-top:1px dashed var(--line)}
.adm-memo label{font-size:13px;font-weight:600;color:var(--muted)}
.adm-memo textarea{font:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--line);border-radius:3px;min-height:64px;resize:vertical;background:var(--paper);color:var(--text)}
.adm-memo .btn{justify-self:start}
.adm-actions{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.adm-actions .btn{white-space:nowrap}
.adm-del{color:#9a3b25}
.adm-msg{font-size:13px;color:var(--bronze);min-height:1.2em}
.stpill{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.02em;line-height:1.4}
.stpill-new{background:#f3e3c7;color:#6d4c1c}
.stpill-contacted{background:#dde8d6;color:#2f4a2a}
.stpill-done{background:#e7e7e1;color:#55594f}
.stpill-spam{background:#f2dcd6;color:#8a3522}
@media(max-width:900px){.adm-card{grid-template-columns:1fr}.adm-actions{flex-direction:row;flex-wrap:wrap}}
/* 무료 진단: 블로그·스레드·홈페이지 */
.diag-groups{display:grid;gap:16px}
.diag-group{display:grid;gap:8px;padding-top:14px;border-top:1px solid #ddd6c8}
.diag-group h3{font-size:15px;font-weight:600;color:var(--bronze);letter-spacing:.02em}
.diag-group .check-list{gap:6px}
.diag-group .check-list li{font-size:14.5px}
/* 운영 기간 안내: 블로그 / 스레드 */
.note-duo{grid-template-columns:1fr 1fr;gap:14px 36px;padding:24px 28px}
.note-duo .note-head{grid-column:1 / -1;font-size:16.5px;font-weight:600;color:var(--text)}
.note-col{display:grid;gap:6px;align-content:start;padding-top:12px;border-top:1px solid #ddd6c8}
.note-lbl{font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--bronze)}
.note-col p{font-size:15px;color:var(--muted);line-height:1.75}
@media(max-width:700px){.note-duo{grid-template-columns:1fr;padding:22px}}
/* 실제 통계 사례 카드 */
.pf-thumb.pf-shot{padding:0;display:block;background:#fff;border-bottom:1px solid var(--line)}
.pf-shot img{display:block;width:100%;height:100%;object-fit:cover}
.pf-real .pf-meta h3{color:var(--text)}
.pf-desc{font-size:13px;color:var(--muted);line-height:1.6}
a.pf-real:hover .pf-shot img{opacity:.92}
/* 메인 서비스 카드: 실제 통계 화면 */
.stats-visual{background:#fff;border:1px solid var(--line)}
.stats-visual img{filter:none!important;object-position:center}
.svc:hover .stats-visual img{transform:none}
.stats-tag{position:absolute;left:14px;top:14px;padding:6px 11px;border-radius:999px;background:var(--ink);color:var(--peach);font-size:12px;font-weight:600;letter-spacing:.01em}
@media(max-width:700px){.stats-tag{font-size:11.5px;left:12px;top:12px}}
.stats-visual picture{display:block;width:100%;height:100%}
.stats-visual img{object-fit:contain!important;background:#fff}
/* 홈페이지 제작: 실제 홈페이지 시안 화면 */
.site-visual img,.svc:nth-child(4) .site-visual img{filter:none!important;object-fit:cover;object-position:left center}
.site-tag{position:absolute;right:12px;bottom:12px;padding:6px 11px;border-radius:999px;background:rgba(20,17,14,.82);color:var(--peach);font-size:12px;font-weight:600}
/* 관리자 로그인 */
.adm-login{display:grid;gap:12px;max-width:360px;width:100%}
.adm-login h2{font-size:22px}
.adm-login label{font-size:14px;font-weight:600}
.adm-login input{font:inherit;padding:13px 15px;border:1px solid var(--line);border-radius:3px;background:var(--paper);color:var(--text)}
.adm-login input:focus{outline:none;border-color:var(--bronze);box-shadow:0 0 0 3px rgba(148,100,58,.15)}
.adm-login .btn{justify-self:start}
.adm-side{display:flex;align-items:center;gap:14px}
/* 메인 가격 요약: 시작 금액만 보여주고 금액 안내로 연결 */
a.price-row.simple{text-decoration:none;color:inherit;transition:background .2s}
a.price-row.simple:hover{background:var(--cream)}
a.price-row.simple:focus-visible{outline-offset:-2px}
.price-simple .price-row{padding-block:22px}
.price-val .from{font-family:var(--sans);font-size:.62em;font-weight:500;color:var(--muted);margin-left:3px}
.price-more{display:flex;justify-content:center;margin-top:28px}
.price-simple h3 small{letter-spacing:.02em;font-size:12.5px}
/* 포트폴리오: 실제 자료만 */
.pf-grid.single{grid-template-columns:minmax(0,560px)}
.pf-grid.pf-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1040px){.pf-grid.pf-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.pf-grid.pf-grid-4,.pf-grid.single{grid-template-columns:1fr}}
.pf-site img{object-position:left center}
/* 메인 작업 사례 바로가기 */
.pf-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:1040px){.pf-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.pf-links{grid-template-columns:1fr}}
.pf-link{position:relative;display:grid;gap:6px;padding:22px 56px 22px 22px;border:1px solid var(--line);border-radius:3px;background:var(--paper);text-decoration:none;color:inherit;transition:background .2s,border-color .2s}
.pf-link:hover{background:var(--cream);border-color:#d6cfbf}
.pf-link b{font-size:18px;font-weight:600}
.pf-sub{font-size:14px;color:var(--muted)}
.pf-link .circ{position:absolute;right:18px;top:50%;transform:translateY(-50%)}
/* 문의: 주소 여러 개 */
.lbl-sub{font-weight:400;font-size:13px;color:var(--muted);margin-left:6px}
.links{display:grid;gap:8px}
.link-row{display:grid;grid-template-columns:130px 1fr auto;gap:8px;align-items:center}
.link-row select{font:inherit;font-size:15px;padding:12px 10px;border:1px solid var(--line);border-radius:3px;background:var(--paper);color:var(--text)}
.link-row select:focus{outline:none;border-color:var(--bronze);box-shadow:0 0 0 3px rgba(148,100,58,.15)}
.link-del{width:40px;height:44px;border:1px solid var(--line);border-radius:3px;background:var(--paper);color:var(--muted);font-size:20px;line-height:1;cursor:pointer}
.link-del:hover{color:#9a3b25;border-color:#d9b7ad}
.link-row .link-del[hidden]{display:none!important}
.link-row:has(.link-del[hidden]){grid-template-columns:130px 1fr}
.link-add{justify-self:start;margin-top:4px}
@media(max-width:480px){.lbl-sub{display:block;margin:2px 0 0}.link-row{grid-template-columns:1fr auto;grid-template-areas:'type del' 'url url';padding:10px;border:1px solid var(--line);border-radius:3px;background:var(--cream)}.link-row:has(.link-del[hidden]){grid-template-columns:1fr;padding:0;border:0;background:none}.link-type{grid-area:type}.link-del{grid-area:del}.link-url{grid-area:url}}
.adm-link .sel{white-space:pre-line}