/* 회사 이름 넣어 보기. 틀은 site.css 토큰, 예시 틀 안의 고객 색은 --f 계열 3벌 */
.np{container:npc/inline-size;--u:4;--ink:#16181D;--sub:#5F636D;--ln:#DDDFE3}
.np[data-scheme="1"]{--f:#16181D;--ft:#fff;--fs:#A9AEB7;--fa:#D19A45;--fb:#16181D;--a:#A0661E;--at:#8A5718;--t:#F5EFE7}
.np[data-scheme="2"]{--f:#fff;--ft:#16181D;--fs:#5F636D;--fa:#007E97;--fb:#fff;--a:#007E97;--at:#006A80;--t:#E8F8FB}
.np[data-scheme="3"]{--f:#1B2A47;--ft:#fff;--fs:#B1BCCF;--fa:#A9BEE0;--fb:#16181D;--a:#2E4A7D;--at:#2E4A7D;--t:#ECF0F6}

/* 입력 */
.np-ctl{display:grid;gap:20px 24px}
.np-f{min-width:0}
.np .fld input::placeholder{color:var(--text-tertiary)}
.np-cnt{display:block;margin-top:4px;font-size:13px;color:var(--text-tertiary);font-variant-numeric:tabular-nums}
.np-sch{border:0;margin:0;padding:0;min-width:0}
.np-sch legend{padding:0;margin-bottom:8px;font-size:15px;font-weight:600}
.np-sch div{display:flex;flex-wrap:wrap;gap:8px}
.np-sch label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 12px;background:var(--bg-page);box-shadow:inset 0 0 0 1px var(--border-input);font-size:15px;cursor:pointer}
.np-sch label:has(:checked){box-shadow:inset 0 0 0 2px var(--text-default);font-weight:600}
.np-sch input{width:20px;height:20px;margin:0;accent-color:var(--action-primary)}
.np-sw{width:28px;height:20px;background:linear-gradient(90deg,var(--sa) 50%,var(--sb) 50%);box-shadow:inset 0 0 0 1px rgba(14,16,19,.2)}
.np-sw1{--sa:#16181D;--sb:#D19A45}.np-sw2{--sa:#fff;--sb:#007E97}.np-sw3{--sa:#1B2A47;--sb:#A9BEE0}
.np-go{display:flex;align-items:flex-end}
.np-cta{width:100%}
@container npc (min-width:880px){
  .np-ctl{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}
  .np-sch{grid-column:1/3}
}

/* 무대 */
.np-stage{container:np/inline-size;margin-top:32px;padding:40px;background:var(--bg-section-warm)}
.np-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:24px}
.np-tag{display:inline-flex;align-items:center;height:24px;padding:0 8px;background:var(--bg-accent-subtle);color:var(--text-eyebrow);font-size:12px;font-weight:600;white-space:nowrap}
.np-sum{flex:1 1 240px;font-size:15px;line-height:1.6;color:var(--text-secondary)}
.np-grid{display:grid;grid-auto-flow:dense;gap:32px 24px;align-items:start}
.np-it{min-width:0}
.np-it figcaption{margin-top:12px;font-size:14px;color:var(--text-tertiary)}
.np-note{margin-top:24px;font-size:14px;line-height:1.6;color:var(--text-tertiary)}
@container np (min-width:600px){
  .np-grid{grid-template-columns:1fr 1fr}
  .np-i-web,.np-i-qt{grid-column:1/-1}
  .np-i-let{grid-row:span 2}
}
@container np (min-width:900px){
  [data-mode="home"] .np-grid{grid-template-columns:1.7fr 1fr}
  .np-i-web{grid-column:1;grid-row:1/3;align-self:center}
  [data-mode="kit"] .np-grid{grid-template-columns:repeat(3,1fr)}
  .np-i-let{grid-column:1;grid-row:1/3}
  .np-i-qt{grid-column:2/4;grid-row:1}
}
@media (max-width:600px){.np-stage{padding:24px 16px}}

/* 예시 틀 공통 */
.np-m{container-type:inline-size;position:relative;overflow:hidden;background:#fff;color:var(--ink);box-shadow:var(--shadow-1),0 0 0 1px rgba(14,16,19,.06);
  line-height:1.4;letter-spacing:-.01em;word-break:keep-all;overflow-wrap:break-word}
.np-m>*{font-size:max(12px,2.8cqi)}
:where(.np-m) :where(p,dl,dd){margin:0}
.np-m i{font-style:normal}
.np-m,.np-m *{transition:background-color .2s,color .2s}
.np-wm{display:block;font-weight:700;letter-spacing:-.02em;line-height:1.2;white-space:nowrap}
.np-pre{display:block;font-size:max(12px,2.6cqi);font-weight:500;color:var(--sub)}
.np-pre:empty{display:none}
.np-en{display:block;font-size:max(12px,2.2cqi);font-weight:600;letter-spacing:.08em;color:var(--at)}
.np-dl div{display:flex;gap:3cqi}
.np-dl dt{flex:none;width:5em;color:var(--sub)}

/* 명함 */
.np-card{aspect-ratio:9/5;display:flex;flex-direction:column;justify-content:space-between;padding:7cqi 8cqi;background:var(--f);color:var(--ft)}
.np-card .np-pre,.np-deck .np-pre{color:var(--fs)}
.np-card .np-wm{font-size:min(7.4cqi,calc(64cqi / var(--u)))}
.np-card .np-en{margin-top:2cqi;color:var(--fa)}
.np-card-b{display:flex;justify-content:space-between;align-items:flex-end;gap:4cqi}
.np-card-b p:first-child{display:grid;white-space:nowrap}
.np-card-b b{font-size:max(14px,4.6cqi);font-weight:650}
.np-card-b span,.np-ct{color:var(--fs)}
.np-ct{text-align:right;line-height:1.5;white-space:nowrap}

/* 회사소개서 표지 */
.np-deck{aspect-ratio:16/9;display:grid;grid-template-columns:64% 36%;background:var(--f);color:var(--ft)}
.np-deck-l{min-width:0;display:flex;flex-direction:column;justify-content:space-between;padding:6cqi 4cqi 5cqi 6cqi}
.np-eb{font-size:max(12px,1.9cqi);font-weight:600;letter-spacing:.08em;color:var(--fa)}
.np-deck .np-wm{font-size:max(12px,min(7cqi,calc(52cqi / var(--u))))}
.np-tg{margin-top:1.6cqi;color:var(--fs);font-size:max(12px,2.5cqi)}
.np-yr{font-size:max(12px,1.9cqi);color:var(--fs)}
.np-yr::before{content:"";display:block;width:6cqi;height:.6cqi;margin-bottom:1.6cqi;background:var(--fa)}
.np-deck-r{display:flex;align-items:flex-end;justify-content:flex-end;overflow:hidden;padding:0 4cqi 2cqi 0;background:var(--t)}
.np-deck-r b{font-size:22cqi;font-weight:700;line-height:1;color:var(--a)}

/* 홈페이지 첫 화면 */
.np-m-lap{background:none;box-shadow:none}
.np-scr{container-type:inline-size;margin:0 5cqi;aspect-ratio:16/10;overflow:hidden;border:1.2cqi solid #0E1013;border-bottom-width:1.8cqi;background:var(--f);box-shadow:var(--shadow-1)}
.np-base{position:relative;height:2.2cqi;background:linear-gradient(#DDDFE3,#9EA2AB)}
.np-base::after{content:"";position:absolute;left:42%;top:0;width:16%;height:40%;background:#7E828C}
.np-site{height:100%;display:flex;flex-direction:column;background:var(--f);color:var(--ft)}
.np-nav{display:flex;align-items:center;justify-content:space-between;gap:3cqi;padding:2.4cqi 4.5cqi;box-shadow:inset 0 -1px 0 rgba(128,134,145,.3)}
.np-nav .np-wm{font-size:max(12px,min(3.2cqi,calc(40cqi / var(--u))))}
.np-menu{display:flex;align-items:center;gap:2.6cqi;font-size:max(12px,1.8cqi);white-space:nowrap}
.np-nb{padding:.8cqi 1.8cqi;background:var(--fa);color:var(--fb);font-weight:600}
.np-bg{display:none;flex:none;width:max(16px,4cqi);stroke:currentColor;fill:none;stroke-width:2}
.np-hero{flex:1;display:flex;flex-direction:column;justify-content:center;gap:1.6cqi;padding:3cqi 4.5cqi}
.np-hero .np-en{font-size:max(12px,1.7cqi);color:var(--fa)}
.np-h1{font-size:max(15px,5.2cqi);font-weight:700;line-height:1.25;letter-spacing:-.03em;max-width:13em}
.np-lead{font-size:max(12px,2cqi);color:var(--fs)}
.np-btns{display:flex;gap:1.4cqi;margin-top:.8cqi;white-space:nowrap}
.np-btns i{padding:1cqi 2.4cqi;font-size:max(12px,1.8cqi);font-weight:600}
.np-b1{background:var(--fa);color:var(--fb)}
.np-b2{box-shadow:inset 0 0 0 1px currentColor}
.np-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ln)}
.np-feat span{padding:2cqi 3cqi;background:var(--t);color:var(--ink)}
.np-feat small{display:block;font-size:max(12px,1.5cqi);font-weight:600;color:var(--at)}
.np-feat b{font-size:max(12px,1.9cqi);font-weight:650}
@container (max-width:520px){.np-menu,.np-lead,.np-feat{display:none}.np-bg{display:block}}

/* 편지지 */
.np-let{aspect-ratio:210/297;display:flex;flex-direction:column;padding:9cqi 9cqi 6cqi}
.np-let-h{position:relative;padding-bottom:3cqi;box-shadow:inset 0 -1px 0 var(--ln)}
.np-let-h::after{content:"";position:absolute;left:0;bottom:0;width:12cqi;height:.8cqi;background:var(--a)}
.np-let .np-wm{font-size:min(6.4cqi,calc(64cqi / var(--u)))}
.np-let .np-en{margin-top:1cqi}
.np-let-d{margin-top:6cqi;text-align:right;color:var(--sub)}
.np-let .np-dl{margin-top:3cqi}
.np-let-b{display:grid;gap:2.4cqi;margin-top:5cqi;line-height:1.7}
.np-let-s{margin-top:auto;text-align:right;font-weight:600}
.np-let-f{margin-top:5cqi;padding-top:2.4cqi;border-top:.5cqi solid var(--a);color:var(--sub);font-size:max(12px,2.2cqi)}

/* 이메일 서명 */
.np-mail{padding:6cqi}
.np-mail-g{line-height:1.6}
.np-sig{margin-top:5cqi;padding-left:4cqi;box-shadow:inset .8cqi 0 0 var(--a)}
.np-sig-n b{font-size:max(14px,4.4cqi);font-weight:650;margin-right:2cqi}
.np-sig-n span{color:var(--sub)}
.np-sig-c{display:flex;align-items:baseline;gap:1.6cqi;margin:2.4cqi 0;padding:2cqi 3cqi;background:var(--f);color:var(--ft);box-shadow:inset 0 0 0 1px var(--ln)}
.np-sig-c .np-pre{color:var(--fs)}
.np-sig-c .np-wm{font-size:max(12px,min(4.6cqi,calc(64cqi / var(--u))))}
.np-sig-t{color:var(--sub);line-height:1.6}

/* 견적서 머리 */
.np-qt{padding:5cqi;font-size:max(12px,1.8cqi)}
.np-qt-t{text-align:center;font-size:min(4.4cqi,32px);font-weight:700;letter-spacing:.4em;padding-bottom:2.4cqi;box-shadow:inset 0 -2px 0 var(--ink)}
.np-qt-g{display:grid;gap:3cqi;margin-top:3cqi}
.np-qt .np-dl{display:grid;gap:1cqi;align-content:start}
.np-qt-r{display:grid;grid-template-columns:auto 1fr;box-shadow:inset 0 2px 0 var(--a)}
.np-qt-r div{display:contents}
.np-qt-r dt,.np-qt-r dd{padding:1cqi 1.6cqi;box-shadow:inset 0 -1px 0 var(--ln)}
.np-qt-r dt{background:var(--t);font-weight:600}
.np-qt-sum{display:flex;justify-content:space-between;gap:3cqi;margin-top:3cqi;padding:1.6cqi 2.4cqi;background:var(--f);color:var(--ft);box-shadow:inset 0 0 0 1px var(--ln)}
.np-qt-sum b{font-variant-numeric:tabular-nums}
.np-qt-tb{display:grid;grid-template-columns:minmax(0,2.4fr) 1fr .7fr 1.4fr;margin-top:2cqi}
.np-qt-tb span{padding:1cqi 1.2cqi;box-shadow:inset 0 -1px 0 var(--ln)}
.np-qt-tb span:nth-child(-n+4){font-weight:600;box-shadow:inset 0 -2px 0 var(--ink)}
.np-qt-tb span:nth-child(4n+3),.np-qt-tb span:nth-child(4n){text-align:right;font-variant-numeric:tabular-nums}
@container (min-width:560px){.np-qt-g{grid-template-columns:1fr 1.2fr}}

@media (prefers-reduced-motion:reduce){.np-m,.np-m *{transition:none}}