/* 2026-09-28 박스티브 서브 페이지 리뉴얼 공통(상단 배너·하위 탭) + 회사소개 — css/main2026.css 다음에 불러옴 */
/* ===== 서브 페이지 공통: 상단 배너 + 하위 메뉴 탭 ===== */
.subhero{position:relative;min-height:600px;padding-top:78px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--bg)}
.subhero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);animation:kb 20s ease-in-out infinite alternate;filter:saturate(.85) brightness(.9)}
@keyframes kb{to{transform:scale(1.18) translate(-1.5%,-1%)}}
.subhero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,16,.55) 0%,rgba(20,18,16,.25) 35%,rgba(20,18,16,.75) 78%,var(--bg) 100%)}
.subhero-in{position:relative;z-index:1;padding-bottom:64px;width:100%}
.crumb{font-size:12px;color:rgba(245,239,230,.7);letter-spacing:.12em;display:flex;gap:10px;align-items:center}
.crumb b{color:var(--orange);font-weight:700}
.subhero h1{font-size:96px;line-height:1;letter-spacing:-.05em;margin:18px 0 18px;font-weight:800}
.subhero h1 em{font-style:normal;color:var(--orange)}
.subhero p{margin:0;font-size:19px;color:rgba(245,239,230,.86);max-width:560px;line-height:1.6}
.subnav{position:sticky;top:78px;z-index:40;background:rgba(20,18,16,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.subnav .wrap{display:flex;gap:4px;height:62px;align-items:center;overflow-x:auto;scrollbar-width:none}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a{height:42px;padding:0 20px;border-radius:12px;display:inline-flex;align-items:center;font-weight:700;font-size:15px;color:var(--muted);white-space:nowrap}
.subnav a:hover{color:var(--text)}
.subnav a.on{background:rgba(234,123,53,.14);color:var(--orange)}
.subnav .sn-title{margin-right:18px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--dim)}

/* ===== 인사말 ===== */
.ab-greet-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:72px;align-items:center}
.ab-photos{position:relative;padding:0 0 70px 0}
.ab-photos .p1{width:88%;aspect-ratio:4/3.1;object-fit:cover;border-radius:26px}
.ab-photos .p2{position:absolute;right:0;bottom:0;width:46%;aspect-ratio:1/1;object-fit:cover;border-radius:22px;border:6px solid var(--bg);box-shadow:0 30px 60px rgba(0,0,0,.4)}
.ab-badge{position:absolute;left:24px;bottom:94px;background:var(--orange);color:#1a120b;border-radius:18px;padding:16px 20px;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.ab-badge b{display:block;font-size:34px;letter-spacing:-.04em;line-height:1}
.ab-badge span{font-size:13px;font-weight:700}
.ab-greet .h2 em{font-style:normal;color:var(--orange)}
.ab-letter{margin-top:30px;color:rgba(245,239,230,.82);font-size:17px;line-height:1.9}
.ab-letter p{margin:0 0 14px}
.ab-letter b{color:var(--text)}
.ab-sign{margin-top:30px;padding-top:24px;border-top:1px solid var(--line);display:flex;align-items:center;gap:16px}
.ab-sign span{color:var(--muted);font-size:15px}
.ab-sign b{font-size:13px;color:var(--kraft);letter-spacing:.2em}

/* ===== 숫자 ===== */
.ab-facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2)}
.ab-facts .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.ab-fact{padding:36px 26px;border-left:1px solid var(--line)}
.ab-fact:first-child{border-left:0}
.ab-fact b{display:block;font-size:42px;font-weight:800;letter-spacing:-.04em}
.ab-fact b em{font-style:normal;color:var(--orange);font-size:.7em}
.ab-fact span{color:var(--muted);font-size:14px}

/* ===== 네 가지 가치 ===== */
.ab-values-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:64px}
.ab-values-head .h2{font-size:64px}
.ab-values-head .h2 em{font-style:normal;color:var(--orange)}
.ab-rows{display:flex;flex-direction:column;gap:28px}
.ab-row{display:grid;grid-template-columns:1.1fr 1fr;gap:0;background:var(--panel);border:1px solid var(--line);border-radius:30px;overflow:hidden;min-height:380px}
.ab-row:nth-child(even){grid-template-columns:1fr 1.1fr}
.ab-row:nth-child(even) .ab-img{order:2}
.ab-img{position:relative;overflow:hidden}
.ab-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.ab-row:hover .ab-img img{transform:scale(1.05)}
.ab-txt{padding:52px 56px;display:flex;flex-direction:column;justify-content:center}
.ab-no{font-family:var(--mono);font-size:60px;font-weight:700;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--orange)}
.ab-txt h3{font-size:30px;letter-spacing:-.035em;margin:20px 0 16px}
.ab-txt p{margin:0;color:var(--muted);font-size:16px;line-height:1.85}
.ab-txt p b{color:var(--text)}

/* ===== 제작 현장 사진 띠 ===== */
.ab-gallery{overflow:hidden}
.marquee{margin-top:48px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.track{display:flex;gap:18px;width:max-content;animation:mq 60s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.track img{height:380px;width:auto;aspect-ratio:4/3;object-fit:cover;border-radius:22px;flex:0 0 auto;filter:saturate(.9)}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.track,.subhero-bg{animation:none}}

/* ===== 공장 위치 ===== */
.ab-visit{display:grid;grid-template-columns:1.3fr 1fr;gap:18px}
.ab-card{border-radius:28px;padding:44px;border:1px solid var(--line-2);background:linear-gradient(160deg,var(--panel),var(--bg));display:flex;flex-direction:column}
.ab-card.o{background:var(--kraft);color:#1c1611;border:0}
.ab-card h3{font-size:30px;letter-spacing:-.035em;margin:14px 0 12px}
.ab-card p{margin:0;line-height:1.8;color:var(--muted)}
.ab-card.o p{color:#4a3d30}
.ab-card .row2{display:flex;gap:10px;margin-top:auto;padding-top:30px;flex-wrap:wrap}
.ab-card.o .btn-g{border-color:rgba(0,0,0,.2);color:#1c1611}
.ab-addr{font-size:18px;color:var(--text);font-weight:700;margin-top:6px}


@media (max-width:1100px){
  .ab-greet-grid{grid-template-columns:1fr;gap:48px}
  .ab-values-head{grid-template-columns:1fr;gap:10px}
  .ab-row,.ab-row:nth-child(even){grid-template-columns:1fr}
  .ab-row:nth-child(even) .ab-img{order:0}
  .ab-img{aspect-ratio:16/9}
  .ab-visit{grid-template-columns:1fr}
}
@media (max-width:767px){
  .subhero{min-height:460px;padding-top:64px}
  .subhero-in{padding-bottom:40px}
  .subhero h1{font-size:54px}
  .subhero p{font-size:16px}
  .subnav{top:64px}
  .subnav .wrap{height:56px;padding:0 12px}
  .subnav .sn-title{display:none}
  .subnav a{padding:0 16px;font-size:14.5px}
  .ab-photos{padding-bottom:50px}
  .ab-badge{left:14px;bottom:64px;padding:12px 14px}
  .ab-badge b{font-size:26px}
  .ab-letter{font-size:15.5px}
  .ab-facts .wrap{grid-template-columns:1fr 1fr;padding:0}
  .ab-fact{padding:22px 18px;border-top:1px solid var(--line)}
  .ab-fact:nth-child(odd){border-left:0}
  .ab-fact b{font-size:30px}
  .ab-values-head{margin-bottom:34px}
  .ab-values-head .h2{font-size:40px}
  .ab-row{border-radius:22px;min-height:0}
  .ab-txt{padding:28px 24px}
  .ab-no{font-size:44px}
  .ab-txt h3{font-size:23px;margin:14px 0 10px}
  .ab-txt p{font-size:15px}
  .track img{height:220px}
  .ab-card{padding:28px;border-radius:22px}
  .ab-card h3{font-size:24px}
}

/* ===== 오시는 길(회사소개에 합침, 2026-09-28) ===== */
.ab-greet,.ab-values,.ab-gallery,.ab-loc{scroll-margin-top:150px}
.loc-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;align-items:stretch}
.loc-map{border-radius:26px;overflow:hidden;border:1px solid var(--line-2);background:#e9e4dc;min-height:440px}
.loc-map .root_daum_roughmap{width:100%!important;border:0!important;background:transparent}
.loc-map .root_daum_roughmap .wrap_map{height:440px!important}
.loc-info{border-radius:26px;border:1px solid var(--line-2);background:linear-gradient(160deg,var(--panel),var(--bg));padding:36px;display:flex;flex-direction:column}
.loc-info dl{margin:0;display:flex;flex-direction:column}
.loc-info dl div{display:grid;grid-template-columns:86px 1fr;gap:12px;padding:15px 0;border-bottom:1px dashed var(--line-2)}
.loc-info dl div:first-child{padding-top:0}
.loc-info dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;color:var(--kraft);padding-top:3px}
.loc-info dd{margin:0;color:var(--text);font-size:15.5px;line-height:1.65}
.loc-info dd small{display:block;color:var(--dim);font-size:13px;margin-top:3px}
.loc-info dd a:hover{color:var(--orange)}
.loc-addr{font-size:19px!important;font-weight:800;letter-spacing:-.02em}
.loc-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:24px}
.loc-btns .btn{height:46px;padding:0 16px;font-size:14.5px}
.btn-copy.done{border-color:var(--orange);color:var(--orange)}
.ab-quote{margin-top:18px;border-radius:28px;background:var(--kraft);color:#1c1611;padding:40px 44px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ab-quote h3{font-size:30px;letter-spacing:-.035em;margin:10px 0 8px}
.ab-quote p{margin:0;color:#4a3d30}
.ab-quote .label{color:#8a4a1c}
.ab-quote .label::before{background:#8a4a1c}
.ab-quote .row2{display:flex;gap:10px;flex-wrap:wrap}
.ab-quote .btn-dark{background:#1c1611;color:var(--kraft)}
.ab-quote .btn-g{border-color:rgba(0,0,0,.25);color:#1c1611}
@media (max-width:1100px){.loc-grid{grid-template-columns:1fr}}
@media (max-width:767px){
  .ab-greet,.ab-values,.ab-gallery,.ab-loc{scroll-margin-top:124px}
  .loc-map,.loc-map .root_daum_roughmap .wrap_map{min-height:320px;height:320px!important}
  .loc-info{padding:24px;border-radius:22px}
  .loc-info dl div{grid-template-columns:72px 1fr}
  .loc-addr{font-size:17px!important}
  .loc-btns .btn{flex:1 1 calc(50% - 4px)}
  .ab-quote{padding:28px 24px;border-radius:22px}
  .ab-quote h3{font-size:24px}
  .ab-quote .row2 .btn{flex:1 1 0}
}

/* ==========================================================================
   레퍼런스 (2026-09-28, contents/board/reference/reference.php — 시안 design/main_2026/reference.html)
   ========================================================================== */
/* ===== 레퍼런스 상단: 사진이 흐르는 배경 ===== */
.ref-hero{position:relative;padding:150px 0 90px;overflow:hidden;background:radial-gradient(800px 460px at 85% 10%,rgba(234,123,53,.16),transparent 60%),var(--bg)}
.ref-mosaic{position:absolute;top:-40px;right:-60px;bottom:-40px;width:52%;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;transform:rotate(-6deg);opacity:.55;pointer-events:none;mask-image:linear-gradient(90deg,transparent,#000 35%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 35%)}
.ref-mosaic .col{display:flex;flex-direction:column;gap:14px;animation:rup 40s linear infinite}
.ref-mosaic .col:nth-child(2){animation-duration:52s;animation-direction:reverse}
.ref-mosaic .col:nth-child(3){animation-duration:46s}
.ref-mosaic img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#F4EEE6;border-radius:18px;padding:10px}
@keyframes rup{to{transform:translateY(-50%)}}
.ref-hero-in{position:relative;z-index:1;max-width:620px}
.ref-hero h1{font-size:88px;line-height:1;letter-spacing:-.05em;margin:18px 0 22px;font-weight:800}
.ref-hero h1 em{font-style:normal;color:var(--orange)}
.ref-hero p{margin:0;font-size:17.5px;line-height:1.8;color:rgba(245,239,230,.82)}
.ref-stats{display:flex;gap:30px;margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}
.ref-stats b{display:block;font-size:30px;font-weight:800;letter-spacing:-.03em}
.ref-stats b em{font-style:normal;color:var(--orange);font-size:.7em}
.ref-stats span{font-size:13.5px;color:var(--dim)}

/* ===== 형태 고르기 막대 ===== */
.rfilter .wrap{gap:6px}
.rfilter button{height:40px;padding:0 15px;border-radius:12px;border:1px solid transparent;background:none;color:var(--muted);font:inherit;font-weight:700;font-size:14.5px;white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.rfilter button b{font-family:var(--mono);font-size:11.5px;color:var(--dim);font-weight:700}
.rfilter button:hover{color:var(--text)}
.rfilter button.on{background:var(--orange);color:#1a120b}
.rfilter button.on b{color:#1a120b;opacity:.7}

/* ===== 카드 ===== */
.ref-list{padding:56px 0 110px}
.rsum{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;color:var(--muted);font-size:14.5px}
.rsum b{color:var(--text)}
.rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.rcard{appearance:none;border:0;padding:0;text-align:left;font:inherit;color:inherit;background:var(--panel);border:1px solid var(--line);border-radius:22px;overflow:hidden;cursor:pointer;transition:transform .25s,border-color .25s,box-shadow .25s;animation:fin .45s ease both}
.rcard:hover{transform:translateY(-5px);border-color:var(--orange);box-shadow:0 22px 50px rgba(0,0,0,.35)}
.rcard .ri{background:#F4EEE6;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.rcard img{width:100%;height:100%;object-fit:contain;padding:16px;transition:transform .45s}
.rcard:hover img{transform:scale(1.06)}
.rcard .rm{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 16px}
.rcard .rm b{font-size:16px;letter-spacing:-.02em}
.rcard .rm span{font-size:12.5px;color:var(--dim);transition:color .2s}
.rcard:hover .rm span{color:var(--orange)}
.rchip{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:8px;background:rgba(234,123,53,.14);color:var(--orange);font-family:var(--mono);font-size:11.5px;font-weight:700}
@keyframes fin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.rmore{margin-top:40px;border-radius:26px;border:1px dashed var(--line-2);padding:34px 36px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.rmore h3{margin:8px 0 6px;font-size:24px;letter-spacing:-.03em}
.rmore p{margin:0;color:var(--muted)}

/* ===== 상세 창 ===== */
.rmodal{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:28px}
.rmodal.on{display:flex}
.rmodal-bg{position:absolute;inset:0;background:rgba(10,9,8,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fade .2s ease}
@keyframes fade{from{opacity:0}}
.rdlg{position:relative;width:min(1120px,100%);max-height:calc(100vh - 56px);display:grid;grid-template-columns:1.1fr 1fr;background:var(--bg-2);border:1px solid var(--line-2);border-radius:28px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.5);animation:pop .28s cubic-bezier(.2,.8,.3,1)}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.98)}}
.rimg{position:relative;background:#F4EEE6;display:flex;align-items:center;justify-content:center;min-height:460px}
.rimg img{width:100%;height:100%;max-height:calc(100vh - 56px);object-fit:contain;padding:36px}
.rnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:rgba(28,22,17,.82);color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.rnav:hover{background:var(--orange);color:#1a120b}
.rnav.prev{left:16px}.rnav.next{right:16px}
.rcount{position:absolute;left:18px;top:18px;font-family:var(--mono);font-size:12px;background:rgba(28,22,17,.82);color:var(--kraft);padding:6px 10px;border-radius:8px}
.rbody{padding:40px 38px 32px;overflow-y:auto;display:flex;flex-direction:column}
.rclose{position:absolute;right:16px;top:16px;z-index:2;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-2);background:rgba(20,18,16,.8);color:var(--text);font-size:22px;cursor:pointer}
.rbody h2{font-size:34px;letter-spacing:-.04em;margin:14px 0 12px}
.rdesc{color:var(--muted);line-height:1.8;font-size:15px;margin:0 0 20px}
.racts{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.racts .btn{width:100%;height:52px}
.rform{display:none;margin-top:18px;padding-top:20px;border-top:1px dashed var(--line-2)}
.rform.on{display:block;animation:fade .25s}
.rform .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rform label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:6px}
.rform label i{font-style:normal;color:var(--orange)}
.rform input[type=text],.rform input[type=email],.rform input[type=tel],.rform textarea{width:100%;height:46px;border-radius:12px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--text);padding:0 14px;font:inherit;font-size:15px;outline:0;transition:border-color .15s}
.rform textarea{height:92px;padding:12px 14px;resize:vertical;margin-top:0}
.rform input:focus,.rform textarea:focus{border-color:var(--orange)}
.rform .full{grid-column:1/-1}
.ragree{margin:14px 0 4px;border:1px solid var(--line-2);border-radius:12px;padding:12px 14px}
.ragree .row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ragree label{margin:0;display:flex;align-items:center;gap:9px;font-size:14px;color:var(--text);cursor:pointer}
.ragree input{width:18px;height:18px;flex:0 0 18px;accent-color:#EA7B35}
.ragree button{background:none;border:0;color:var(--muted);font:inherit;font-size:13px;cursor:pointer;text-decoration:underline;white-space:nowrap;flex:0 0 auto}
.ragree .txt{display:none;margin-top:10px;max-height:150px;overflow-y:auto;font-size:12.5px;line-height:1.7;color:var(--muted);padding-right:6px}
.ragree .txt.on{display:block}
.rform .submit{width:100%;height:52px;margin-top:12px}
.rmsg{font-size:13px;color:#ff8a7a;min-height:18px;margin-top:8px}
.rdone{display:none;text-align:center;padding:26px 10px}
.rdone.on{display:block;animation:fade .3s}
.rdone .ok{width:64px;height:64px;border-radius:50%;background:rgba(61,220,132,.15);color:#3ddc84;font-size:30px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.rdone h3{margin:0 0 8px;font-size:22px}
.rdone p{margin:0;color:var(--muted);line-height:1.7}
body.modal-open{overflow:hidden}


@media (max-width:1100px){.rgrid{grid-template-columns:repeat(3,1fr)}.ref-mosaic{width:60%;opacity:.35}}
@media (max-width:860px){
  .rmodal{padding:0}
  .rdlg{grid-template-columns:1fr;max-height:100vh;height:100%;border-radius:0;overflow-y:auto;display:block}
  .rimg{min-height:0;height:46vh}
  .rimg img{padding:22px;max-height:46vh}
  .rbody{overflow:visible;padding:26px 20px 40px}
  .rclose{position:fixed}
}
@media (max-width:767px){
  .rform input[type=text],.rform input[type=email],.rform input[type=tel],.rform textarea{font-size:16px}
  .ref-hero{padding:104px 0 56px}
  .ref-mosaic{width:100%;right:-30%;opacity:.18}
  .ref-hero h1{font-size:56px}
  .ref-hero p{font-size:15.5px}
  .ref-stats{gap:22px}
  .ref-stats b{font-size:24px}
  .rfilter button{padding:0 12px;font-size:14px}
  .ref-list{padding:28px 0 80px}
  .rgrid{grid-template-columns:repeat(2,1fr);gap:10px}
  .rcard{border-radius:16px}
  .rcard img{padding:10px}
  .rcard .rm{padding:11px 12px}
  .rcard .rm b{font-size:14.5px}
  .rcard .rm span{display:none}
  .rbody h2{font-size:26px}
  .rform .grid2{grid-template-columns:1fr}
  .rnav{width:40px;height:40px}
  .rmore{padding:24px}
}
/* 숨김(형태 고르기로 가린 카드, 한 장뿐일 때 이전·다음 등) */
.ref-list [hidden],.rmodal [hidden]{display:none!important}
.rform .submit:disabled{opacity:.6;cursor:wait}
.rc-note{margin-top:10px;font-size:11.5px;line-height:1.6;color:var(--dim);text-align:center}
.rc-note a{text-decoration:underline}
.grecaptcha-badge{visibility:hidden}   /* 자동등록 방지 표시는 문의 칸 아래 안내문으로 대신(Google 안내 방식) */
.rmsg{white-space:pre-line}

/* ==========================================================================
   디자인서비스 (2026-09-28, contents/board/Portfolio/list.php — 시안 design/main_2026/design.html)
   플랜 카드는 관리자 주문제작설정 › 디자인 플랜(금액·메모) 연동
   ========================================================================== */
/* ===== 첫 화면: 전개도에 디자인이 입혀지는 그림 ===== */
.ds-hero{position:relative;padding:140px 0 90px;overflow:hidden;background:radial-gradient(760px 480px at 78% 30%,rgba(234,123,53,.14),transparent 62%),var(--bg)}
.ds-hero-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:48px;align-items:center}
.ds-hero h1{font-size:84px;line-height:1;letter-spacing:-.05em;margin:18px 0 22px;font-weight:800}
.ds-hero h1 em{font-style:normal;color:var(--orange)}
.ds-hero p.lead{margin:0;font-size:17.5px;line-height:1.8;color:rgba(245,239,230,.82)}
.ds-stats{display:flex;gap:30px;margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}
.ds-stats b{display:block;font-size:30px;font-weight:800;letter-spacing:-.03em;white-space:nowrap}
.ds-stats b em{font-style:normal;color:var(--orange);font-size:.6em;margin-left:2px}
.ds-stats span{font-size:13.5px;color:var(--dim)}
.ds-hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}

.ds-art{position:relative;border:1px solid var(--line);border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));padding:22px 22px 18px}
.ds-art .grid-bg{position:absolute;inset:0;border-radius:28px;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:24px 24px;pointer-events:none}
.ds-art svg{position:relative;display:block;width:100%;height:auto}
.ds-art .paper{fill:#E9DCCB;opacity:.08;transition:opacity .8s}
.ds-art.s1 .paper{opacity:.16}
.ds-art .cut{fill:none;stroke:#E9DCCB;stroke-width:1.6;stroke-linejoin:round;transition:stroke-dashoffset 1.8s ease}
.ds-art .fold{stroke:rgba(233,220,203,.45);stroke-width:1.1;stroke-dasharray:5 5;opacity:0;transition:opacity .6s .9s}
.ds-art.s1 .fold{opacity:1}
.ds-art .ly{opacity:0;transform:scale(.97);transform-box:fill-box;transform-origin:center;transition:opacity .7s ease,transform .7s ease}
.ds-art .ly.on{opacity:1;transform:none}
.ds-art .scan{fill:url(#gScan);opacity:0}
.ds-art .scan.run{animation:scan 1.1s ease-in-out}
@keyframes scan{0%{opacity:0;transform:translateX(-120px)}20%{opacity:1}100%{opacity:0;transform:translateX(560px)}}
.ds-art ol{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;position:relative}
.ds-art li{font-size:12.5px;color:var(--dim);padding-top:10px;border-top:2px solid var(--line-2);transition:color .3s,border-color .3s;line-height:1.4}
.ds-art li b{display:block;font-family:var(--mono);font-size:11px;margin-bottom:2px}
.ds-art li.on{color:var(--text);border-color:var(--orange)}
.ds-art li.on b{color:var(--orange)}

/* ===== 플랜 카드(관리자 연동) ===== */
.ds-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.pl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px;align-items:stretch}
.pl-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:26px;padding:30px 30px 32px;background:linear-gradient(180deg,var(--panel),var(--bg-2));transition:transform .25s,border-color .25s,box-shadow .25s;overflow:hidden}
.pl-card:hover{transform:translateY(-6px);border-color:rgba(234,123,53,.6);box-shadow:0 26px 60px rgba(0,0,0,.35)}
.pl-card.k-C{background:radial-gradient(420px 260px at 90% 0%,rgba(234,123,53,.22),transparent 70%),linear-gradient(180deg,#26211C,#17140F);border-color:rgba(234,123,53,.45)}
.pl-art{height:132px;display:flex;align-items:flex-end;justify-content:flex-start;margin-bottom:18px}
.pl-art svg{height:124px;width:auto;overflow:visible}
.pl-top{display:flex;align-items:center;gap:10px}
.pl-key{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--orange);letter-spacing:.08em}
.pl-name{font-size:13px;color:var(--dim)}
.pl-price{font-size:44px;font-weight:800;letter-spacing:-.045em;margin:10px 0 0;line-height:1.1}
.pl-price small{font-size:17px;color:var(--muted);font-weight:600;margin-left:4px;letter-spacing:0}
.pl-price.ask{font-size:28px}
.pl-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.pl-stats div{border:1px solid var(--line-2);border-radius:14px;padding:12px 14px;background:rgba(255,255,255,.025)}
.pl-stats b{font-size:26px;font-weight:800;letter-spacing:-.03em}
.pl-stats b em{font-style:normal;font-size:14px;color:var(--muted);margin-left:2px;font-weight:600}
.pl-stats span{display:block;font-size:12.5px;color:var(--dim);margin-top:2px}
.pl-inc{margin-top:22px;display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--orange);background:rgba(234,123,53,.1);border:1px dashed rgba(234,123,53,.45);border-radius:12px;padding:10px 12px}
.pl-inc i{font-style:normal;font-family:var(--mono);font-size:12px;background:var(--orange);color:#1a120b;border-radius:6px;padding:2px 7px}
.pl-list{list-style:none;margin:22px 0 0;padding:20px 0 0;border-top:1px dashed var(--line-2);display:flex;flex-direction:column;gap:12px;flex:1}
.pl-list li{display:flex;gap:10px;font-size:15px;line-height:1.55;color:rgba(245,239,230,.88)}
.pl-list li::before{content:"";flex:0 0 18px;height:18px;margin-top:2px;border-radius:50%;background:rgba(234,123,53,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='%23EA7B35' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.pl-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px;padding:18px 22px;border:1px solid var(--line);border-radius:18px;color:var(--muted);font-size:14.5px}
.pl-foot b{color:var(--text)}

/* ===== 진행 과정: 6단계, 디자인 플랜 구간 강조 ===== */
.dsf{position:relative;margin-top:56px}
.dsf-track{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:0}
.dsf-line{position:absolute;left:calc(100%/12);right:calc(100%/12);top:44px;height:2px;background:var(--line-2)}
.dsf-line i{position:absolute;left:0;top:0;height:100%;width:0;background:var(--orange);transition:width 2.2s ease}
.dsf.in .dsf-line i{width:100%}
.dsf-band{position:absolute;top:-10px;bottom:-18px;left:calc(100%/6);width:calc(100%/3);border:1.5px dashed rgba(234,123,53,.55);border-radius:22px;background:rgba(234,123,53,.06)}
.dsf-band span{position:absolute;left:50%;top:-14px;transform:translateX(-50%);white-space:nowrap;background:var(--orange);color:#1a120b;font-size:12.5px;font-weight:800;padding:5px 12px;border-radius:999px}
.fstep{position:relative;text-align:center;padding:0 10px}
.fstep .dot{position:relative;z-index:1;width:88px;height:88px;margin:0 auto;border-radius:50%;padding:4px;background:var(--bg);border:2px solid var(--line-2)}
.fstep .dot img{width:100%;height:100%;border-radius:50%;object-fit:cover;filter:grayscale(.35) contrast(1.05)}
.fstep .no{position:absolute;right:-4px;top:-2px;width:28px;height:28px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line-2);font-family:var(--mono);font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.fstep.is-plan .dot{border-color:var(--orange)}
.fstep.is-plan .dot img{filter:none}
.fstep.is-plan .no{background:var(--orange);color:#1a120b;border-color:var(--orange)}
.fstep h3{font-size:18px;margin:18px 0 8px;letter-spacing:-.02em}
.fstep p{margin:0;font-size:14px;line-height:1.7;color:var(--muted)}
.fstep-tag{display:none}
.dsf-note{margin-top:34px;text-align:center;color:var(--dim);font-size:13.5px}

/* ===== 상담 ===== */
.ds-cta{padding:0 0 120px}
.ds-cta-in{border-radius:30px;padding:48px 52px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;background:linear-gradient(120deg,#EA7B35,#C95F1D);color:#1a120b}
.ds-cta-in h2{margin:0 0 8px;font-size:34px;letter-spacing:-.04em;line-height:1.25}
.ds-cta-in p{margin:0;font-size:16px;opacity:.85}
.ds-cta-in .btn-k{background:#1a120b;color:#F5EFE6}
.ds-cta-in .btn-w{background:rgba(255,255,255,.22);color:#1a120b;border:1px solid rgba(26,18,11,.25)}


@media (max-width:1100px){
  .ds-hero-grid{grid-template-columns:1fr}
  .ds-art{max-width:680px}
  .pl-grid{grid-template-columns:1fr;max-width:640px}
}
@media (max-width:900px){
  .dsf-track{grid-template-columns:1fr;gap:0}
  .dsf-line{left:43px;right:auto;top:44px;bottom:44px;width:2px;height:auto}
  .dsf-line i{width:100%!important;height:0;transition:height 2.2s ease}
  .dsf.in .dsf-line i{height:100%}
  .dsf-band{display:none}
  .fstep-tag{display:inline-block;margin:6px 0 2px;background:var(--orange);color:#1a120b;font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px}
  .fstep{display:grid;grid-template-columns:88px 1fr;gap:18px;text-align:left;padding:0 0 28px;align-items:start}
  .fstep h3{margin:10px 0 6px}
}
@media (max-width:767px){
  .ds-hero{padding:104px 0 60px}
  .ds-hero h1{font-size:52px}
  .ds-hero p.lead{font-size:15.5px}
  .ds-stats{gap:18px}
  .ds-stats b{font-size:22px}
  .ds-art{padding:14px 12px 12px;border-radius:20px}
  .ds-art ol{grid-template-columns:repeat(5,1fr);gap:4px}
  .ds-art li{font-size:11px}
  .ds-art li b{font-size:10px}
  .pl-card{padding:24px 22px 26px}
  .pl-price{font-size:38px}
  .fstep .dot{width:72px;height:72px}
  .fstep{grid-template-columns:72px 1fr}
  .dsf-line{left:35px;top:36px;bottom:60px}
  .ds-cta-in{padding:34px 26px}
  .ds-cta-in h2{font-size:26px}
}
@media (prefers-reduced-motion:reduce){.ds-art .ly,.ds-art .cut,.dsf-line i{transition:none}}
/* 디자인서비스: 위 탭·#주소로 이동할 때 고정 머리말+탭(넓은 화면 140px, 휴대폰 126px)에 제목이 가리지 않게 */
.ds-hero ~ #plans{scroll-margin-top:30px}
.ds-hero ~ #flow{scroll-margin-top:120px}
.ds-hero ~ #contact{scroll-margin-top:170px}
@media (max-width:767px){.ds-hero ~ #plans{scroll-margin-top:50px}.ds-hero ~ #flow{scroll-margin-top:100px}.ds-hero ~ #contact{scroll-margin-top:150px}}