body {
    font-family: 'Segoe UI', Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, #f0f2f5 0%, #e8ecef 100%);
    min-height: 100vh;
}
/* Header and Navigation */
.header {
    background-color: #333;
    padding: 20px 0;
    text-align: center;
    position: relative;
}
.logo {
    position: absolute;
    left: 20px;
    top: 10px;
}
.logo img {
    height: 50px;
    width: auto;
    background: transparent;
}
.nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}
.nav-menu li {
    position: relative;
    margin: 0 40px;
}
.nav-menu li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    padding: 10px 20px;
    display: block;
}
.nav-menu li:hover > a {
    color: #8B4513;
}
.dropdown {
    display: none;
    position: absolute;
    background-color: #444;
    min-width: 200px;
    z-index: 1;
    list-style: none;
    padding: 0;
}
.nav-menu li:hover .dropdown {
    display: block;
}
.dropdown li {
    margin: 0;
}
.dropdown li a {
    color: white;
    padding: 10px;
    font-size: 16px;
    text-align: left;
    display: block;
}
.dropdown li a:hover {
    color: #8B4513;
    background-color: #555;
}
/* Content Section */
.content {
    max-width: 1000px;
    margin: 40px auto;
    padding: 30px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}
.content:hover {
    transform: translateY(-5px);
}
h1 {
    font-size: 28px;
    color: #2c2c2c;
    text-align: center;
    margin-bottom: 30px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
.form-section {
    margin-bottom: 25px;
}
.form-section label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}
.form-section input[type="text"],
.form-section input[type="number"],
.form-section textarea,
.form-section input[type="date"] {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    background: #f8f9fa;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-section input:focus,
.form-section textarea:focus {
    border-color: #d4a373;
    box-shadow: 0 0 8px rgba(212, 163, 115, 0.3);
    outline: none;
}
.form-section input[type="checkbox"] {
    margin-right: 10px;
    accent-color: #d4a373;
}
.form-section .checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 12px;
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
}
.form-section input[type="file"] {
    margin-bottom: 12px;
    padding: 10px;
}
.form-section textarea {
    height: 120px;
    resize: vertical;
}
.submit-button {
    display: block;
    margin: 30px auto;
    padding: 12px 30px;
    background: linear-gradient(90deg, #d4a373 0%, #b08968 100%);
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}
.submit-button:hover {
    background: linear-gradient(90deg, #b08968 0%, #d4a373 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
.success-message {
    display: none;
    color: #28a745;
    text-align: center;
    font-size: 20px;
    margin: 20px 0;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 30px;
    display: none;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.data-table th,
.data-table td {
    border: 1px solid #e0e0e0;
    padding: 12px;
    text-align: left;
}
.data-table th {
    background: linear-gradient(90deg, #d4a373 0%, #b08968 100%);
    color: #fff;
    font-weight: 600;
}
.data-table td {
    background: #f8f9fa;
}
.back-button {
    display: block;
    margin: 30px auto;
    padding: 12px 30px;
    background: #444;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    font-size: 16px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}
.back-button:hover {
    background: #d4a373;
    transform: translateY(-2px);
}
/* FAQ Section */
.faq-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
    background-color: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.faq-container h1 {
    color: #333;
    border-bottom: 2px solid #8B4513;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.faq-item {
    margin-bottom: 10px;
}
.faq-question {
    background-color: #f9f9f9;
    padding: 15px;
    cursor: pointer;
    font-size: 18px;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: background-color 0.3s;
}
.faq-question:hover {
    background-color: #e0e0e0;
}
.faq-answer {
    display: none;
    padding: 20px;
    background-color: #fff3e0;
    border: 1px solid #8B4513;
    border-radius: 5px;
    margin-top: 10px;
    font-size: 16px;
    color: #333;
    line-height: 1.6;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
}
.faq-answer.active {
    display: block;
}
/* Footer */
.footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px 0;
    margin-top: 20px;
}
.footer p {
    margin: 5px 0;
}
 
 .banner img {
     width: 100%;
     height: 100%;
     object-fit: contain;       /* 크롭 금지, 전체 보이기 */
     object-position: center;
     display: none;
 }
 .banner-main {
     height: auto;              /* 컨테이너 비율에 따름 */
     min-height: 308px;         /* 너무 얕아 보이지 않게 최소값 */
 }
 .banner img.active {
    display: block;
}
.content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 20px;
}
.news-board, .story-board {
    width: 48%;
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.news-board h2, .story-board h2 {
    color: #333;
    border-bottom: 2px solid #8B4513;
    padding-bottom: 10px;
}
.news-board ul {
    list-style: none;
    padding: 0;
}
.news-board ul li {
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
}
.news-board ul li a {
    color: #333;
    text-decoration: none;
}
.news-board ul li a:hover {
    color: #8B4513;
}
.rolling-list-container {
    height: 170px;
    overflow: hidden;
    position: relative;
}
.rolling-list {
    list-style: none;
    padding: 0;
    margin: 0;
    animation: scroll 60s linear infinite;
}
.rolling-list li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #333;
}
.rolling-list li span {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rolling-list li span:nth-child(1) {
    flex: 0.4;
}
.rolling-list li span:nth-child(2) {
    flex: 0.8;
}
.rolling-list li span:nth-child(3) {
    flex: 0.3;
}
@keyframes scroll {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100%); }
}
.rolling-list:hover {
    animation-play-state: paused;
}
.image-section {
    display: flex;
    justify-content: center;
    gap: 20px;
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
}
.image-section img {
    width: 55%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
/* Product Specific Styles */
.product-image {
    width: 45%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.system-image {
    width: 70%;
    height: auto;
}
.centered-grey {
    text-align: center;
    color: grey;
}
/* Need Specific Styles */
h2 {
    font-size: 20px;
    color: #2E8B57;
    margin-top: 20px;
}
ul {
    list-style-type: disc;
    margin-left: 20px;
}
li {
    margin: 15px 0;
}
p {
    margin: 15px 0;
}
.highlight {
    font-weight: bold;
    color: #444;
}
.equation {
    margin-left: 40px;
    font-style: italic;
}
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 14px;
}
th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}
th {
    background-color: #f5f5d5;
    font-weight: bold;
}
.table-title {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin: 10px 0;
}
.table-footer {
    font-size: 12px;
    text-align: right;
    color: #666;
}
/* Install Guide Specific Styles */
h2 {
    font-size: 22px;
    color: #333;
    margin-top: 20px;
    margin-bottom: 10px;
}
ul {
    list-style-type: disc;
    margin-left: 20px;
    margin-bottom: 15px;
}
li {
    margin: 10px 0;
    color: #555;
}
.highlight {
    font-weight: bold;
    color: #d4a373;
}
.next-button, .back-button {
    display: block;
    margin: 30px auto;
    padding: 12px 30px;
    background: linear-gradient(90deg, #d4a373 0%, #b08968 100%);
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    font-size: 16px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}
.next-button:hover, .back-button:hover {
    background: linear-gradient(90deg, #b08968 0%, #d4a373 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
/* Notice Board Styles */
.content h2 {
    color: #333;
    border-bottom: 2px solid #8B4513;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.notice-table {
    width: 100%;
    border-collapse: collapse;
}
.notice-table th, .notice-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}
.notice-table th {
    background-color: #f8f8f8;
    color: #333;
    font-weight: bold;
}
.notice-table td {
    color: #333;
}
.notice-table tr:hover {
    background-color: #f5f5f5;
}
.notice-table a {
    color: #333;
    text-decoration: none;
}
.notice-table a:hover {
    color: #8B4513;
}
.notice-content {
    display: none;
    padding: 20px;
    background-color: #f9f9f9;
    margin-top: 10px;
    border-left: 4px solid #8B4513;
}
.notice-content img {
    max-width: 100%;
    height: auto;
    margin: 10px 0;
}
/* Admin Controls */
.admin-controls {
    margin-bottom: 20px;
    text-align: right;
}
.admin-controls button, .action-buttons button {
    background-color: #8B4513;
    color: white;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 4px;
    margin-left: 10px;
}
.admin-controls button:hover, .action-buttons button:hover {
    background-color: #6d3510;
}
.action-buttons {
    text-align: right;
}
.hidden {
    display: none;
}
/* Form Styles */
.write-form, .edit-form {
    display: none;
    margin-top: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
}
.write-form h3, .edit-form h3 {
    margin-top: 0;
}
.write-form input[type="text"], .write-form textarea,
.edit-form input[type="text"], .edit-form textarea {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.write-form input[type="file"], .edit-form input[type="file"] {
    margin: 10px 0;
}
.write-form button, .edit-form button {
    background-color: #8B4513;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 4px;
}
.write-form button:hover, .edit-form button:hover {
    background-color: #6d3510;
}
.image-preview img {
    max-width: 200px;
    margin: 10px 0;
}

/* Principal Specific */
.circuit-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 10px auto;
}
/* ===== Edge Marquee (테두리 도는 텍스트) ===== */
:root{
  --bm-size: 40px;        /* 띠 두께 */
  --bm-speed: 40s;        /* 한 바퀴 도는 시간(작을수록 빠름) */
  --bm-color: #111;       /* 글자색 */
  --bm-bg: transparent;   /* 띠 배경(투명 권장). 예: rgba(255,255,255,.9) */
  --bm-gap: 0px;          /* 화면 가장자리에서 안쪽으로 띄우기 */
  --bm-font: 700 14px/1.1 "Pretendard","Noto Sans KR",system-ui,sans-serif;
  --bm-letter: .08em;     /* 자간 */
}

/* 홈에서만 보이기 (원하면 전체 페이지로 바꾸려면 아래 두 줄 삭제) */
.border-marquee{ display:none; }
.home .border-marquee{ display:block; }

.border-marquee{
  position: fixed; inset: var(--bm-gap); z-index: 1500;   /* 헤더(z=2000)보다 낮게 */
  pointer-events: none;  /* 클릭 가로막지 않음 */
}

.border-marquee .bm{
  position: absolute; overflow: hidden; background: var(--bm-bg);
  color: var(--bm-color); font: var(--bm-font); letter-spacing: var(--bm-letter);
  text-transform: uppercase;
}

/* 네 변 배치 */
.border-marquee .bm.top{    left:0; right:0; top:0;    height:var(--bm-size); }
.border-marquee .bm.bottom{ left:0; right:0; bottom:0; height:var(--bm-size); }
.border-marquee .bm.left{   top:0; bottom:0; left:0;   width:var(--bm-size); }
.border-marquee .bm.right{  top:0; bottom:0; right:0;  width:var(--bm-size); }

/* 트랙 + 콘텐츠(두 벌 복제 → 무한 루프) */
.border-marquee .track{
  position: absolute; display: flex; gap: 3rem; white-space: nowrap;
}
.border-marquee .content{ display:flex; align-items:center; gap:3rem; padding: 0 1rem; }

/* 가로 스크롤(위/아래) */
.border-marquee .bm.top .track,
.border-marquee .bm.bottom .track{
  height:100%; align-items:center;
  animation: marquee-x var(--bm-speed) linear infinite;
}
.border-marquee .bm.bottom .track{ animation-direction: reverse; }

/* 세로 스크롤(좌/우) — 세로쓰기 + Y축 이동 */
.border-marquee .bm.left .track,
.border-marquee .bm.right .track{
  width:100%; writing-mode: vertical-rl; text-orientation: mixed;
  animation: marquee-y var(--bm-speed) linear infinite;
}
.border-marquee .bm.left .track{ animation-direction: reverse; }

/* 키프레임 */
@keyframes marquee-x{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); } /* 같은 콘텐츠 두 벌이므로 -50%가 한 사이클 */
}
@keyframes marquee-y{
  0%{ transform: translateY(0); }
  100%{ transform: translateY(-50%); }
}

/* 모바일에서는 과감히 숨김(원하면 보이도록 바꿔도 됨) */
@media (max-width: 768px){
   .banner{ aspect-ratio: 1355 / 308; }  /* 동일 비율 유지 */
   .banner-main{ min-height: 180px; }    /* 필요시 값 조절 */
}

/* 모션 줄이기 설정 존중 */
@media (prefers-reduced-motion: reduce){
  .border-marquee .track{ animation: none; }
}
.sim-card, .sim-panel, .sim-app, .sim-list { background:#fff !important; opacity:1 !important; filter:none !important; }
.sim-led.on { box-shadow:0 0 0 2px rgba(0,0,0,.06) inset; }
.sim-badge { background:#16a34a !important; color:#fff !important; }

/* ===== Fixed Quickbar ===== */
.fixed-quickbar{
  position: fixed;
  right: 24px;          /* 화면 오른쪽 여백 */
  top: 120px;           /* 헤더 높이에 맞춰 조정 */
  z-index: 3000;        /* 헤더/팝업보다 위 */
  width: 140px;          /* 카드 폭 */
  pointer-events: none; /* 바깥 클릭 간섭 방지 */
}
.fixed-quickbar .qcard{
  pointer-events: auto; /* 내부는 클릭 가능 */
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  min-height: 420px;
}
.fixed-quickbar .qitem{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #222;
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
}
.fixed-quickbar .qitem .ico{
  width: 80px; height: 80px;
  display: inline-block;
}
.fixed-quickbar .divider{
  width: 100%; height: 1px; background: #eee; margin: 2px 0;
}

/* ==== External Link Tiles ==== */
.ext-links{
  max-width:1200px;margin:56px auto 32px;padding:0 16px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px;
}
.ext-link-card{
  display:flex;align-items:center;gap:18px;text-decoration:none;color:inherit;
  background: linear-gradient(180deg,#ffffff 0%,#fff7f9 100%); /* 은은한 그라데이션 */;border-left: 6px solid #e94a5a; /* 브랜드 포인트 컬러(원하면 바꾸세요) */border-radius:18px;box-shadow:0 10px 28px rgba(0,0,0,.10);
  padding:22px 24px;transition:transform .15s, box-shadow .15s ease;
}
.ext-link-card:hover{transform:translateY(-2px)scale(1.01);box-shadow:0 14px 36px rgba(0,0,0,.14);}
.ext-link-thumb{width:72px;height:72px;display:grid;place-items:center;background:#f7f7f7;border-radius:12px;overflow:hidden;}
.ext-link-thumb img{max-width:60px;max-height:60px;display:block;}
.ext-link-text{ display:flex; flex-direction:column; line-height:1.25 }
.ext-link-text strong{ font-size:20px; font-weight:800; letter-spacing:-0.2px; } /* 제목 크게 굵게 */
.ext-link-text span{ font-size:14px; color:#444; margin-top:6px; }              /* 보조텍스트도 확대 */


@media (max-width:768px){.ext-links{ grid-template-columns: 1fr; }
.ext-link-card{ padding: 18px; }
.ext-link-thumb{ width: 64px; height: 64px; }
.ext-link-text strong{ font-size:18px; }}

/* ===== Banner SAFE Override (최후단) ===== */
.banner {
  width: 100% !important;
  max-width: 1900px !important;
  margin: 20px auto !important;
  position: relative !important;
  overflow: visible !important;
  aspect-ratio: 1355 / 308 !important;   /* 1355x308 비율 유지 */
  background: #0b0d10 !important;        /* 레터박스 색 */
}

/* 배너 이미지: 크롭 금지 + 중앙 정렬 */
.banner img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;         /* 핵심 */
  object-position: center !important;
}

/* 슬라이더·활성 이미지 표시(프로젝트에 따라 필요) */
.banner img.active,
.banner .slide img.active {
  display: block !important;
}

/* 혹시 다른 규칙이 display:none을 걸어뒀다면 강제 해제 */
.banner img {
  display: block !important;
}
 /* HTML 클래스가 제각각일 가능성 커버 */
.hero-banner, .banner, #banner, .hero {
   width: 100% !important;
   max-width: 1900px !important;
   margin: 20px auto !important;
   position: relative !important;
   overflow: visible !important;
   aspect-ratio: 1355 / 308 !important;   /* 1355x308 비율 */
   background: #0b0d10 !important;        /* 레터박스 */
 }
 .hero-banner img, .banner img, #banner img, .hero img {
   width: 100% !important;
   height: 100% !important;
   object-fit: contain !important;        /* 크롭 금지 */
   object-position: center !important;
   display: block !important;
 }
 /* 배경이미지 방식일 때 전체 표시(크롭 금지) */
.hero-banner, .banner, #banner, .hero {
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* ===== Banner: 단일 소스 오브 트루스 ===== */
.banner,
.hero-banner, #banner, .hero {
  width: 100% !important;
  max-width: 1900px !important;
  margin: 20px auto !important;
  position: relative !important;
  overflow: visible !important;
  aspect-ratio: 1355 / 308 !important;  /* 1355×308 비율 유지 */
  background: #0b0d10 !important;       /* 레터박스(검정/임의 변경) */
  background-size: contain !important;   /* 배경이미지 방식 대비 */
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.banner img,
.hero-banner img, #banner img, .hero img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;        /* 크롭 금지, 전체 보이기 */
  object-position: center !important;
  display: block !important;
}

/* 활성 슬라이드 */
.banner img.active,
.banner .slide img.active { display:block !important; }

/* 모바일에서도 같은 비율 유지 */
@media (max-width: 768px){
  .banner{ aspect-ratio:1355 / 308 !important; }
  .banner-main{ min-height:180px !important; height:auto !important; }
}