/* ControlWebPro / Industrial Precision / 2026
 * Final presentation layer. Content, routes and service contracts stay in HTML/JS.
 * Specificity intentionally supersedes the earlier page-local visual rules.
 */
:root {
  --cwp-ink:#142b3b;
  --cwp-muted:#526777;
  --cwp-line:#d7e1e5;
  --cwp-surface:#f2f5f5;
  --cwp-warm:#bd4d2c;
  --brand:#143b4a;
  --brand-dark:#102934;
  --accent:#087a78;
  --container:1200px;
  --radius:12px;
  --cwp-shadow-sm:0 6px 20px rgb(16 41 52 / 4%);
  --cwp-shadow-lg:0 16px 40px rgb(16 41 52 / 9%);
  --cwp-chat-gradient:linear-gradient(135deg,#1b4653,#102b39);
  --cwp-chat-brand:#163c48;
  --cwp-chat-brand-dark:#102b39;
}
html {scroll-padding-top:110px;}
body[data-page] {
  font-family:Inter,Pretendard,"Noto Sans KR",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--cwp-ink);
  background:#fff;
  line-height:1.75;
}
body[data-page] .container {width:min(1200px,calc(100% - 80px));}
body[data-page] main :is(h1,h2,h3) {word-break:keep-all;overflow-wrap:anywhere;}
body[data-page] main p {word-break:keep-all;overflow-wrap:anywhere;}
body[data-page] main :is(.section,.checklist,.closing) {padding-block:88px;}
body[data-page] main .section.alt {background:#f2f5f5;}
body[data-page] main :is(.section-head,.head) {margin-bottom:36px;}
body[data-page] main :is(.section-head,.head) h2 {
  font-size:clamp(1.8rem,3vw,2.55rem) !important;
  line-height:1.35 !important;
  letter-spacing:-.045em !important;
  font-weight:760;
  text-wrap:pretty;
}
body[data-page] main :is(.section-head,.head) h2::after {display:none;}
body[data-page] main :is(.section-head,.head) p {line-height:1.85;max-width:780px;}
body[data-page] main .kicker {
  padding:0;
  background:none;
  border:0;
  border-radius:0;
  color:#08706e;
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.13em;
  box-shadow:none;
}
body[data-page] main .kicker::before {
  content:"";display:inline-block;width:18px;height:2px;
  margin:0 9px 4px 0;background:currentColor;
}
body[data-page] .title-accent-brand {color:#096d6c;}
body[data-page] main .title-accent-orange {color:#b64b2d;text-shadow:none;}

/* Navigation: a restrained wordmark and one unmistakable action. */
body[data-page] #site-header .site-header {background:rgba(255,255,255,.97);backdrop-filter:blur(14px);border-bottom:1px solid #dce4e7;box-shadow:none;}
body[data-page] #site-header .nav-wrap {min-height:84px;}
body[data-page] #site-header .brand .cwp-wordmark {font-size:1.8rem;letter-spacing:-.065em;}
body[data-page] #site-header .brand .cwp-wordmark-domain {letter-spacing:.1em;}
body[data-page] #site-header .nav {gap:12px;}
body[data-page] #site-header .nav a {padding-inline:8px;font-size:.88rem;font-weight:650;color:#435666;}
body[data-page] #site-header .nav a:is(:hover,.is-active) {color:#08706e;}
body[data-page] #site-header .nav a[data-nav="contact"] {
  background:#163c48 !important;border-radius:6px !important;box-shadow:none !important;
  padding:10px 18px;color:#fff;transform:none;
}
body[data-page] #site-header .nav-toggle {border-radius:8px;box-shadow:none;background:#f4f7f7;}
body[data-page] #site-header .mobile-menu-panel {background:#102b39;box-shadow:-16px 0 48px #071d3033;}
body[data-page] #site-header .mobile-menu-nav a {border-radius:6px;}
body[data-page] #site-header .mobile-menu-nav a.is-active {background:#ffffff0c;color:#8bd5ce;}
.skip-link {position:fixed;top:8px;left:16px;z-index:1600;padding:10px 18px;color:#fff;background:#102b39;border-radius:6px;transform:translateY(-160%);}
.skip-link:focus {transform:translateY(0);}
body[data-page] :is(a,button,input,textarea,select,summary):focus-visible {outline:3px solid #159e9a;outline-offset:4px;}
body[data-page] #main-content:focus {outline:none;}

/* Architectural hero: existing photography with a quiet technical grid. */
body[data-page] main :is(.hero-new,.hero,.guide-hero) {
  position:relative;isolation:isolate;min-height:550px;padding:78px 0;
  border-bottom:1px solid #264653;box-shadow:none;
}
body[data-page="home"] main .hero-new {min-height:640px;padding-block:86px;}
body[data-page] main .hero-new::before {
  background:linear-gradient(90deg,rgba(5,23,34,.92),rgba(7,29,40,.75) 54%,rgba(8,32,42,.46));
}
body[data-page] main :is(.hero-new,.hero)::after {
  opacity:.3;animation:none;transform:none;
  background-image:linear-gradient(#b5d9dd20 1px,transparent 1px),linear-gradient(90deg,#b5d9dd20 1px,transparent 1px);
  background-size:80px 80px;
  pointer-events:none;
}
body[data-page] main .hero-grid {grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:64px;align-items:center;}
body[data-page] main :is(.hero-new,.hero,.guide-hero) h1 {
  font-size:clamp(2.3rem,4vw,3.6rem) !important;
  line-height:1.22 !important;letter-spacing:-.055em !important;
  font-weight:780 !important;text-shadow:none;max-width:920px;
}
body[data-page] main :is(.hero-new,.hero,.guide-hero) .eyebrow {
  padding:0 0 14px;border:0;border-bottom:1px solid #bed7dc44;border-radius:0;
  background:transparent;color:#a7d8d3;font-size:.76rem;letter-spacing:.09em;
  box-shadow:none;backdrop-filter:none;font-weight:700;
}
body[data-page] main :is(.hero-new,.hero,.guide-hero) :is(.sub,.hero-lead) {
  color:#d8e5e9;font-size:1rem !important;line-height:1.85 !important;text-shadow:none;
}
body[data-page] main :is(.hero-new,.hero,.guide-hero) .title-accent-blue {color:#fff;text-shadow:none;}
body[data-page] main :is(.hero-new,.hero,.guide-hero) :is(.title-accent-orange,em) {color:#eca17c;text-shadow:none;}
body[data-page] main :is(.hero-card,.hero-panel,.hero-visual) {
  border:1px solid #a3c5cd40;border-top:2px solid #65b7af;border-radius:10px;
  background:rgba(10,34,47,.88);box-shadow:none;backdrop-filter:blur(8px);
  padding:28px;
}
body[data-page] main :is(.hero-card,.hero-panel) h3 {font-size:1.03rem;font-weight:700;}
body[data-page] main :is(.hero-card,.hero-panel) :is(.metric-item,.hero-list div,li) {border-radius:0;box-shadow:none;background:transparent;}
body[data-page="case"] main .hero-visual {padding:10px;}
body[data-page="case"] main .hero-visual img {border-radius:4px;}
body[data-page="solution"] main .hero {background-color:#102b39;}

/* Actions share size, contrast and focus behavior throughout the site. */
body[data-page] main .btn {
  min-height:50px;padding:12px 22px;border-radius:6px;font-size:.92rem;
  font-weight:750;line-height:1.5;box-shadow:none;transition:background .18s,color .18s;
}
body[data-page] main :is(.btn-primary,.btn.primary) {background:#b64b2d;color:#fff;border:1px solid #b64b2d;box-shadow:none;}
body[data-page] main :is(.btn-primary,.btn.primary):hover {background:#983b23;border-color:#983b23;box-shadow:none;transform:none;}
body[data-page] main :is(.hero-new,.hero,.guide-hero) :is(.btn-primary,.btn.primary) {background:#edab86;border-color:#edab86;color:#172e3b;}
body[data-page] main :is(.hero-new,.hero,.guide-hero) :is(.btn-primary,.btn.primary):hover {background:#f4bd9e;border-color:#f4bd9e;}
body[data-page] main :is(.hero-new,.hero,.guide-hero) :is(.btn-secondary,.btn.secondary) {background:#15364480;border-color:#bfd3d76b;color:#fff;backdrop-filter:none;}
body[data-page] main .btn-secondary:hover {transform:none;}

/* Flat, sharply organized surfaces replace stacked glow and oversized pills. */
body[data-page] main :is(.card,.compare-card,.option-card,.status-card,.screen-card,.gallery-card,.mobile-card,.structure-item,.product-showcase,.panel,.search-card,.search-ai-card,.resource-card,.check,.evidence>div) {
  border-radius:10px;box-shadow:none;border-color:#d7e1e5;
}
body[data-page] main :is(.card,.option-card,.search-card,.search-ai-card) {padding:28px;}
body[data-page] main :is(.card,.compare-card,.option-card)::before {display:none;}
body[data-page] main :is(.card,.compare-card,.option-card):hover {transform:none;border-color:#83b7b2;box-shadow:0 6px 18px #143b4a08;}
body[data-page] main :is(.tag,.badge,.pill) {border-radius:4px;box-shadow:none;}
body[data-page] main :is(.cta,.cta-box,.cta-final,.final-cta,.closing-box,.operation-banner) {
  border-radius:12px;background:#102f3e;box-shadow:none;border:1px solid #294956;
}
body[data-page] main :is(.why-grid,.process-grid,.structure,.case-box) {border-radius:12px;box-shadow:none;}
body[data-page] main :is(.why-grid,.process-grid) .card {border-radius:0;box-shadow:none;}
body[data-page] main :is(.why-value,.step-num,.guide-number) {font-variant-numeric:tabular-nums;}
body[data-page] main .why-value {font-size:1.8rem;color:#096d6c;}
body[data-page] main .faq-list details {border:0;border-bottom:1px solid #d7e1e5;border-radius:0;background:#fff;padding:20px 0;box-shadow:none;}
body[data-page] main .faq-list summary {cursor:pointer;line-height:1.6;padding:4px 8px;}
body[data-page] main .faq-list details[open] {border-bottom-color:#168b86;}

/* Homepage: specialization and real evidence anchor the visual identity. */
body[data-page="home"] main #expertise {padding-block:62px;background:#f0f4f3;border-bottom:1px solid #d7e1e5;}
body[data-page="home"] main .plan-card:nth-child(2) {background:#f1f7f5;border-color:#7baaa3;box-shadow:none;}
body[data-page="home"] main .plan-card:nth-child(2) .tag {background:#17574f;}
body[data-page="home"] main :is(.why-grid,.process-grid) {border:1px solid #d7e1e5;}
body[data-page="home"] main .process-step {min-height:185px;}
body[data-page="home"] main .solution-diagram {border-top:1px solid #ffffff26;}

/* Pricing and contact keep decision-making and input readable. */
body[data-page="pricing"] main .compare-card {padding:30px 26px;}
body[data-page="pricing"] main .compare-card.featured {transform:none;background:#f2f8f6;border:2px solid #427e73;box-shadow:none;}
body[data-page="pricing"] main .package-choice-guide {border-radius:10px;box-shadow:none;}
body[data-page="pricing"] main .option-grid {gap:16px;}
body[data-page="contact"] main .contact-summary {background:#102f3e;border-color:#294956;box-shadow:none;}
body[data-page="contact"] main .consultation-detail {border-radius:6px;background:#ffffff06;box-shadow:none;}
body[data-page="contact"] main .consultation-detail .detail-number {border-radius:4px;}
body[data-page="contact"] main .panel.form {padding:32px;box-shadow:none;}
body[data-page="contact"] main .form :is(input:not([type=checkbox]),textarea,select) {
  width:100%;min-height:48px;margin:6px 0 17px;padding:12px 14px;
  color:#142b3b;background:#f9fbfb;border:1px solid #aabcc4;border-radius:6px;
  font:inherit;font-size:1rem;
}
body[data-page="contact"] main .form textarea {min-height:140px;}
body[data-page="contact"] main .field-label {display:block;font-size:.85rem;font-weight:700;color:#334e5c;}
body[data-page="contact"] main .agree {align-items:flex-start;}
body[data-page="contact"] main .agree input {width:20px;height:20px;accent-color:#08706e;flex-shrink:0;}

/* Editorial resources keep the same identity with a quieter reading layout. */
body[data-page] main .guide-hero {min-height:0;background:#102f3e;padding-block:76px;}
body[data-page] main .guide-hero::after {color:#ffffff06;font-size:24rem;}
body[data-page] main .hero-meta span {border-radius:4px;background:none;color:#c7dedf;}
body[data-page] main .intro {padding-top:68px;}
body[data-page] main .intro-note {background:#173d4a;border-radius:10px;box-shadow:none;}
body[data-page] main .guide-number {color:#317c77;font-size:3.5rem;font-weight:500;letter-spacing:-.06em;}
body[data-page] main .guide-item {padding-block:36px;grid-template-columns:100px minmax(0,1fr);gap:32px;}
body[data-page] main .guide-item {border-radius:10px;background:#fff;box-shadow:none;}
body[data-page] main .guide-item:hover {transform:none;box-shadow:none;}
body[data-page] main .guide-item::before {width:3px;background:#508d84;}
body[data-page] main .guide-copy h2 {font-size:1.6rem;line-height:1.5;}
body[data-page] main .guide-copy>p {line-height:1.9;}
body[data-page] main .checklist {background:#f2f5f5;}
body[data-page] main .checklist h2 {white-space:normal;}
body[data-page] main .check b {border-radius:4px;color:#086863;background:#e3efec;}

body[data-page] > footer {background:#edf2f2;border-top:1px solid #d7e1e5;padding-block:42px;}
body[data-page] .footer-bottom {border-color:#cedbdc;line-height:1.7;}
body[data-page] .cwp-chat-launcher {box-shadow:0 5px 20px #102b3933;}
body[data-page] .cwp-chat-panel {border-radius:12px;}

@media (min-width:861px) and (max-width:1100px) {
  body[data-page] #site-header .nav {gap:0;}
  body[data-page] #site-header .brand {width:188px;min-width:188px;}
  body[data-page] #site-header .nav a {font-size:.8rem;padding-inline:7px;}
  body[data-page] main .hero-grid {gap:30px;grid-template-columns:1.2fr .8fr;}
}
@media (max-width:860px) {
  html {scroll-padding-top:130px;}
  body[data-page] .container {width:calc(100% - 40px);}
  body[data-page] #site-header .nav-wrap {min-height:72px;}
  body[data-page] #site-header .brand .cwp-wordmark {font-size:1.55rem;}
  body[data-page] main :is(.hero-new,.hero,.guide-hero),body[data-page="home"] main .hero-new {min-height:0;padding-block:58px;}
  body[data-page] main .hero-grid {grid-template-columns:minmax(0,1fr);gap:30px;}
  body[data-page] main :is(.hero-new,.hero,.guide-hero) h1 {font-size:clamp(2rem,5.8vw,2.85rem) !important;line-height:1.3 !important;}
  body[data-page] main :is(.hero-card,.hero-panel) {display:block !important;padding:22px;border-radius:8px;}
  body[data-page] main .hero-new::before {background:linear-gradient(100deg,#071b2bea,#0b2d3bba);}
  body[data-page] main :is(.section,.checklist,.closing) {padding-block:60px;}
  body[data-page] main :is(.section-head,.head) {margin-bottom:28px;}
  body[data-page] main :is(.section-head,.head) h2 {font-size:1.85rem !important;}
  body[data-page] main :is(.card,.option-card,.search-card,.search-ai-card) {padding:24px;}
  body[data-page] main :is(.why-grid,.process-grid) .card {padding:24px;}
  body[data-page] main :is(.guide-item,.intro-grid) {grid-template-columns:1fr;gap:18px;}
  body[data-page] main .guide-number {font-size:2.4rem;}
  body[data-page] main .guide-copy h2 {font-size:1.4rem;}
  body[data-page] main .evidence {grid-template-columns:1fr;}
  body[data-page] .mobile-quicknav {background:#fff;border-bottom:1px solid #d7e1e5;box-shadow:none;}
  body[data-page] .mobile-quicknav a {border-radius:4px;min-height:42px;display:inline-flex;align-items:center;}
  body[data-page] .mobile-cta {bottom:0;left:0;right:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#ffffffed;backdrop-filter:blur(12px);border-top:1px solid #d7e1e5;}
  body[data-page] .mobile-cta a {min-height:48px;border-radius:6px;background:#163c48;box-shadow:none;color:#fff;}
  body[data-page]:has(.mobile-cta) {padding-bottom:calc(78px + env(safe-area-inset-bottom));}
}
@media (max-width:480px) {
  body[data-page] .container {width:calc(100% - 36px);}
  body[data-page] main :is(.hero-new,.hero,.guide-hero),body[data-page="home"] main .hero-new {padding-block:44px;}
  body[data-page] main :is(.hero-new,.hero,.guide-hero) h1 {font-size:clamp(1.8rem,7.6vw,2.25rem) !important;}
  body[data-page] main :is(.hero-new,.hero,.guide-hero) .eyebrow {font-size:.68rem;letter-spacing:.045em;}
  body[data-page] main :is(.hero-actions,.actions,.case-actions) {gap:10px;}
  body[data-page] main :is(.hero-actions,.actions,.case-actions) .btn {width:100%;}
  body[data-page] main :is(.section-head,.head) h2 {font-size:1.6rem !important;}
  body[data-page] main :is(.keep,.keep-together) {white-space:normal;}
  body[data-page] main :is(.cta,.cta-box,.cta-final,.final-cta,.closing-box) {padding:28px 22px;}
  body[data-page="contact"] main .panel.form {padding:24px 20px;}
  body[data-page] .footer-bottom {flex-direction:column;gap:8px;}
  body[data-page] main .hero-meta {gap:6px;}
  body[data-page] main .hero-meta span {font-size:.76rem;padding:6px 8px;}
}
@media (prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto !important;}
  body[data-page] *,body[data-page] *::before,body[data-page] *::after {animation:none !important;transition:none !important;}
}

/* Targeted UI fixes: open-menu contrast and numbered problem cards only. */
body[data-page].mobile-menu-open #site-header .nav-toggle {
  background:#123b53;
  border-color:#527c8a;
}
body[data-page].mobile-menu-open #site-header .nav-toggle span {background:#fff;}
body[data-page] #site-header .mobile-menu-nav a {transition-delay:0s;}
body[data-page].mobile-menu-navigating #site-header :is(.mobile-menu-panel,.mobile-menu-overlay,.mobile-menu-nav a,.nav-toggle,.brand) {
  transition:none !important;
}
body[data-page] main .card.problem-item {
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  column-gap:14px;
  align-content:start;
}
body[data-page] main .card.problem-item > .num {
  position:static;
  grid-column:1;
  grid-row:1 / span 2;
  margin:0;
}
body[data-page] main .card.problem-item > :is(h3,p) {
  grid-column:2;
  min-width:0;
}