@charset "utf-8";
/* doc.css — 서브 본문 및 메인 페이지 스타일 */

@font-face {
	font-family: 'Prestige Signature Script  Demo';
	font-style: normal;
	font-weight: 400;
	src: local('Prestige Signature Script  Demo'), url('https://fonts.cdnfonts.com/s/77907/Prestige Signature Script - Demo.woff') format('woff');
}
@font-face {
	font-family: 'Prestige Signature Script Demo';
	font-style: normal;
	font-weight: 400;
	src: local('Prestige Signature Script  Demo'), url('https://fonts.cdnfonts.com/s/77907/Prestige Signature Script - Demo.woff') format('woff');
}

@import url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css");
@import url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/bold/style.css");
@import url("https://unpkg.com/@phosphor-icons/web@2.1.1/src/fill/style.css");

.root_daum_roughmap .wrap_map, .root_daum_roughmap, .direction-map iframe {width:100% !important; height:100% !important;}

/* ==========================================================================
   Page Main (index.php) Styles — 한 줄 작성 규칙 준수
   ========================================================================== */
.page-main {position:relative; width:100%; overflow:hidden;}

/* 1. Hero Visual & Main Visual (bbs/main-visual.php) */
.page-main .hero-visual-full, .page-main .main-visual, .main-visual {position:relative; min-height:clamp(600px, 90vh, 980px); height:clamp(600px, 90vh, 980px); display:flex; align-items:center; overflow:hidden; padding:0; background:#080c18;}
.page-main .hero-visual-slides, .page-main .main-visual .items, .main-visual .items {position:absolute; inset:0; width:100%; height:100%;}
.page-main .main-visual .slick-list, .main-visual .slick-list, .page-main .main-visual .slick-track, .main-visual .slick-track {height:100% !important;}
.page-main .main-visual .slick-slide, .main-visual .slick-slide {height:100% !important;}
.page-main .main-visual .slick-slide > div, .main-visual .slick-slide > div {height:100%;}
.page-main .main-visual .item, .main-visual .item {position:relative; width:100%; height:100%; min-height:100%; overflow:hidden;}
.page-main .hero-visual-slide {position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease; pointer-events:none;}
.page-main .hero-visual-slide.is-active {opacity:1; z-index:1;}
.page-main .hero-visual-slide img, .page-main .main-visual .item.image img, .main-visual .item.image img {width:100%; height:100%; object-fit:cover; object-position:center 55%; transform:scale(1.05); transition:transform 7s ease-out;}
.page-main .hero-visual-slide.is-active img, .page-main .main-visual .slick-current.active .item.image img, .main-visual .slick-current.active .item.image img {transform:scale(1);}
.page-main .hero-visual-overlay, .page-main .main-visual .item.image:after, .main-visual .item.image:after {content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:rgba(0,0,0,0.38); transition:background 0.6s ease;}
.page-main .hero-visual-inner, .page-main .main-visual .caption, .main-visual .caption {position:relative; z-index:3; width:100%; padding-top:var(--header-height); pointer-events:none;}
.page-main .main-visual .caption, .main-visual .caption {position:absolute; inset:0; display:flex; align-items:center; max-width:1444px; margin:0 auto; padding:var(--header-height) var(--container-space) 0; box-sizing:border-box;}
.page-main .main-visual .caption .hero-content, .main-visual .caption .hero-content {max-width:760px; pointer-events:auto;}
.page-main .hero-visual-inner a, .page-main .hero-visual-inner button, .page-main .main-visual .caption a, .main-visual .caption a, .page-main .main-visual .caption button, .main-visual .caption button {pointer-events:auto;}
.page-main .hero-tag {display:inline-flex; align-items:center; gap:8px; padding:6px 14px; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.28); border-radius:999px; font-size:var(--font-size-12); font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.92); margin-bottom:20px; backdrop-filter:blur(8px);}
.page-main .hero-tag::before {content:""; width:6px; height:6px; border-radius:50%; background:var(--color-primary);}
.page-main .hero-title, .page-main .main-visual .caption .txt1, .main-visual .caption .txt1 {font-size:var(--font-size-68); font-weight:800; line-height:1.2em; letter-spacing:-.03em; color:#fff; margin-bottom:20px;}
.page-main .hero-title em, .page-main .main-visual .caption .txt1 em, .main-visual .caption .txt1 em {font-style:normal; color:#fff;}
.page-main .hero-sub, .page-main .main-visual .caption .txt2, .main-visual .caption .txt2 {font-size:var(--font-size-18); font-weight:400; line-height:1.7em; color:rgba(255,255,255,0.85); margin-bottom:36px; max-width:640px;}
.page-main .hero-btns {display:flex; flex-wrap:wrap; gap:12px;}
.page-main .btn-hero-primary {display:inline-flex; align-items:center; justify-content:center; padding:14px 32px; border-radius:var(--radius-sm); background:var(--color-primary); color:#fff; font-size:var(--font-size-15); font-weight:600; line-height:1.3em; transition:var(--transition);}
.page-main .btn-hero-primary:hover {background:var(--color-primary-dark); transform:translateY(-2px);}
.page-main .btn-hero-ghost {display:inline-flex; align-items:center; justify-content:center; padding:14px 32px; border-radius:var(--radius-sm); background:rgba(255,255,255,0.1); border:1.5px solid rgba(255,255,255,0.4); color:#fff; font-size:var(--font-size-15); font-weight:600; line-height:1.3em; backdrop-filter:blur(6px); transition:var(--transition);}
.page-main .btn-hero-ghost:hover {background:#fff; color:var(--color-ink); transform:translateY(-2px);}
.page-main .hero-slide-dots, .main-visual .hero-slide-dots {position:absolute; right:var(--container-space); top:50%; transform:translateY(-50%); z-index:10; display:flex; flex-direction:column; gap:12px;}
.page-main .hero-slide-dots .slick-dots, .main-visual .hero-slide-dots .slick-dots {display:flex; flex-direction:column; gap:12px; margin:0; padding:0; list-style:none;}
.page-main .hero-slide-dots .slick-dots li, .main-visual .hero-slide-dots .slick-dots li {margin:0; line-height:0;}
.page-main .hero-slide-dot, .main-visual .hero-slide-dots .slick-dots button {display:block; width:10px; height:10px; padding:0; border:none; border-radius:50%; background:rgba(255,255,255,0.4); font-size:0; text-indent:-9999px; cursor:pointer; transition:all 0.3s ease;}
.page-main .hero-slide-dot:hover, .main-visual .hero-slide-dots .slick-dots button:hover {background:rgba(255,255,255,0.8);}
.page-main .hero-slide-dot.is-active, .main-visual .hero-slide-dots .slick-dots .slick-active button {height:28px; border-radius:10px; background:#fff;}
.hero-scroll {position:absolute; right:40px; bottom:0; top:auto; left:auto; z-index:4; transform:none; display:flex; flex-direction:column; align-items:center; gap:14px; color:rgba(255,255,255,0.95); font-size:13px; font-weight:700; letter-spacing:0.22em; text-shadow:0 1px 12px rgba(0,0,0,0.35); transition:color var(--transition), transform var(--transition);}
.hero-scroll-line {position:relative; display:block; width:2px; height:96px; background:rgba(255,255,255,0.35); border-radius:2px; overflow:hidden;}
.hero-scroll-line::after {content:""; position:absolute; left:0; width:100%; height:32px; background:linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0.15) 100%); border-radius:2px; animation:heroScrollPulse 2.2s cubic-bezier(0.45,0,0.55,1) infinite;}
.hero-scroll-label {writing-mode:vertical-rl; text-orientation:mixed; transform:rotate(180deg); text-transform:uppercase; white-space:nowrap; font-size:13px; animation:heroScrollLabel 2.2s ease-in-out infinite;}
.hero-scroll:hover {color:#fff; transform:translateY(2px);}
.hero-scroll:hover .hero-scroll-line {background:rgba(255,255,255,0.5);}
@keyframes heroScrollPulse {0%{top:0;opacity:0;}12%{opacity:1;}72%{top:calc(100% - 32px);opacity:1;}100%{top:calc(100% - 32px);opacity:0;}}
@keyframes heroScrollLabel {0%,100%{opacity:0.78;}50%{opacity:1;}}
.page-main .main-visual .visual-func, .main-visual .visual-func {display:none;}

/* 2. About Section */
.page-main .about-section {padding:clamp(60px, calc(100 / var(--inner) * 100vw), 100px) 0 clamp(80px, calc(120 / var(--inner) * 100vw), 120px); background:#fff;}
.page-main .about-inner {display:flex; flex-direction:column; align-items:center; text-align:center;}
.page-main .about-intro {max-width:900px; margin-bottom:36px;}
.page-main .about-sec-title {display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:var(--font-size-16); font-weight:700; color:var(--color-ink); letter-spacing:-.01em; line-height:1.2em; margin-bottom:16px;}
.page-main .about-sec-title::after {content:""; width:6px; height:6px; border-radius:50%; background:var(--color-primary);}
.page-main .about-sec-lead {font-size:var(--font-size-38); font-weight:700; color:var(--color-ink); line-height:1.35em; letter-spacing:-.03em;}
.page-main .about-visual {position:relative; width:100%; margin-bottom:0;}
.page-main .about-brand {--about-brand-h:440px; position:relative; width:100%; max-width:100%; height:var(--about-brand-h); border-radius:20px; overflow:hidden;}
.page-main .about-mask-label {display:block; position:absolute; top:0; left:0; width:100%; height:100%; font-family:"Pretendard", "Arial Black", "Helvetica Neue", sans-serif; font-size:clamp(88px, 15.8vw, 280px); font-weight:900; line-height:var(--about-brand-h); text-align:center; letter-spacing:-0.04em; white-space:nowrap; color:transparent; -webkit-text-fill-color:transparent; background-image:url("/images/plan/about-semiconductor.jpg"); background-repeat:no-repeat; background-size:cover; background-position:50% 50%; -webkit-background-clip:text; background-clip:text; z-index:2; pointer-events:none; user-select:none;}
.page-main .about-zoom-circle {display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-size:cover; background-position:50% 50%; clip-path:circle(0% at 50% 50%); transition:none; z-index:1;}
.page-main .about-zoom-circle.about-zc-on {clip-path:circle(100% at 50% 50%);}
.page-main .about-zc1 {background-image:url("/images/plan/about-semiconductor.jpg");}
.page-main .about-zc2 {background-image:url("/images/plan/about-smart-building.jpg");}
.page-main .about-zc3 {background-image:url("/images/plan/about-energy-infrastructure.jpg");}
.page-main .about-tabs {display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:32px 0 36px; padding:0;}
.page-main .about-tab {padding:12px 28px; border:1px solid #242424; border-radius:999px; background:#fff; font-size:var(--font-size-14); font-weight:600; line-height:1.4em; color:#242424; cursor:pointer; white-space:nowrap; transition:var(--transition);}
.page-main .about-tab:hover {background:var(--color-primary-soft); color:var(--color-primary); border-color:var(--color-primary);}
.page-main .about-tab.is-active {background:var(--color-primary); border-color:var(--color-primary); color:#fff;}
.page-main .about-panel {display:flex; flex-direction:column; align-items:center;}
.page-main .about-panel-link {display:inline-flex; align-items:center; gap:6px; font-size:var(--font-size-15); font-weight:600; color:var(--color-ink); transition:color var(--transition);}
.page-main .about-panel-link::after {content:"→"; font-size:var(--font-size-16); line-height:1em; transition:transform var(--transition);}
.page-main .about-panel-link:hover {color:var(--color-primary);}
.page-main .about-panel-link:hover::after {transform:translateX(4px);}

/* 3. Industries Section (Accordion Cards) */
.page-main .industries-section {padding:clamp(60px, calc(88 / var(--inner) * 100vw), 88px) 0 clamp(70px, calc(100 / var(--inner) * 100vw), 100px); background:var(--color-bg-soft); overflow:hidden;}
.page-main .industries-head {text-align:center; margin-bottom:48px;}
.page-main .industries-sec-title {display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:var(--font-size-16); font-weight:700; color:var(--color-ink); letter-spacing:-.01em; margin-bottom:16px;}
.page-main .industries-sec-title::after {content:""; width:6px; height:6px; border-radius:50%; background:var(--color-primary);}
.page-main .industries-sec-lead {font-size:var(--font-size-38); font-weight:700; color:var(--color-ink); line-height:1.35em; letter-spacing:-.03em;}
.page-main .industries-stage {width:100%;}
.page-main .industries-track {display:flex; align-items:stretch; gap:14px; width:100%; height:clamp(400px, 34vw, 480px);}
.page-main .industry-card {position:relative; flex:0 0 120px; width:120px; min-width:0; border-radius:20px; background:#080c18; overflow:hidden; cursor:pointer; transition:flex 0.55s cubic-bezier(0.22,1,0.36,1), width 0.55s cubic-bezier(0.22,1,0.36,1);}
.page-main .industry-card.is-active {flex:1 1 auto; width:auto; cursor:default; box-shadow:0 20px 44px rgba(30,58,95,0.14), 0 6px 16px rgba(17,24,39,0.08);}
.page-main .industry-card-media {position:absolute; inset:0;}
.page-main .industry-card-media img {width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(1); transition:transform 0.55s cubic-bezier(0.22,1,0.36,1);}
.page-main .industry-card:hover .industry-card-media img {transform:scale(1.08);}
.page-main .industry-card.is-active .industry-card-media img {transform:scale(1.04);}
.page-main .industry-card.is-active:hover .industry-card-media img {transform:scale(1.08);}
.page-main .industry-card-overlay {position:absolute; inset:0; background:rgba(17,24,39,0.28); transition:background 0.4s ease;}
.page-main .industry-card.is-active .industry-card-overlay {background:linear-gradient(90deg, rgba(17,24,39,0.62) 0%, rgba(17,24,39,0.3) 46%, rgba(17,24,39,0.08) 100%);}
.page-main .industry-card:hover .industry-card-overlay {background:rgba(17,24,39,0.2);}
.page-main .industry-card.is-active:hover .industry-card-overlay {background:linear-gradient(90deg, rgba(17,24,39,0.58) 0%, rgba(17,24,39,0.26) 44%, rgba(17,24,39,0.04) 100%);}
.page-main .industry-card-click {position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; padding:24px 8px; font-size:var(--font-size-15); font-weight:700; letter-spacing:0.06em; color:#fff; writing-mode:vertical-rl; text-orientation:mixed; pointer-events:none; opacity:1; transition:opacity 0.3s ease; text-shadow:0 1px 8px rgba(0,0,0,0.35);}
.page-main .industry-card.is-active .industry-card-click {opacity:0;}
.page-main .industry-card-body {position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; height:100%; padding:28px 40px 32px; color:#fff; opacity:0; pointer-events:none; transition:opacity 0.25s ease;}
.page-main .industry-card.is-active .industry-card-body {opacity:1; pointer-events:auto; transition-delay:0.18s;}
.page-main .industry-card-badge {display:inline-flex; align-items:center; padding:8px 14px; border:none; border-radius:999px; background:var(--color-primary); font-size:var(--font-size-13); font-weight:600; letter-spacing:0.02em; color:#fff; margin:0 0 16px;}
.page-main .industry-card.is-active .industry-card-badge {margin-bottom:24px;}
.page-main .industry-card-title {max-width:52%; font-size:var(--font-size-42); font-weight:700; line-height:1.2em; letter-spacing:-0.03em; margin:0 0 10px; word-break:keep-all; color:#fff;}
.page-main .industry-card-sub {max-width:260px; font-size:var(--font-size-20); font-weight:600; line-height:1.45em; color:rgba(255,255,255,0.92); margin:0 0 10px; word-break:keep-all;}
.page-main .industry-card-desc {max-width:260px; font-size:var(--font-size-15); line-height:1.65em; color:rgba(255,255,255,0.72); margin:0 0 18px; word-break:keep-all;}
.page-main .industry-card-more {margin-top:auto; align-self:flex-end; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 28px; border:1.5px solid rgba(255,255,255,0.55); border-radius:100px; background:rgba(255,255,255,0.08); backdrop-filter:blur(6px); font-size:var(--font-size-15); font-weight:600; color:#fff; text-decoration:none; white-space:nowrap; transition:var(--transition);}
.page-main .industry-card-more::after {content:"→"; font-size:var(--font-size-16); line-height:1em; transition:transform var(--transition);}
.page-main .industry-card-more:hover {background:#fff; border-color:#fff; color:var(--color-primary); box-shadow:0 8px 20px rgba(17,24,39,0.12);}
.page-main .industry-card-more:hover::after {transform:translateX(4px);}

/* 4. Performance Section */
.page-main .performance-section {padding:clamp(60px, calc(90 / var(--inner) * 100vw), 90px) 0 clamp(70px, calc(100 / var(--inner) * 100vw), 100px); background:#fff;}
.page-main .perf-main-head {text-align:center; margin-bottom:36px;}
.page-main .perf-main-sec-title {display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:var(--font-size-16); font-weight:700; color:var(--color-ink); letter-spacing:-.01em; margin-bottom:16px;}
.page-main .perf-main-sec-title::after {content:""; width:6px; height:6px; border-radius:50%; background:var(--color-primary);}
.page-main .perf-main-sec-lead {font-size:var(--font-size-38); font-weight:700; color:var(--color-ink); line-height:1.35em; letter-spacing:-.03em;}
.page-main .perf-main-tabs {display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:32px;}
.page-main .perf-main-tab {padding:10px 22px; border-radius:999px; background:#fff; border:1px solid #ddd; font-size:var(--font-size-14); font-weight:600; color:#505050; cursor:pointer; transition:var(--transition);}
.page-main .perf-main-tab:hover {border-color:var(--color-primary); color:var(--color-primary);}
.page-main .perf-main-tab.is-active {background:var(--color-primary); border-color:var(--color-primary); color:#fff;}
.page-main .perf-carousel {position:relative; width:100%;}
.page-main .perf-carousel-viewport {position:relative; width:100%; padding: 0 22px}
.page-main .perf-carousel-arrow {position:absolute; top:50%; transform:translateY(-50%); z-index:10; width:44px; height:44px; border-radius:50%; background:#fff; border:1px solid #ddd; color:var(--color-ink); font-size:var(--font-size-18); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,0.08); transition:var(--transition);}
.page-main .perf-carousel-arrow:hover:not(:disabled) {background:var(--color-primary); border-color:var(--color-primary); color:#fff;}
.page-main .perf-carousel-arrow:disabled {opacity:0.3; cursor:default;}
.page-main .perf-carousel-prev {left:0;}
.page-main .perf-carousel-next {right:0;}
.page-main .perf-main-cards {display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; padding:4px 2px 8px;}
.page-main .perf-main-cards::-webkit-scrollbar {display:none;}
.page-main .perf-card {display:flex; flex-direction:column; flex:0 0 calc((100% - 48px) / 4); width:calc((100% - 48px) / 4); min-width:0; scroll-snap-align:start; background:#fff; border:1px solid var(--color-border); border-radius:16px; overflow:hidden; box-shadow:0 4px 16px rgba(17,24,39,0.04); transition:var(--transition);}
.page-main .perf-card:hover {border-color:rgba(17,24,39,0.12); box-shadow:0 8px 24px rgba(17,24,39,0.08); transform:translateY(-3px);}
.page-main .perf-card-thumb {aspect-ratio:16/10; overflow:hidden; background:#e5e7eb;}
.page-main .perf-card-thumb img {width:100%; height:100%; object-fit:cover; object-position:center; transition:transform 0.45s ease;}
.page-main .perf-card:hover .perf-card-thumb img {transform:scale(1.05);}
.page-main .perf-card-body {display:flex; flex-direction:column; gap:10px; flex:1; padding:18px 20px 20px;}
.page-main .perf-card-cat {display:inline-flex; align-items:center; align-self:flex-start; padding:4px 10px; border-radius:4px; background:var(--color-primary-soft); font-size:var(--font-size-12); font-weight:700; letter-spacing:-0.01em; color:var(--color-primary); margin:0;}
.page-main .perf-card-no {display:none;}
.page-main .perf-card-title {font-size:var(--font-size-17); font-weight:700; line-height:1.45em; letter-spacing:-0.02em; color:var(--color-ink); margin:0; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; height:calc(1.45em * 2); word-break:keep-all; overflow-wrap:break-word; transition:color var(--transition);}
.page-main .perf-card:hover .perf-card-title {color:var(--color-primary);}
.page-main .perf-card-meta {display:flex; flex-direction:column; gap:6px; margin-top:auto; font-size:var(--font-size-13); line-height:1.45em; color:var(--color-ink-muted);}
.page-main .perf-card-meta span {display:inline-flex; align-items:center; gap:6px;}
.page-main .perf-card-meta strong {font-weight:600; color:var(--color-ink);}
.page-main .perf-scroll {display:flex; align-items:center; width:100%; height:18px; margin-top:28px; cursor:pointer;}
.page-main .perf-scroll-track {position:relative; display:block; width:100%; height:2px; background:rgba(2,7,233,0.12);}
.page-main .perf-scroll-thumb {position:absolute; top:50%; left:0; height:4px; width:25%; background:var(--color-primary); transform:translateY(-50%); border-radius:2px; pointer-events:none;}

/* 5. Community Section */
.page-main .community-section {padding:clamp(60px, calc(90 / var(--inner) * 100vw), 90px) 0 clamp(70px, calc(100 / var(--inner) * 100vw), 100px); background:var(--color-bg-band);}
.page-main .community-layout {display:grid; grid-template-columns:minmax(280px, 420px) minmax(0, 1fr); align-items:center; gap:clamp(32px, 5vw, 72px);}
.page-main .community-intro .community-label {display:inline-flex; align-items:center; gap:8px; font-size:var(--font-size-16); font-weight:700; color:var(--color-ink); letter-spacing:-.01em; margin-bottom:16px;}
.page-main .community-intro .community-label::after {content:""; width:6px; height:6px; border-radius:50%; background:var(--color-primary);}
.page-main .community-intro .community-lead {font-size:var(--font-size-38); font-weight:700; line-height:1.35em; letter-spacing:-.03em; color:var(--color-ink); margin-bottom:16px;}
.page-main .community-intro .community-desc {max-width:360px; font-size:var(--font-size-15); line-height:1.7em; color:var(--color-ink-muted); margin:0; word-break:keep-all;}
.page-main .community-cards {display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px;}
.page-main .community-card {position:relative; display:flex; flex-direction:column; min-height:320px; padding:32px 28px; border-radius:20px; background:#fff; border:1px solid var(--color-border); text-decoration:none; color:var(--color-ink); overflow:hidden; transition:transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);}
.page-main .community-card:hover {transform:translateY(-4px); background:var(--color-primary); border-color:transparent; color:#fff; box-shadow:0 20px 48px rgba(2,7,233,0.28);}
.page-main .community-card-head {display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px;}
.page-main .community-card-title {font-size:var(--font-size-28); font-weight:700; line-height:1.3em; letter-spacing:-.02em; margin:0;}
.page-main .community-card-plus {display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--color-primary-soft); color:var(--color-primary); font-size:var(--font-size-18); line-height:1em; opacity:0; transform:scale(0.85); transition:opacity var(--transition), transform var(--transition), background var(--transition), color var(--transition);}
.page-main .community-card-plus .ph {font-size:var(--font-size-18); line-height:1em;}
.page-main .community-card:hover .community-card-plus {opacity:1; transform:scale(1); background:#fff; color:var(--color-primary);}
.page-main .community-card-desc {max-width:240px; font-size:var(--font-size-14); line-height:1.65em; color:var(--color-ink-muted); margin:0; transition:color var(--transition);}
.page-main .community-card:hover .community-card-desc {color:rgba(255,255,255,0.88);}
.page-main .community-card-icon {display:flex; align-items:center; justify-content:flex-end; margin-top:auto; padding-top:28px; font-size:var(--font-size-64); color:var(--color-primary); line-height:1em; transform-origin:bottom right; transition:color var(--transition), transform 0.35s cubic-bezier(0.22,1,0.36,1);}
.page-main .community-card-icon .ph {font-size:var(--font-size-64); line-height:1em;}
.page-main .community-card:hover .community-card-icon {color:rgba(255,255,255,0.88); transform:scale(1.08);}
.page-main .community-card:active .community-card-plus {background:#fff; color:var(--color-primary);}

/* ==========================================================================
   Page About 1: CEO인사말 (about/greeting.php) Styles
   ========================================================================== */
.page-about-greeting {position:relative; width:100%;}
.greeting-head {text-align:center; max-width:none; margin:0 auto 60px;}
.sec-title {margin-bottom:0; font-size:clamp(32px, 4vw, 44px); padding-left:0; font-weight:700; letter-spacing:-0.02em; color:var(--color-ink); text-align:center;}
.sec-title::after {content:""; display:block; width:48px; height:3px; background:var(--color-primary); margin:40px auto 0; border-radius:2px;}
.greeting-wrap {display:flex; flex-direction:column; gap:0; max-width:none; margin:0 auto;}
.greeting-intro-block {display:flex; flex-direction:row; align-items:stretch; gap:48px; width:100%; max-width:1600px; margin:0 auto;}
.greeting-visual {flex:0 0 50%; max-width:720px; margin:0; border-radius:24px; overflow:hidden; align-self:stretch; min-height:0;}
.greeting-visual img {display:block; width:100%; height:100%; object-fit:cover; object-position:center center;}
.greeting-intro-copy {flex:1 1 0; min-width:0; display:flex; flex-direction:column; justify-content:center; text-align:left;}
.greeting-intro-lead {margin:0; font-size:var(--font-size-28); font-weight:600; line-height:1.55em; letter-spacing:-0.02em; color:#242424;}
.greeting-intro-accent {font-weight:700; color:var(--color-primary);}
.greeting-intro-desc {margin:24px 0 0; max-width:none; font-size:var(--font-size-18); font-weight:400; line-height:1.78em; letter-spacing:-0.02em; color:#454545; word-break:keep-all;}
.greeting-intro-desc + .greeting-intro-desc {margin-top:16px;}
.greeting-sign {display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:0 16px; margin-top:40px; padding-top:8px;}
.greeting-sign-company {margin:0; font-size:var(--font-size-18); font-weight:600; line-height:1.4em; letter-spacing:-0.02em; color:#242424;}
.greeting-sign-name {display:inline-flex; align-items:center; gap:20px; margin:0; font-size:var(--font-size-20); font-weight:500; line-height:1em; letter-spacing:-0.02em; color:#242424;}
.greeting-sign-ceo {font-weight:700; font-size:var(--font-size-22); line-height:1.2em; letter-spacing:0.08em;}
.greeting-sign-ceo-en {font-family:"Prestige Signature Script  Demo", "Prestige Signature Script Demo", "Prestige Signature Script - Demo", cursive; font-size:var(--font-size-38); font-weight:400; font-style:normal; line-height:1em; letter-spacing:0.02em; color:#242424; transform:translateY(3px);}

/* ==========================================================================
   Page About 2: 회사연혁 (about/history.php) Styles
   ========================================================================== */
.sub-page-head {text-align:center; max-width:none; margin:0 auto 60px;}
.sub-page-head .sec-title {margin-bottom:0; font-size:var(--font-size-44); line-height:1.2em; padding-left:0; font-weight:700; letter-spacing:-0.02em; color:var(--color-ink); text-align:center;}
.sub-page-head .sec-title::after {content:""; display:block; width:48px; height:3px; background:var(--color-primary); margin:var(--space-40) auto 0; border-radius:2px;}
.page-about-history {position:relative; width:100%;}
.history-layout {width:100%; max-width:1400px; margin:0 auto; padding-bottom:100px;}
.history-track {width:100%; position:relative;}
.history-line {position:absolute; left:50%; top:8px; bottom:0; width:2px; transform:translateX(-50%); pointer-events:none; z-index:0;}
.history-line-bg, .history-line-fill {position:absolute; left:0; top:0; width:100%; border-radius:2px;}
.history-line-bg {height:100%; background:#ddd;}
.history-line-fill {height:0; background:var(--color-primary); box-shadow:0 0 8px rgba(2,7,233,0.25);}
.history-timeline {list-style:none; margin:0; padding:0; position:relative; z-index:1;}
.history-entry {display:grid; grid-template-columns:minmax(0, 1fr) 17px minmax(0, 1fr); column-gap:48px; align-items:start; padding-bottom:80px; opacity:0; transform:translateY(48px); transition:opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); will-change:opacity, transform;}
.history-entry:last-child {padding-bottom:0;}
.history-entry.is-visible {opacity:1; transform:translateY(0);}
.history-marker {grid-column:2; grid-row:1; justify-self:center; position:relative; z-index:1;}
.history-dot {display:block; width:17px; height:17px; border-radius:50%; background:#fff; border:4px solid var(--color-primary); box-sizing:border-box; transform:scale(0.4); opacity:0; transition:transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.12s, opacity 0.45s ease 0.12s;}
.history-entry.is-visible .history-dot {transform:scale(1); opacity:1;}
.history-entry .history-item {grid-column:3; grid-row:1; min-width:0;}
.history-entry.is-left .history-item {grid-column:1; text-align:right;}
.history-date {margin:0 0 16px; font-size:var(--font-size-28); font-weight:700; line-height:1em; letter-spacing:-0.01em; color:#242424;}
.history-text {margin:0; font-size:var(--font-size-18); font-weight:500; line-height:1.56em; color:#686868;}

/* 회사연혁 — Swiper 가로 타임라인 */
.page-about-history.is-swiper .history-layout {max-width:1400px; padding-bottom:clamp(60px, calc(100 / var(--inner) * 100vw), 100px);}
.history-swiper-wrap {width:100%;}
.history-swiper-head {display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:32px;}
.history-swiper-era {min-width:0;}
.history-swiper-active-year {margin:0 0 8px; font-size:clamp(40px, 5vw, 56px); font-weight:800; line-height:1em; letter-spacing:-0.03em; color:var(--color-primary);}
.history-swiper-range {margin:0; font-size:var(--font-size-15); font-weight:600; letter-spacing:0.02em; color:var(--color-ink-muted);}
.history-swiper-count {display: none; margin:0; flex-shrink:0; font-size:var(--font-size-15); font-weight:600; color:var(--color-ink-light);}
.history-swiper-current {color:var(--color-primary);}
.history-swiper-controls {position:relative; display:flex; align-items:stretch; gap:0; margin-bottom: -22px;}
.history-timeline-axis {display: none; position:absolute; left:0; right:0; top:100%; height:2px;  background:#ddd; transform:translateY(-50%); z-index:0; pointer-events:none;}
.history-timeline-axis-fill {display:block; height:100%; width:0; background:var(--color-primary); box-shadow:0 0 8px rgba(2,7,233,0.25); transition:width 0.35s ease;}
.history-swiper {position:relative; z-index:1; flex:1; min-width:0; overflow:visible;}
.history-swiper .swiper-slide {height:auto; opacity:0.42; transition:opacity 0.35s ease;}
.page-about-history.is-swiper .swiper-slide.is-slide-inview {opacity:1; z-index:2;}
.history-slide-inner {display:grid; grid-template-rows:1fr auto auto 17px; align-items:end; justify-items:center; width:100%; height:100%;}
.page-about-history.is-swiper .history-card {grid-row:1; display:flex; flex-direction:column; align-self:end; width:100%; min-height:0; margin-bottom:12px; padding:18px 16px; background:#fff; border:1px solid var(--color-border); border-radius:16px; box-shadow:0 4px 16px rgba(17,24,39,0.05); transition:border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;}
.page-about-history.is-swiper .is-slide-inview .history-card {border-color:rgba(2,7,233,0.35); box-shadow:0 10px 28px rgba(2,7,233,0.12); transform:translateY(-2px);}
.history-slide-stem {grid-row:2; display:block; width:2px; height:20px; background:#ddd; flex-shrink:0; transition:background 0.25s ease;}
.page-about-history.is-swiper .is-slide-inview .history-slide-stem {background:var(--color-primary);}
.history-slide-year {grid-row:3; margin:0 0 8px; font-size:var(--font-size-13); font-weight:700; letter-spacing:0.04em; color:var(--color-ink-light); transition:color 0.25s ease;}
.page-about-history.is-swiper .is-slide-inview .history-slide-year {color:var(--color-primary);}
.history-slide-dot {grid-row:4; display:block; width:17px; height:17px; border-radius:50%; background:#fff; border:4px solid var(--color-primary); box-sizing:border-box; transform:translateY(50%); transition:transform 0.3s ease, box-shadow 0.3s ease;}
.page-about-history.is-swiper .is-slide-inview .history-slide-dot {transform:translateY(50%) scale(1.15); box-shadow:0 0 0 6px rgba(2,7,233,0.12);}
.history-slide-marker {display:contents;}
.page-about-history.is-swiper .history-date {margin:0 0 10px; font-size:var(--font-size-20); font-weight:700; line-height:1.2em; color:#242424;}
.page-about-history.is-swiper .history-text {font-size:var(--font-size-15); font-weight:500; line-height:1.6em; color:#686868; word-break:keep-all;}
.history-swiper-arrow {flex-shrink:0; display:inline-flex; display: none; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid var(--color-border); border-radius:50%; background:#fff; color:var(--color-ink); font-size:var(--font-size-20); line-height:1em; cursor:pointer; box-shadow:0 4px 16px rgba(17,24,39,0.08); transition:background var(--transition), color var(--transition), border-color var(--transition), opacity var(--transition); z-index:2;}
.history-swiper-arrow .ph {line-height:1em;}
.history-swiper-arrow:hover:not(.swiper-button-disabled) {background:var(--color-primary); border-color:var(--color-primary); color:#fff;}
.history-swiper-arrow.swiper-button-disabled {opacity:0.35; cursor:default;}
.history-swiper-progress {position:relative; height:4px; margin-top:20px; background:rgba(2,7,233,0.1); border-radius:999px; z-index: 0; overflow:hidden;}
.history-swiper-progress .swiper-pagination-progressbar-fill {background:var(--color-primary); border-radius:999px;}

/* 회사연혁 — 가로 전체 보기 타임라인 */
.page-about-history.is-horizontal .history-layout {max-width:1400px; padding-bottom:clamp(60px, calc(100 / var(--inner) * 100vw), 100px);}
.history-horizontal-head {margin-bottom:40px; text-align:center;}
.history-horizontal-era {margin:0 0 8px; font-size:clamp(32px, 4vw, 44px); font-weight:800; line-height:1.1em; letter-spacing:-0.03em; color:var(--color-primary);}
.history-horizontal-range {margin:0; font-size:var(--font-size-15); font-weight:600; letter-spacing:0.04em; color:var(--color-ink-muted);}
.history-horizontal-board {width:100%;}
.history-horizontal-list {list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:20px 16px;}
.history-horizontal-item {min-width:0;}
.page-about-history.is-horizontal .history-card {display:flex; flex-direction:column; width:100%; height:100%; padding:16px 14px; background:#fff; border:1px solid var(--color-border); border-radius:14px; box-shadow:0 4px 16px rgba(17,24,39,0.05); transition:border-color 0.25s ease, box-shadow 0.25s ease;}
.page-about-history.is-horizontal .history-card:hover {border-color:rgba(2,7,233,0.35); box-shadow:0 10px 28px rgba(2,7,233,0.12);}
.page-about-history.is-horizontal .history-date {margin:0 0 8px; font-size:var(--font-size-18); font-weight:700; line-height:1.2em; color:#242424;}
.page-about-history.is-horizontal .history-text {margin:0; font-size:var(--font-size-14); font-weight:500; line-height:1.55em; color:#686868; word-break:keep-all;}

/* 회사연혁 — 3열 그리드 타임라인 (정적) */
.page-about-history.is-grid .history-layout {max-width:1400px; padding-bottom:clamp(60px, calc(100 / var(--inner) * 100vw), 100px);}
.history-grid {width:100%;}
.history-stack {display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); column-gap:24px; row-gap:0; align-items:start;}
.history-unit {display:flex; flex-direction:column; align-items:stretch; min-width:0;}
.history-unit:nth-child(1) {grid-column:1; grid-row:1;}
.history-unit:nth-child(2) {grid-column:1; grid-row:2;}
.history-unit:nth-child(3) {grid-column:1; grid-row:3;}
.history-unit:nth-child(4) {grid-column:1; grid-row:4;}
.history-unit:nth-child(5) {grid-column:1; grid-row:5;}
.history-unit:nth-child(6) {grid-column:1; grid-row:6;}
.history-unit:nth-child(7) {grid-column:2; grid-row:1;}
.history-unit:nth-child(8) {grid-column:2; grid-row:2;}
.history-unit:nth-child(9) {grid-column:2; grid-row:3;}
.history-unit:nth-child(10) {grid-column:2; grid-row:4;}
.history-unit:nth-child(11) {grid-column:2; grid-row:5;}
.history-unit:nth-child(12) {grid-column:2; grid-row:6;}
.history-unit:nth-child(13) {grid-column:3; grid-row:1;}
.history-unit:nth-child(14) {grid-column:3; grid-row:2;}
.history-unit:nth-child(15) {grid-column:3; grid-row:3;}
.history-unit:nth-child(16) {grid-column:3; grid-row:4;}
.page-about-history.is-grid .history-card {display:flex; flex-direction:column; width:100%; padding:22px 24px; background:#fff; border:1px solid rgba(2,7,233,0.12); border-radius:16px; box-shadow:0 4px 20px rgba(2,7,233,0.08), 0 1px 4px rgba(17,24,39,0.04); transition:border-color 0.25s ease, box-shadow 0.25s ease;}
.page-about-history.is-grid .history-card:hover {border-color:rgba(2,7,233,0.28); box-shadow:0 8px 28px rgba(2,7,233,0.14), 0 2px 8px rgba(17,24,39,0.06);}
.page-about-history.is-grid .history-date {margin:0 0 10px; font-size:var(--font-size-22); font-weight:700; line-height:1.2em; letter-spacing:-0.01em; color:#242424;}
.page-about-history.is-grid .history-text {margin:0; font-size:var(--font-size-16); font-weight:500; line-height:1.6em; color:#686868; word-break:keep-all;}
.history-connector {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; padding:6px 0; flex-shrink:0;}
.history-unit--last .history-connector {display:none;}
.history-connector-line {display:block; width:2px; height:14px; background:var(--color-primary); border-radius:2px;}
.history-connector-year {display:block; padding:4px 0; font-size:var(--font-size-14); font-weight:700; line-height:1em; letter-spacing:0.02em; color:var(--color-primary);}

/* ==========================================================================
   Page About 3: 자격증서 & Tech 면허/품질 Styles

   ========================================================================== */
.page-about-certificates, .page-tech-license, .page-tech-quality {position:relative; width:100%;}
.page-about-certificates .certificates-section, .page-tech-license .certificates-section, .page-tech-quality .certificates-section {padding-bottom:clamp(60px, calc(100 / var(--inner) * 100vw), 100px);}
.cert-grid {display:grid; grid-template-columns:repeat(4, 1fr); gap:32px; width:100%;}
.cert-card {display:flex; flex-direction:column; align-items:center; gap:16px; margin:0;}
.cert-card-img {width:100%; max-width:320px; aspect-ratio:320/427; background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; display:flex; align-items:center; justify-content:center; padding:12px; cursor:pointer; transition:var(--transition);}
.cert-card-img:hover {border-color:var(--color-primary); box-shadow:0 8px 24px rgba(2,7,233,0.12); transform:translateY(-3px);}
.cert-card-img img {max-width:100%; max-height:100%; object-fit:contain; display:block;}
.cert-card figcaption {font-size:var(--font-size-16); font-weight:600; line-height:1.4em; color:var(--color-ink); text-align:center; word-break:keep-all;}

/* 인증서 라이트박스 모달 */
body.cert-modal-open {overflow:hidden;}
.cert-modal {position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; padding:24px; box-sizing:border-box;}
.cert-modal[hidden] {display:none !important;}
.cert-modal-backdrop {position:absolute; inset:0; background:rgba(0,0,0,0.72);}
.cert-modal-panel {position:relative; z-index:1; display:flex; align-items:center; gap:12px; width:auto; max-width:min(640px,100%); max-height:calc(100vh - 48px);}
.cert-modal-content {flex:0 1 auto; width:auto; max-width:100%; display:flex; flex-direction:column; align-items:center; gap:16px;}
.cert-modal-img-wrap {width:min(440px,calc((100vh - 180px) * 320 / 427)); max-width:calc(100vw - 140px); aspect-ratio:320/427; max-height:calc(100vh - 180px); display:flex; align-items:center; justify-content:center; background:#fff; border-radius:8px; padding:12px; box-sizing:border-box; box-shadow:0 20px 60px rgba(0,0,0,0.35);}
.cert-modal-img {display:block; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain;}
.cert-modal-caption {margin:0; max-width:640px; font-size:18px; font-weight:500; line-height:26px; text-align:center; color:#fff; word-break:keep-all;}
.cert-modal-close {position:absolute; top:-48px; right:0; width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border:none; border-radius:50%; background:var(--color-primary); color:#fff; cursor:pointer; transition:background var(--transition);}
.cert-modal-close .ph {font-size:22px;}
.cert-modal-close:hover {background:var(--color-primary-dark);}
.cert-modal-close:focus-visible {outline:2px solid #fff; outline-offset:2px;}
.cert-modal-nav {flex:0 0 auto; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border:none; border-radius:50%; background:rgba(255,255,255,0.16); color:#fff; cursor:pointer; transition:background var(--transition), opacity var(--transition);}
.cert-modal-nav .ph {font-size:18px;}
.cert-modal-nav:hover:not(:disabled) {background:rgba(255,255,255,0.28);}
.cert-modal-nav:disabled {opacity:0.35; cursor:default;}
.cert-modal-nav:focus-visible {outline:2px solid #fff; outline-offset:2px;}
#view-contact .sub-page-head {margin-bottom:40px;}
.contact-layout {display:grid; grid-template-columns:minmax(0,700px) minmax(0,1fr); grid-template-areas:"map info"; align-items:center; gap:clamp(40px,6vw,90px); width:100%; max-width:var(--sub-inner-max); margin:0 auto;}
.contact-map-visual {grid-area:map; min-width:0; width:100%; max-width:700px;}
.contact-map-visual .contact-map-frame {height:clamp(240px,28vw,400px); min-height:240px; border-radius:24px; overflow:hidden; background:#eee;}
.contact-map-visual .contact-map-frame iframe {display:block; width:100%; height:100%; border:0;}
.contact-panel {grid-area:info; min-width:0; padding:0; display:flex; flex-direction:column; gap:48px;}
.contact-panel-block {display:flex; flex-direction:column; gap:48px;}
.contact-heading {margin:0; font-size:clamp(calc(28px - 2pt),calc(3.2vw - 2pt),calc(40px - 2pt)); font-weight:600; line-height:1.2; letter-spacing:-0.02em; color:#242424;}
.contact-heading-accent {font-weight:700; color:var(--color-primary);}
.contact-rows {list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:30px;}
.contact-row {display:flex; align-items:center; gap:20px;}
.contact-row-label {display:flex; align-items:center; justify-content:space-between; width:65px; flex-shrink:0;}
.contact-row-icon {display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; color:var(--color-primary); font-size:24px; line-height:1;}
.contact-row-name {font-size:18px; font-weight:600; line-height:24px; letter-spacing:-0.02em; color:#242424;}
.contact-row-divider {flex-shrink:0; width:1px; height:10px; background:#ddd;}
.contact-row-value {flex:1; min-width:0; font-size:16px; font-weight:400; line-height:24px; letter-spacing:-0.02em; color:#454545; word-break:keep-all;}
.contact-link {color:inherit; text-decoration:none; transition:color var(--transition);}
.contact-link:hover {color:var(--color-primary);}
.contact-map-btns {display:flex; flex-wrap:wrap; gap:20px;}
.contact-map-btn {display:inline-flex; align-items:center; justify-content:center; min-width:190px; height:55px; padding:0 24px; border:1px solid #242424; border-radius:60px; background:#fff; font-size:16px; font-weight:600; line-height:1; letter-spacing:-0.04em; color:#242424; text-decoration:none; transition:border-color var(--transition), color var(--transition), background var(--transition);}
.contact-map-btn--naver:hover {border-color:var(--color-primary); background:var(--color-primary); color:#fff;}
.contact-map-btn--kakao:hover {border-color:#242424; background:#242424; color:#fff;}
/* ==========================================================================
   Page About 4: CONTACT US (about/contact.php) Styles
   ========================================================================== */
.page-about-contact {position:relative; width:100%;}
.page-about-contact .sub-page-head {margin-bottom:40px;}
.page-about-contact .contact-section {padding-bottom:clamp(60px, calc(100 / var(--inner) * 100vw), 100px);}
.contact-layout {display:grid; grid-template-columns:50% minmax(0, 1fr); grid-template-areas:"map info"; gap:clamp(40px, 6vw, 90px); width:100%; max-width:1400px; margin:0 auto;}
.contact-map-visual {grid-area:map; min-width:0; width:100%; max-width:700px; height: 100%;}
.contact-map-visual .contact-map-frame {position:relative; width:100%; height:100%; min-height:240px; border-radius:24px; overflow:hidden; background:#eee; box-shadow:0 8px 30px rgba(0,0,0,0.06);}
.contact-map-visual .contact-map-frame iframe {display:block; width:100%; height:100%; border:0;}
.contact-panel {grid-area:info; min-width:0; padding:0; display:flex; flex-direction:column; gap:48px;}
.contact-panel-block {display:flex; flex-direction:column; gap:48px;}
.contact-heading {margin:0; font-size:var(--font-size-38); font-weight:600; line-height:1.2em; letter-spacing:-0.02em; color:#242424;}
.contact-heading-accent {font-weight:700; color:var(--color-primary);}
.contact-rows {list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:30px;}
.contact-row {display:flex; align-items:center; gap:20px;}
.contact-row-label {display:flex; align-items:center; justify-content:space-between; width:65px; flex-shrink:0;}
.contact-row-icon {display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; color:var(--color-primary); font-size:var(--font-size-24); line-height:1em;}
.contact-row-name {font-size:var(--font-size-18); font-weight:600; line-height:1.33em; letter-spacing:-0.02em; color:#242424;}
.contact-row-divider {flex-shrink:0; width:1px; height:10px; background:#ddd;}
.contact-row-value {flex:1; min-width:0; font-size:var(--font-size-16); font-weight:400; line-height:1.5em; letter-spacing:-0.02em; color:#454545; word-break:keep-all;}
.contact-link {color:inherit; font-weight:400; text-decoration:none; transition:color var(--transition);}
.contact-link:hover {color:var(--color-primary);}
.contact-map-btns {display:flex; flex-wrap:wrap; gap:20px;}
.contact-map-btn {display:inline-flex; align-items:center; justify-content:center; min-width:190px; height:clamp(40px, calc(55 / var(--inner) * 100vw), 55px); padding:0 24px; border:1px solid #242424; border-radius:60px; background:#fff; font-size:var(--font-size-16); font-weight:600; line-height:1em; letter-spacing:-0.04em; color:#242424; text-decoration:none; transition:border-color var(--transition), color var(--transition), background var(--transition);}
.contact-map-btn--naver:hover {border-color:var(--color-primary); background:var(--color-primary); color:#fff;}
.contact-map-btn--kakao:hover {border-color:#242424; background:#242424; color:#fff;}

/* ==========================================================================
   Page Business (business/*.php) Styles
   ========================================================================== */
.biz-spec-layout {display:flex; flex-direction:row; align-items:stretch; gap:48px; width:100%; margin-bottom:clamp(50px, calc(80 / var(--inner) * 100vw), 80px);}
.biz-spec-layout .biz-intro-visual {position:relative; flex:0 0 50%; max-width:50%; aspect-ratio:3/2; border-radius:24px; overflow:hidden; box-shadow:0 8px 30px rgba(0,0,0,0.06); margin:0;}
.biz-spec-layout .biz-intro-visual img, .biz-spec-layout .biz-visual-slide {width:100%; height:100%; min-height:0; object-fit:cover; display:block;}
.biz-visual-slides {position:absolute; inset:0;}
.biz-visual-slide {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 0.5s ease;}
.biz-visual-slide.is-active {opacity:1;}
.biz-visual-dots {position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:6; display:flex; align-items:center; gap:14px; margin:0; padding:0; border:0; pointer-events:auto;}
.biz-visual-dot {width:10px; height:10px; padding:0; border:none; border-radius:50%; background:rgba(255,255,255,0.55); box-shadow:0 1px 4px rgba(0,0,0,0.18); cursor:pointer; transition:background var(--transition), transform var(--transition), box-shadow var(--transition);}
.biz-visual-dot:hover {background:rgba(255,255,255,0.85); transform:scale(1.08);}
.biz-visual-dot.is-active {background:var(--color-primary); box-shadow:0 2px 8px rgba(2,7,233,0.35); transform:scale(1);}
.biz-spec-copy {flex:1 1 0; min-width:0; display:flex; flex-direction:column; justify-content:center;}
.biz-spec-meta {display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.biz-spec-badge {display:inline-flex; align-items:center; padding:5px 14px; font-size:var(--font-size-13); font-weight:700; line-height:1.2em; color:var(--color-primary); background:var(--color-primary-soft); border-radius:999px;}
.biz-spec-meta-text {font-size:var(--font-size-14); font-weight:600; color:var(--color-ink-light);}
.biz-spec-title {font-size:var(--font-size-32); font-weight:700; color:var(--color-ink); line-height:1.35em; margin-bottom:20px; letter-spacing:-.02em;}
.biz-spec-desc {font-size:var(--font-size-16); font-weight:400; line-height:1.75em; color:var(--color-ink-muted); margin-bottom:14px; word-break:keep-all;}
.biz-spec-fields {margin-bottom:clamp(50px, calc(80 / var(--inner) * 100vw), 80px);}
.spec-heading {display:flex; align-items:center; gap:12px; margin-bottom:20px;}
.spec-heading-bar {width:4px; height:22px; border-radius:4px; background:var(--color-primary);}
.spec-heading-text {font-size:var(--font-size-20); font-weight:700; color:var(--color-ink); letter-spacing:-.02em;}
.spec-list {list-style:none; margin:0; padding:0; border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 4px 16px rgba(0,0,0,0.03);}
.spec-list li {position:relative; padding:18px 24px 18px 44px; font-size:var(--font-size-16); font-weight:500; color:var(--color-ink); border-bottom:1px solid var(--color-border); background:#fff; transition:var(--transition);}
.spec-list li:last-child {border-bottom:none;}
.spec-list li:hover {background:rgba(2,7,233,0.02);}
.spec-list li::before {content:""; position:absolute; left:24px; top:50%; transform:translateY(-50%); width:6px; height:6px; border-radius:50%; background:var(--color-primary);}
.record-preview {margin-bottom:clamp(50px, calc(80 / var(--inner) * 100vw), 80px);}
.record-preview .spec-heading {justify-content:space-between; gap:20px;}
.record-preview .spec-heading-main {display:flex; align-items:center; gap:12px;}
.record-all-link {display:inline-flex; align-items:center; gap:6px; font-size:var(--font-size-14); font-weight:600; color:var(--color-ink); transition:var(--transition);}
.record-all-link::after {content:"→"; font-size:var(--font-size-16); line-height:1em; transition:transform var(--transition);}
.record-all-link:hover {color:var(--color-primary);}
.record-all-link:hover::after {transform:translateX(4px);}
.record-preview .perf-carousel {position:relative;}
.record-preview .perf-carousel-viewport {position:relative; padding: 0 22px; margin-right: -10px;}
.record-preview .perf-carousel-arrow {position:absolute; top:50%; z-index:3; display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin-top:-22px; border-radius:50%; background:#fff; border:1px solid var(--color-border); box-shadow:0 4px 16px rgba(17,24,39,0.1); color:var(--color-ink); font-size:var(--font-size-20); line-height:1em; cursor:pointer; transition:background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), opacity var(--transition);}
.record-preview .perf-carousel-arrow .ph {line-height:1em;}
.record-preview .perf-carousel-arrow:hover:not(:disabled) {background:var(--color-primary); border-color:var(--color-primary); color:#fff; box-shadow:0 6px 20px rgba(2,7,233,0.22);}
.record-preview .perf-carousel-arrow:disabled {opacity:0.35; cursor:default;}
.record-preview .perf-carousel-prev {left:0;}
.record-preview .perf-carousel-next {right:0;}
.record-preview .record-cards {display:flex; gap:16px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:4px;}
.record-preview .record-cards::-webkit-scrollbar {display:none;}
.record-preview .record-card {flex:0 0 calc((100% - 48px) / 4); min-width:260px; scroll-snap-align:start; display:flex; flex-direction:column; background:#fff; border:1px solid var(--color-border); border-radius:16px; overflow:hidden; box-shadow:0 2px 10px rgba(17,24,39,0.06); transition:var(--transition); cursor:default;}
.record-preview .perf-card-thumb {aspect-ratio:16/10; overflow:hidden; background:#e5e7eb;}
.record-preview .perf-card-thumb img {width:100%; height:100%; object-fit:cover; transition:transform 0.45s ease;}
.record-preview .perf-card-body {display:flex; flex-direction:column; gap:10px; flex:1; padding:18px 20px 20px;}
.record-preview .perf-card-cat {display:inline-flex; align-items:center; align-self:flex-start; padding:4px 10px; border-radius:4px; background:var(--color-primary-soft); font-size:var(--font-size-12); font-weight:700; letter-spacing:-0.01em; color:var(--color-primary); margin:0;}
.record-preview .perf-card-title {font-size:var(--font-size-17); font-weight:700; line-height:1.45em; letter-spacing:-0.02em; color:var(--color-ink); margin:0; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; height:calc(1.45em * 2); word-break:keep-all; overflow-wrap:break-word; transition:color var(--transition);}
.record-preview .perf-card-meta {display:flex; flex-direction:column; gap:6px; margin-top:auto; font-size:var(--font-size-13); line-height:1.45em; color:var(--color-ink-muted);}
.record-preview .perf-card-meta span {display:inline-flex; align-items:center; gap:6px;}
.record-preview .perf-card-meta strong {font-weight:600; color:var(--color-ink);}

/* System Architecture Grid */
.page-system {position:relative; width:100%;}
.system-arch-section {margin-bottom:clamp(50px, calc(80 / var(--inner) * 100vw), 80px);}
.system-arch-grid {display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;}
.system-arch-card {position:relative; display:flex; flex-direction:column; padding:32px 24px; border-radius:20px; background:#fff; border:1px solid var(--color-border); box-shadow:0 4px 16px rgba(0,0,0,0.03); transition:var(--transition); overflow:hidden;}
.system-arch-card:hover {transform:translateY(-4px); border-color:rgba(2,7,233,0.3); box-shadow:0 12px 28px rgba(2,7,233,0.12);}
.system-arch-step {display:inline-block; font-size:var(--font-size-12); font-weight:700; letter-spacing:0.08em; color:var(--color-primary); background:var(--color-primary-soft); padding:4px 12px; border-radius:999px; width:fit-content; margin-bottom:16px;}
.system-arch-icon {font-size:var(--font-size-36); color:var(--color-primary); line-height:1em; margin-bottom:16px;}
.system-arch-name {font-size:var(--font-size-18); font-weight:700; color:var(--color-ink); line-height:1.35em; margin-bottom:6px;}
.system-arch-sub {font-size:var(--font-size-13); font-weight:600; color:var(--color-ink-light); margin-bottom:12px;}
.system-arch-desc {font-size:var(--font-size-14); font-weight:400; line-height:1.6em; color:var(--color-ink-muted); word-break:keep-all;}

/* Sub CTA Banner */
.sub-cta {position:relative; border-radius:24px; overflow:hidden; padding:clamp(40px, calc(60 / var(--inner) * 100vw), 60px) clamp(24px, calc(48 / var(--inner) * 100vw), 48px); margin-bottom:clamp(60px, calc(100 / var(--inner) * 100vw), 100px); box-shadow:0 10px 30px rgba(2,7,233,0.15);}
.sub-cta-bg {position:absolute; inset:0; background:linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 60%, #1e3a8a 100%);}
.sub-cta-bg::after {content:"HANATECH"; position:absolute; right:30px; bottom:-20px; font-family:"Pretendard",sans-serif; font-size:clamp(60px, 12vw, 150px); font-weight:900; color:rgba(255,255,255,0.07); pointer-events:none; user-select:none; line-height:1em;}
.sub-cta-inner {position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;}
.sub-cta-text {flex:1 1 320px;}
.sub-cta-title {font-size:var(--font-size-30); font-weight:700; color:#fff; line-height:1.3em; margin-bottom:10px;}
.sub-cta-desc {font-size:var(--font-size-16); font-weight:400; color:rgba(255,255,255,0.85);}
.sub-cta-actions {display:flex; gap:12px; flex-wrap:wrap;}
.sub-cta-btn {display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 28px; border-radius:999px; font-size:var(--font-size-15); font-weight:600; text-decoration:none; transition:var(--transition);}
.sub-cta-btn--primary {background:#fff; color:var(--color-primary); box-shadow:0 4px 16px rgba(0,0,0,0.15);}
.sub-cta-btn--primary:hover {background:var(--color-ink); color:#fff; transform:translateY(-2px);}
.sub-cta-btn--ghost {background:rgba(255,255,255,0.12); border:1.5px solid rgba(255,255,255,0.4); color:#fff; backdrop-filter:blur(4px);}
.sub-cta-btn--ghost:hover {background:#fff; color:var(--color-ink); transform:translateY(-2px);}

/* ==========================================================================
   Page Community (community/*.php) & Performance Styles
   ========================================================================== */
.page-community-nomination {position:relative; width:100%;}
.nomination-layout {width:100%; max-width:1400px; margin:0 auto clamp(60px, calc(100 / var(--inner) * 100vw), 100px);}
.nomination-panel {display:flex; flex-direction:row; align-items:stretch; gap:0; padding:0; overflow:hidden; border-radius:var(--radius-lg); background:var(--color-bg-soft); border:1px solid var(--color-border); box-shadow:0 2px 10px rgba(30,58,95,0.04);}
.nomination-panel-body {flex:1; min-width:0; display:flex; flex-direction:column; gap:28px; padding:clamp(28px, 4vw, 40px);}
.nomination-cover {flex:0 0 clamp(240px, 32%, 340px); margin:0; display:flex; flex-direction:column; min-height:0; border:none; border-right:1px solid var(--color-border); border-radius:0; overflow:hidden; background:#fff; box-shadow:none;}
.nomination-cover-link {display:flex; flex:1; min-height:0; transition:opacity var(--transition);}
.nomination-cover-link:hover {opacity:0.92;}
.nomination-cover-img {flex:1; display:flex; align-items:center; justify-content:center; min-height:0; background:#fff; padding:14px; line-height:0;}
.nomination-cover-img img {display:block; width:100%; height:100%; object-fit:contain;}
.nomination-panel-title {margin:0; font-size:var(--font-size-28); font-weight:700; line-height:1.35em; letter-spacing:-0.02em; color:var(--color-navy);}
.nomination-spec {display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px 32px; padding:24px 0; border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border);}
.nomination-spec div {display:flex; flex-direction:column; gap:6px;}
.nomination-spec dt {font-size:var(--font-size-13); font-weight:600; color:var(--color-ink-light);}
.nomination-spec dd {margin:0; font-size:var(--font-size-16); font-weight:600; color:var(--color-navy);}
.nomination-actions {display:flex; flex-wrap:wrap; gap:12px;}
.nomination-note {font-size:var(--font-size-13); line-height:1.65em; color:var(--color-ink-muted); margin:0;}

/* Page Community Inquiry Form */
.page-community-inquiry {position:relative; width:100%;}
.inquiry-layout {display:block; width:100%; max-width:1400px; margin:0 auto clamp(60px, calc(100 / var(--inner) * 100vw), 100px);}
.inquiry-form {display:flex; flex-direction:column; gap:40px; width:100%;}
.inquiry-form-row {display:grid; gap:40px; width:100%;}
.inquiry-form-row--2 {grid-template-columns:repeat(2, minmax(0, 1fr));}
.inquiry-field {display:flex; flex-direction:column; gap:20px; min-width:0;}
.inquiry-field--full {width:100%;}
.inquiry-label {font-size:var(--font-size-18); font-weight:600; line-height:1em; color:#242424;}
.inquiry-required {color:var(--color-primary);}
.inquiry-form input[type="text"], .inquiry-form input[type="tel"], .inquiry-form input[type="email"], .inquiry-form input[type="password"], .inquiry-form textarea, .inquiry-captcha-input {width:100%; border:1px solid #ddd; background:#fff; font:inherit; font-size:var(--font-size-16); font-weight:400; color:#242424; border-radius:var(--radius-md); box-sizing:border-box;}
.inquiry-form input[type="text"], .inquiry-form input[type="tel"], .inquiry-form input[type="email"], .inquiry-form input[type="password"], .inquiry-captcha-input {height:clamp(40px, calc(55 / var(--inner) * 100vw), 55px); padding:0 20px;}
.inquiry-form input::placeholder, .inquiry-form textarea::placeholder {color:#b1b1b1;}
.inquiry-form textarea {min-height:300px; padding:19px 20px; resize:vertical; line-height:1.5em;}
.inquiry-type-group {border:0; margin:0; padding:0; min-width:0;}
.inquiry-type-group .inquiry-label {display:block; margin-bottom:0; padding:0; width: 100%; height: auto; text-indent: 0;}
.inquiry-type-list {display:flex; flex-wrap:wrap; align-items:center; gap:28px; width:100%; margin-top:20px; overflow-x:auto; scrollbar-width:none;}
.inquiry-type-list::-webkit-scrollbar {display:none;}
.inquiry-radio {display:inline-flex; align-items:center; gap:8px; flex-shrink:0; min-height:0; padding:0; border:none; border-radius:0; background:transparent; cursor:pointer; user-select:none; box-sizing:border-box; transition:color var(--transition);}
.inquiry-radio input {position:absolute; opacity:0; width:0; height:0;}
.inquiry-radio-mark {flex-shrink:0; width:20px; height:20px; border:1px solid #ddd; border-radius:50%; background:#fff; box-sizing:border-box; position:relative; transition:border-color var(--transition);}
.inquiry-radio input:checked + .inquiry-radio-mark {border-color:var(--color-primary);}
.inquiry-radio input:checked + .inquiry-radio-mark::after {content:""; position:absolute; inset:4px; border-radius:50%; background:var(--color-primary);}
.inquiry-radio-text {font-size:var(--font-size-16); font-weight:400; line-height:1.5em; color:#686868;}
.inquiry-radio input:checked ~ .inquiry-radio-text {color:#242424; font-weight:500;}
.inquiry-type-other-wrap {display:flex; align-items:center; gap:12px; flex:1 1 0; min-width:max-content;}
.inquiry-type-other-wrap .inquiry-radio--other {flex-shrink:0;}
.inquiry-type-other-input {flex:1 1 auto; width:auto; min-width:0; height:36px; padding:0 12px; border:1px solid #ddd; border-radius:var(--radius-md); background:#fff; font:inherit; font-size:var(--font-size-14); font-weight:400; color:#242424; box-sizing:border-box; transition:border-color var(--transition), background var(--transition);}
.inquiry-type-other-input:disabled {background:#f7f7f7; color:#b1b1b1; cursor:not-allowed;}
.inquiry-type-other-input:focus:not(:disabled) {border-color:var(--color-primary); outline:none;}
.inquiry-captcha {display:flex; align-items:center; justify-content:space-between; gap:10px;}
.inquiry-captcha-img {flex-shrink:0; width:120px; height:clamp(40px, calc(55 / var(--inner) * 100vw), 55px); border:1px solid #ddd; border-radius:var(--radius-md); background:linear-gradient(135deg, #f5f5f5 0%, #ebebeb 100%); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.inquiry-captcha-img span {font-size:var(--font-size-22); font-weight:700; letter-spacing:0.15em; color:#454545; transform:skewX(-8deg); user-select:none;}
.inquiry-captcha-input {flex:1; min-width:0;}
.inquiry-file-row {display:flex; align-items:stretch; gap:10px;}
.inquiry-file-field {flex:1; min-width:0; height:clamp(40px, calc(55 / var(--inner) * 100vw), 55px); padding:0 20px; border:1px solid #ddd; border-radius:var(--radius-md); background:#fff; display:flex; align-items:center; box-sizing:border-box;}
.inquiry-file-text {font-size:var(--font-size-16); font-weight:400; color:#b1b1b1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.inquiry-file-text.is-selected {color:#242424;}
.inquiry-file-btn {flex-shrink:0; position:relative; height:clamp(40px, calc(55 / var(--inner) * 100vw), 55px); padding:0 24px; border:none; border-radius:var(--radius-md); background:#242424; font:inherit; font-size:var(--font-size-16); font-weight:600; line-height:1em; color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; white-space:nowrap; transition:background var(--transition);}
.inquiry-file-btn:hover {background:#3a3a3a;}
.inquiry-file-input {position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.inquiry-privacy {display:flex; flex-direction:column; gap:19px; width:100%;}
.inquiry-privacy-box {height:180px; padding:18px 21px; border:1px solid #ddd; border-radius:var(--radius-md); background:#fff; overflow-y:auto; font-size:var(--font-size-16); line-height:1.5em; color:#686868;}
.inquiry-privacy-box p {margin:0 0 8px;}
.inquiry-privacy-box p:last-child {margin-bottom:0;}
.inquiry-agree {display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px;}
.inquiry-check {display:inline-flex; align-items:center; gap:11px; cursor:pointer; user-select:none;}
.inquiry-check input {position:absolute; opacity:0; width:0; height:0;}
.inquiry-check-box {flex-shrink:0; width:24px; height:24px; border:1px solid #ddd; border-radius:5px; background:#fff; display:flex; align-items:center; justify-content:center; color:#fff; font-size:var(--font-size-14); transition:background var(--transition), border-color var(--transition);}
.inquiry-check-box i {opacity:0; transform:scale(0.8); transition:opacity var(--transition), transform var(--transition);}
.inquiry-check input:checked + .inquiry-check-box {background:var(--color-primary); border-color:var(--color-primary);}
.inquiry-check input:checked + .inquiry-check-box i {opacity:1; transform:scale(1);}
.inquiry-check-text {font-size:var(--font-size-16); font-weight:400; letter-spacing:-0.06em; color:#454545;}
.inquiry-privacy-more {height:24px; padding:0 10px; border:1px solid #ddd; background:#fff; font:inherit; font-size:var(--font-size-13); letter-spacing:-0.06em; color:#686868; cursor:pointer;}
.inquiry-privacy-more:hover {border-color:var(--color-primary); color:var(--color-primary);}
.inquiry-submit-wrap {display:flex; justify-content:center;}
.inquiry-submit {min-width:230px; height:60px; padding:0 40px; border:none; border-radius:60px; background:var(--color-primary); font:inherit; font-size:var(--font-size-18); font-weight:600; line-height:1em; color:#fff; cursor:pointer; transition:background var(--transition);}
.inquiry-submit:hover {background:var(--color-primary-dark);}

/* ==========================================================================
   Page Performance (business/performance.php) Styles
   ========================================================================== */
.page-business-performance {position:relative; width:100%;}
.perf-tabs {display:flex; flex-wrap:wrap; justify-content:center; gap:10px; width:100%; max-width:100%; margin:0 0 40px; padding:0; background:transparent; border:none; border-radius:0;}
.perf-tab {position:relative; flex:0 1 auto; min-height:44px; padding:11px 20px; font-size:var(--font-size-15); font-weight:500; line-height:1.4em; color:var(--color-ink-muted); border:1px solid var(--color-border); border-radius:999px; background:#fff; white-space:nowrap; transition:color 0.2s ease, background 0.2s ease, border-color 0.2s ease; cursor:pointer;}
.perf-tab:hover {color:#242424; background:#fff; border-color:var(--color-border);}
.perf-tab.is-active {color:#fff; background:var(--color-primary); border-color:var(--color-primary); font-weight:600;}
.perf-tab.is-active:hover {color:#fff; background:var(--color-primary-dark); border-color:var(--color-primary-dark);}
.perf-count {margin-bottom:20px;}
.perf-board {display:flex; flex-direction:column; gap:30px;}
.board-table.perf-table .col-no {width:100px;}
.board-table.perf-table thead th {height:72px; min-height:72px; padding:0 12px; font-size:var(--font-size-16); background:rgba(2,7,233,0.04); border-top:1px solid #242424; border-bottom:1px solid #ddd; color:#242424; box-sizing:border-box;}
.board-table.perf-table thead th.col-title {text-align:center; padding-left:12px; padding-right:12px;}
.board-table.perf-table .col-title {font-weight:500; line-height:1.4em; word-break:keep-all;}
.board-table.perf-table .col-author {width:160px;}
.board-table.perf-table .col-date {width:200px; white-space:nowrap;}
.board-table.perf-table tbody tr {cursor:pointer;}
.board-table.perf-table tbody td {height:72px; min-height:72px; padding:0 12px; font-size:var(--font-size-16); line-height:1.4em; background:#fff; box-sizing:border-box; transition:background 0.18s ease, color 0.18s ease;}
.board-table.perf-table tbody td.col-title {padding-left:16px; padding-right:16px;}
.board-table.perf-table tbody tr:hover td, .board-table.perf-table tbody tr.is-selected td {background:rgba(2,7,233,0.04);}
.board-table.perf-table tbody tr:hover td.col-title, .board-table.perf-table tbody tr.is-selected td.col-title {color:var(--color-primary);}
.perf-cards {display:none;}
.perf-paging {padding-top:24px;}
.perf-card {padding:18px 20px; background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:0 2px 10px rgba(30,58,95,0.04); transition:border-color var(--transition), box-shadow var(--transition);}
.perf-card:hover {border-color:rgba(17,24,39,0.12); box-shadow:0 6px 16px rgba(17,24,39,0.08);}
.perf-card-num {font-size:var(--font-size-12); font-weight:700; color:var(--color-primary); margin:0 0 6px;}
.perf-card-title {font-size:var(--font-size-16); font-weight:600; color:var(--color-ink); margin:0 0 10px; line-height:1.4em;}
.perf-card-meta {font-size:var(--font-size-14); color:var(--color-ink-muted); margin:0;}