:root{
  --ink:#222;
  --claret:#7a1b1e;
  --claret-2:#a43d40;
  --bg:#fff;
  --surface:#fff;
  --surface-2:#faf8f2;
  --gold:#d4af37;
  --gold-2:#f3d36b;
  --muted:#666;
  --radius:14px;
  --shadow:0 6px 24px rgba(0,0,0,.08);
  --container:min(1140px,92vw);
}

/* ===== Global reset ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fff;color:var(--ink);
  font:16px/1.6 system-ui,-apple-system,'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:var(--container);margin:0 auto;padding:40px 0}

/* ===== Logo ===== */
.logo-img{height:36px;width:auto;display:block}
.logo-img.small{height:28px;width:auto}

/* ===== Header / Nav (overlay → solid) ===== */
.site-header{position:sticky;top:0;z-index:50;transition:background-color .25s,border-color .25s,backdrop-filter .25s}
.site-header.header--transparent{background:transparent;border-bottom-color:transparent;backdrop-filter:none}
.site-header.header--solid{background:rgba(255,255,255,.92);border-bottom:1px solid #eee;backdrop-filter:saturate(140%) blur(8px)}

.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.5px;color:var(--ink)}
.nav{display:flex;gap:22px;align-items:center}
.nav a{position:relative;padding:8px 2px;opacity:.95;color:var(--ink)}
.nav a:after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:linear-gradient(90deg,var(--claret),var(--gold));transition:width .25s}
.nav a:hover:after,.nav a.active:after{width:100%}

/* SHOP icon-only */
.nav .cta{border:none;background:transparent;padding:0;display:flex;align-items:center;justify-content:center;color:var(--claret)}
.nav .cta i{width:22px;height:22px;stroke-width:2.2}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:transparent;border:0;cursor:pointer}
.nav-toggle .bar{display:block;width:24px;height:2px;background:var(--ink)}

/* ===== Hero Slider ===== */
.hero-slider{position:relative;overflow:hidden;border-bottom:1px solid #eee}
.hero-slides{position:relative;width:100%}
.hero-slide{display:none;position:relative}
.hero-slide.is-active{display:block}
.hero-slide img{width:100%;height:auto;display:block}

/* Left-center copy with entrance animations */
.hero-copy{position:absolute;left:6%;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;align-items:flex-start;text-align:left;color:#fff;max-width:min(520px,86vw);z-index:2}
.hero-title{margin:0;font-weight:800;font-size:clamp(22px,3.2vw,42px);line-height:1.2;opacity:0;transform:translateY(-18px);transition:opacity .5s,transform .5s}
.hero-desc{margin:0;font-size:clamp(14px,2.1vw,18px);opacity:0;transform:translateY(18px);transition:opacity .55s,transform .55s}
.hero-btn{margin-top:4px;padding:10px 16px;background:transparent;color:#fff;border:1px solid #fff;border-radius:0;font-weight:700;letter-spacing:.2px;cursor:pointer;transition:background-color .25s,color .25s;opacity:0;transform:translateY(18px);z-index:2}
.hero-btn:hover{background:#fff;color:#000}
.hero-slide.is-active .hero-title{opacity:1;transform:translateY(0);transition-delay:.05s}
.hero-slide.is-active .hero-desc{opacity:1;transform:translateY(0);transition-delay:.12s}
.hero-slide.is-active .hero-btn{opacity:1;transform:translateY(0);transition-delay:.18s}

/* Dots */
.hero-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(24px + 110px);display:flex;gap:14px;z-index:3}
.hero-dots .dot{width:20px;height:20px;border-radius:50%;padding:0;background:rgba(255,255,255,.65);border:1px solid rgba(0,0,0,.3);cursor:pointer;transition:transform .2s,background-color .2s}
.hero-dots .dot.is-active{background:#fff;transform:scale(1.12)}
.hero-dots .dot:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Contact box */
.hero-contact{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:25vw;max-width:540px;min-height:110px;background:#000;color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:0;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:16px;padding:14px 18px;box-shadow:0 10px 28px rgba(0,0,0,.28);z-index:2}
.hc-icon{width:56px;height:56px;object-fit:contain;display:block}
.hc-right{display:grid;width:100%;grid-template-rows:1fr 1fr}
.hc-title{align-self:start;justify-self:end;font-weight:800;letter-spacing:.3px}
.hc-phone{align-self:end;justify-self:end;font-weight:800;font-size:clamp(16px,2.0vw,22px)}

@media (max-width:960px){
  .hero-contact{width:100vw;left:50%;transform:translateX(-50%);border-left:0;border-right:0;min-height:120px;padding:14px 16px}
  .hero-dots{bottom:calc(24px + 120px)}
}
@media (max-width:560px){
  .hero-copy{left:5%;max-width:90vw}
  .hc-icon{width:48px;height:48px}
  .hc-title{font-size:14px}
  .hc-phone{font-size:18px}
}

/* ===== Brand intro ===== */
.brand-intro .section-head{text-align:center;max-width:900px;margin:0 auto}
.brand-intro .section-head h2{color:#820000;font-weight:800;margin:0 0 6px;line-height:1.25;font-size:clamp(28px,3vw,36px)}
.brand-intro .section-head p{font-weight:600;color:#333;margin:0}
.brand-intro .brand-grid{margin-top:45px}
.brand-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.brand-card{display:block;background:#fff;border:1px solid #eee;border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.square-img{position:relative;border-bottom:1px solid #eee;overflow:hidden;aspect-ratio:1/1;background:#fff}
.square-img img{width:100%;height:100%;object-fit:cover;display:block}
.brand-link{display:block}
.square-img.zoom img{transition:transform .35s ease}
.brand-link:hover .square-img.zoom img{transform:scale(1.08)}
.nameplate{position:absolute;top:20%;left:20%;transform:translate(-20%,-20%);display:flex;flex-direction:column;align-items:flex-start;text-align:left;background:none}
.name-kr{font-size:32px;font-weight:700;color:#fff;margin-bottom:4px}
.name-en{font-size:16px;font-weight:500;color:#fff;text-transform:uppercase;letter-spacing:.5px}

/* ===== Page hero ===== */
.page-hero{position:relative;min-height:240px;padding:60px 0;border-bottom:1px solid #eee;background-repeat:no-repeat;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;text-align:center}
.page-hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35)}
.page-hero>.container{position:relative;z-index:1;color:#fff}
.page-hero h1{margin:0 0 10px;font-size:clamp(28px,4vw,48px);font-weight:800}
.page-hero p{margin:0;font-size:clamp(15px,2vw,20px);font-weight:500}

/* ===== Parallax section ===== */
.parallax-section{position:relative;min-height:60vh;display:grid;align-items:center;background-image:var(--bg, url('/assets/images/about_parallax_1920x1080.jpg'));background-repeat:no-repeat;background-size:cover;background-position:center;background-attachment:fixed;border-top:1px solid #eee;border-bottom:0}
.parallax-section::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.62)}
.parallax-content{position:relative;will-change:transform}
.parallax-section h2,.parallax-section p{color:#fff !important}
.parallax-section h2{font-weight:700;line-height:1.25;margin:0 0 6px;font-size:clamp(18px,2.2vw,24px)}
.parallax-section p{font-weight:700;line-height:1.2;margin:50px 0 20px;font-size:clamp(28px,3.8vw,42px)}
.parallax-section a.btn{border:2px solid #fff;color:#fff !important;background:transparent;background-image:linear-gradient(#fff,#fff);background-repeat:no-repeat;background-position:left center;background-size:0% 100%;transition:background-size .35s ease,color .35s ease,border-color .35s ease;will-change:background-size,color;isolation:isolate}
.parallax-section a.btn:hover{background-size:100% 100%;color:#000 !important;border-color:#fff}
@supports (-webkit-touch-callout:none){.parallax-section{background-attachment:scroll}}

/* ===== Partner CTA (SVG waves) ===== */
.section-cta.fullbleed{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:0;border-top:0}
.svgwave-cta{position:relative;display:block;text-align:center;padding:100px 24px 160px;color:#fff;text-decoration:none;overflow:hidden;background:#001f3f;border-top:0;border-bottom:0}
.svgwave-cta .partner-inner{position:relative;z-index:1;max-width:900px;margin:0 auto}
.partner-title{margin:0 0 10px;font-size:clamp(22px,3vw,32px);font-weight:800}
.partner-desc{margin:0 0 18px;font-size:clamp(15px,2vw,18px);font-weight:500;line-height:1.6}

/* hire box - clickable */
.hire-box{
  display:inline-block;margin-top:16px;padding:12px 24px;font-size:16px;font-weight:700;
  color:#001f3f;background:#fff;border-radius:999px;border:1px solid rgba(255,255,255,.25);
  box-shadow:0 6px 16px rgba(0,0,0,.18);cursor:pointer;pointer-events:auto;position:relative;z-index:2
}

/* waves container */
.svgwave-cta .waves{position:absolute;left:0;bottom:0;width:100%;height:120px;display:block;z-index:0}

/* Always running waves */
.svgwave-cta .wave{animation:waveScroll 12s linear infinite}
.svgwave-cta .wave-2{animation:waveScroll 18s linear infinite reverse;opacity:.9}
@keyframes waveScroll{from{transform:translateX(0)}to{transform:translateX(-1200px)}}

/* ===== Products grid & detail ===== */
.products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.product-tile{display:block;border:1px solid #eee;border-radius:12px;overflow:hidden;background:#fff;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
.product-tile:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.10)}
.product-tile .thumb{position:relative;aspect-ratio:1/1;overflow:hidden;background:#fff}
.product-tile .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.product-tile:hover .thumb img{transform:scale(1.08)}
.product-tile .tile-name{display:grid;gap:2px;padding:10px 12px}
.product-tile .tile-name .kr{font-weight:700;color:var(--ink);font-size:15px}
.product-tile .tile-name .en{color:#777;font-size:12.5px;text-transform:uppercase;letter-spacing:.3px}

.product-detail{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:start}
.detail-media img{width:100%;border-radius:12px;border:1px solid #eee;background:#fff}
.detail-info h2{margin:0 0 6px}
.detail-info .en{color:#777;margin:0 0 12px}
.detail-desc p{margin:0 0 12px}
.detail-actions{margin-top:10px}
.detail-gallery{margin-top:18px;display:flex;gap:8px;flex-wrap:wrap}
.detail-gallery .g-thumb{display:block;width:90px;height:70px;border-radius:8px;overflow:hidden;border:1px solid #eee;opacity:.85}
.detail-gallery .g-thumb.active{border-color:var(--gold);opacity:1}
.detail-gallery .g-thumb img{width:100%;height:100%;object-fit:cover}

/* ===== Footer ===== */
.site-footer{border-top:1px solid #eee;background:linear-gradient(180deg,#fff,#f9f5eb)}
.site-footer .floatR{display:grid;grid-template-columns:1fr auto;gap:16px 24px;align-items:start}
.site-footer .floatR ul{grid-column:1;margin:0;padding:0;list-style:none;font-size:13px;line-height:1.5;color:#444}
.site-footer .floatR ul li{margin:2px 0}
.site-footer .floatR ul br{display:none}
.site-footer .floatR p{grid-column:2;margin:0;text-align:right;font-size:12.5px;color:#555}
.privacy-link{display:inline-block;margin-bottom:8px;padding:6px 10px;font-size:12.5px;border:1px solid #ccc;border-radius:8px;color:#333;text-decoration:none}
.privacy-link:hover{background:#f3f3f3}
.site-footer .container{padding:28px 0}

/* ===== Responsive ===== */
@media (max-width:1200px){
  .products-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:960px){
  .nav-toggle{display:flex}
  .nav{position:absolute;right:16px;top:58px;flex-direction:column;background:#fff;padding:12px;border-radius:12px;border:1px solid #eee;display:none}
  .nav.open{display:flex}
  .hero-slider .hero-contact{width:100vw}
  .products-grid{grid-template-columns:repeat(2,1fr)}
  .product-detail{grid-template-columns:1fr}
}
@media (max-width:560px){
  .brand-grid{grid-template-columns:1fr}
  .site-footer .floatR{grid-template-columns:1fr}
  .site-footer .floatR p{text-align:left;margin-top:6px}
}
@media (max-width:420px){
  .hero.hero-image{aspect-ratio:auto;min-height:48vh}
}

/* ===== Home header overlay behavior (desktop) ===== */
@media (min-width: 961px){
  .page-home .site-header{position: fixed; top: 0; left: 0; right: 0; z-index: 50;}
  .page-home .site-header.header--transparent{background: transparent; border-bottom-color: transparent; backdrop-filter: none;}
  .page-home.scrolled main{ padding-top: 72px; }
}

/* ===== Mobile hero-contact after slider ===== */
@media (max-width: 960px){
  .hero-contact{position: static; transform: none; width: 100%; border-left:0; border-right:0; box-shadow:none; margin:0;}
  .hero-dots{ bottom: 24px; }
}

/* ===== Hero: viewport max-height + slide in/out (override) ===== */
.hero-slider{max-height:100vh}
.hero-slides{position:relative;width:100%;height:100%}
.hero-slide{position:absolute;inset:0;display:block !important;transform:translateX(100%);opacity:0;transition:transform .6s ease, opacity .6s ease;will-change:transform,opacity;z-index:1}
.hero-slide.is-active{transform:translateX(0);opacity:1;z-index:2}
.hero-slide.is-leave{transform:translateX(-100%);opacity:0;z-index:1}

/* PC에서 hero-copy를 컨테이너 라인에 맞춤 */
@media (min-width: 961px){
  .hero-copy{
    position:absolute; top:50%; left:0; right:0; transform:translateY(-50%);
    width:100%;
    padding-left:  calc((100vw - var(--container)) / 2);
    padding-right: calc((100vw - var(--container)) / 2);
    max-width:none;
    display:flex; flex-direction:column; gap:12px; align-items:flex-start;
  }
  .hero-title, .hero-desc, .hero-btn{ max-width: var(--container); }
}

/* Hero text reveal */
.hero-title, .hero-desc, .hero-btn{opacity:0;transition:opacity .55s ease, transform .55s ease;will-change:opacity,transform}
.hero-title{ transform: translateY(-18px); }
.hero-desc, .hero-btn{ transform: translateY(18px); }
.hero-slide.is-active .hero-title{ opacity:1; transform: translateY(0); transition-delay:.05s; }
.hero-slide.is-active .hero-desc { opacity:1; transform: translateY(0); transition-delay:.12s; }
.hero-slide.is-active .hero-btn  { opacity:1; transform: translateY(0); transition-delay:.18s; }

/* ===== Modal (인재채용 팝업) ===== */
.modal-root{position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:1000;}
.modal-root[aria-hidden="false"]{display:flex;}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.6);}
.modal-dialog{
  position:relative; z-index:1; width:500px; height:500px;
  display:flex; align-items:center; justify-content:center;
  border-radius:14px; overflow:hidden; background:#000;
  box-shadow:0 20px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.05);
}
.modal-dialog img{width:100%; height:100%; object-fit:cover; display:block}

/* ===== Reveal variants ===== */
.reveal-up{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;}
.reveal-right{opacity:0; transform:translateX(32px); transition:opacity .65s ease, transform .65s ease;}
.reveal-zoom{opacity:0; transform:scale(.96); transition:opacity .7s ease, transform .7s ease;}
.reveal-up.show, .reveal-right.show, .reveal-zoom.show{opacity:1; transform:none;}


/* 전체 클릭 레이어 */
.parallax-hit{ position:absolute; inset:0; z-index:4; }

/* 텍스트는 보이되 클릭은 윗 레이어가 담당 */
.parallax-content{ position:relative; z-index:3; }

/* 회사소개 버튼: hero-btn과 동일 톤 (기본 흰 테두리/글자) */
.parallax-cta{
  display:inline-block;
  margin-top:10px;
  padding:10px 16px;
  background:transparent;
  color:#fff;
  border:1px solid #fff;
  border-radius:0;
  font-weight:700;
  letter-spacing:.2px;
  pointer-events:none; /* 클릭은 parallax-hit가 받도록 */
  transition:background-color .25s,color .25s;
}

/* 섹션 전체 hover(또는 포커스)시 버튼 색 반전 → hero-btn:hover와 동일 */
.parallax-section:hover .parallax-cta,
.parallax-section:focus-within .parallax-cta{
  background:#fff;
  color:#000;
}


/* 기본: 모바일용 박스 숨김 */
.hero-contact--m{ display:none; }

/* ===== 모바일 레이아웃 ===== */
@media (max-width: 960px){

  /* 1) 기존 PC용 오버레이는 모바일에서 안 보이게 */
  .hero-contact:not(.hero-contact--m){
    display:none !important;
  }

  /* 2) 모바일용 박스 노출 + 블록 스타일 */
  .hero-contact--m{
    display:grid !important;
    grid-template-columns:auto 1fr;
    align-items:center;
    width:100%;
    min-height:120px;
    background:#000; color:#fff;
    border-top:1px solid rgba(255,255,255,.18);
    border-bottom:1px solid rgba(255,255,255,.18);
    padding:14px 16px;
    box-shadow:none;
    margin:0;           /* 히어로 바로 아래 밀착 */
  }
  .hero-contact--m .hc-icon{ width:48px; height:48px; object-fit:contain; }
  .hero-contact--m .hc-title{ font-weight:800; letter-spacing:.3px; }
  .hero-contact--m .hc-phone{ font-weight:800; font-size:18px; justify-self:end; }
}

/* 기본: 모바일 로고만 숨김 아님(기본 스타일 유지) */

/* PC: nav 내부 로고 보이기 + 간격 10px 보정 */
@media (min-width: 961px){
  .brand--m{ display:none !important; }                 /* 모바일용 로고 숨김 */
  .nav .brand--pc-swap{
    display:flex; align-items:center;
    margin-right:-12px; /* nav gap 22px - 12px = 10px */
  }
}

/* 모바일: 토글 왼쪽 로고 보이기, nav 내부 로고 숨김 */
@media (max-width: 960px){
  .brand--m{ display:flex; align-items:center; }
  .brand--m .logo-img{ height:28px; }                   /* 모바일 크기 살짝 줄임(원하면 조절) */
  .nav .brand--pc-swap{ display:none !important; }      /* PC용 로고 숨김 */
}

/* brand-intro 섹션을 100vw로 확장(컨테이너 규칙 덮어쓰기) */
.brand-intro.container {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0;
}

/* 브랜드 배너 갤러리: 여백 제거 + 전폭 이미지 */
.brand-gallery{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
}
.brand-gallery .item{
  display: block;
  width: 100%;
  /* 필요하면 고정 비율 유지
  aspect-ratio: 16 / 9;
  background: #000;
  */
}
.brand-gallery .item img{
  display: block;
  width: 100%;
  height: auto;         /* 또는 object-fit: cover + 고정비율 사용 */
  /* object-fit: cover; */
}

/* ===== 고객센터(공지) 전역 스타일: pages/customer.php 에서 인라인 제거분 이관 ===== */

/* hero 배경 (뉴스) */
.page-hero--news{
  background-image: url('/assets/images/hero_news.jpg');
}

/* 고객센터 탭 */
.cs-buttons{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:0;
  border-top:1px solid #eee; border-bottom:1px solid #eee;
}
.cs-btn{
  display:flex; align-items:center; justify-content:center;
  min-height:64px; font-weight:700; text-decoration:none;
  background:#fff; border-left:1px solid #eee; color:var(--ink);
  transition:background-color .22s ease,color .22s ease,border-color .22s ease;
}
.cs-btn:first-child{ border-left:none }
.cs-btn:hover{ background:var(--claret); color:#fff; border-color:var(--claret) }
.cs-btn.active{ background:var(--claret); color:#fff; border-color:var(--claret) }

/* 공지 목록 */
.notice-wrap{
  background:#fff; border:1px solid #eee; border-radius:12px;
  box-shadow:0 6px 16px rgba(0,0,0,.06); overflow:hidden; margin-top:18px;
}
.notice-head{ padding:16px 18px; border-bottom:1px solid #eee; font-weight:800 }

.notice-table{ width:100%; border-collapse:collapse; table-layout:fixed; }
.notice-table col.no   { width:72px; }
.notice-table col.auth { width:120px; }
.notice-table col.date { width:120px; }
.notice-table col.ttl  { width:auto; }

.notice-table th,.notice-table td{
  padding:12px 10px; border-bottom:1px solid #f1f1f1; font-size:15px;
}
.notice-table th{ background:#fafafa; text-align:center; color:#333 }
.notice-table td{ vertical-align:middle; word-break:keep-all }
.notice-table .no{ text-align:center; color:#666 }
.notice-table .title{ padding-left:6px; }
.notice-table .title a{
  display:inline-block; max-width:100%; color:#222; text-decoration:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.notice-table .title a:hover{ text-decoration:underline }
.notice-table .author{ text-align:center; color:#666 }
.notice-table .date{ text-align:center; color:#666 }
.notice-empty{ padding:40px; text-align:center; color:#777 }

/* hero와 붙이기 */
.cs-tight{ padding-top:0 }

/* 페이지네이션 */
.pagination{
  display:flex; gap:8px; justify-content:center; padding:16px;
}
.pagination a,.pagination span{
  min-width:36px; height:36px; display:inline-grid; place-items:center;
  padding:0 10px; border:1px solid #ddd; border-radius:8px;
  background:#fff; color:#333; text-decoration:none; font-size:14px;
}
.pagination .current{ background:#820000; color:#fff; border-color:#820000 }
.pagination a:hover{ background:#f7f7f7 }

/* 모바일 튜닝 */
@media (max-width:560px){
  .cs-btn{ min-height:56px; font-size:14px }
  .notice-table .title a{
    max-width:10ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .notice-table th, .notice-table td { font-size:14px; padding:10px 8px; }
  .notice-table col.no   { width:56px; }
  .notice-table col.auth { width:90px;  }
  .notice-table col.date { width:96px;  }
}


/* ===== FAQ / 고객센터 전역 스타일 ===== */

/* FAQ 히어로 배경 */
.page-hero--faq{
  background-image:url('/assets/images/hero_instructors.jpg'); /* 기존 마크업 이미지 그대로 사용 */
}

/* 탭(이미 customer에서 정의했다면 생략 가능 — 중복 선언 시 동일 규칙 유지됨) */
.cs-buttons{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:0;
  border-top:1px solid #eee; border-bottom:1px solid #eee;
}
.cs-btn{
  display:flex; align-items:center; justify-content:center;
  min-height:64px; font-weight:700; text-decoration:none;
  background:#fff; border-left:1px solid #eee; color:var(--ink);
  transition:background-color .22s ease,color .22s ease,border-color .22s ease;
}
.cs-btn:first-child{ border-left:none }
.cs-btn:hover{ background:var(--claret); color:#fff; border-color:var(--claret) }
.cs-btn.active{ background:var(--claret); color:#fff; border-color:var(--claret) }
.cs-tight{ padding-top:0 }
@media (max-width:560px){ .cs-btn{ min-height:56px; font-size:14px } }

/* FAQ */
.faq{ margin:18px 0; }
.faq-list{ list-style:none; margin:0; padding:0; }
.faq-item{ border:none; background:transparent; }

/* 질문 */
.faq-question{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  width:100%; padding:16px 14px;
  background:#fff; color:#111;
  border:none; outline:none;
  user-select:none; text-align:left;
  transition: background-color .22s ease, color .22s ease;
}
.faq-question h6{ margin:0; font-size:16px; line-height:1.5; font-weight:500; }

/* + 아이콘 */
.faq-question .q-icon{
  margin-left:auto; width:18px; height:18px; flex:0 0 18px;
  position:relative; transform:rotate(0deg); transition:transform .22s ease;
}
.faq-question .q-icon:before,
.faq-question .q-icon:after{
  content:""; position:absolute; left:50%; top:50%; background:#777; transition:background .22s ease;
}
.faq-question .q-icon:before{ width:12px; height:2px; transform:translate(-50%,-50%); }
.faq-question .q-icon:after { width:2px;  height:12px; transform:translate(-50%,-50%); }

/* 오픈 상태 */
.faq-item.is-open .faq-question{ background:var(--claret); color:#fff; }
.faq-item.is-open .q-icon{ transform:rotate(45deg); }
.faq-item.is-open .q-icon:before, .faq-item.is-open .q-icon:after{ background:#fff; }

/* 답변 */
.faq-answer{
  overflow:hidden; height:0;
  transition: height .28s ease;
  background:#fff;
}
.faq-answer .inner{
  padding:0 14px 16px;
  color:#222; line-height:1.8;
  border:none;
}
.faq-answer p{ margin:12px 0 0; }
.faq-answer a{ color:#0a58ca; text-decoration:underline; }

/* 키보드 포커스 */
.faq-question:focus-visible{
  outline:2px solid var(--claret); outline-offset:2px;
}

/* ===== Instructors page ===== */

/* 히어로 배경 */
.page-hero--instructors{
  background-image:url('/assets/images/hero_instructors.jpg');
}

/* 검색 바 */
.search-portal{max-width:720px;margin:20px auto 32px;}
.search-portal .fieldwrap{
  display:flex; align-items:center;
  border:2px solid #ff9800; border-radius:999px; overflow:hidden;
  background:#fff;
}
.search-portal input[type="search"]{
  flex:1; padding:14px 16px 14px 18px; border:0; outline:0; font-size:16px; color:#222;
  background:#fff;
}
.search-portal input[type="search"]::placeholder{color:#999}
.search-portal button{
  display:flex; align-items:center; justify-content:center;
  width:56px; min-width:56px; height:48px; border:0; background:transparent;
  color:#ff9800; cursor:pointer; transition:background-color .2s ease;
}
.search-portal button:hover{background:rgba(255,152,0,.08)}
.search-portal .btn-icon{width:22px; height:22px; stroke-width:2.2}
@media (max-width:560px){
  .search-portal{max-width:92vw}
  .search-portal button{height:46px; width:52px; min-width:52px}
}

/* 카드 레이아웃 */
.cards{display:grid; gap:14px}
.instructor-card{
  display:grid; grid-template-columns:84px 1fr; gap:14px; align-items:center;
  border:1px solid #eee; border-radius:12px; padding:12px; background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.05);
}
.instructor-card .avatar{
  width:84px; height:84px; object-fit:cover; border-radius:50%;
  border:1px solid #eee; background:#fff;
}
.instructor-card .tag{margin:.5px 0 6px; color:#820000; font-weight:700}

/* ===== Instructors card (content upgrade only) ===== */
.instructor-card{
  position:relative;
  overflow:hidden;
}

/* 카드에 은은한 포인트 라인(브랜드 컬러) */
.instructor-card:before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background:linear-gradient(180deg,var(--claret),var(--gold));
  opacity:.9;
}

/* 텍스트 영역 */
.instructor-card .instructor-meta{
  display:grid;
  gap:6px;
  min-width:0;
}

.instructor-card .instructor-top{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  min-width:0;
}

.instructor-card .instructor-name{
  margin:0;
  font-weight:800;
  letter-spacing:.2px;
  font-size:18px;
  line-height:1.25;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 직급 배지 */
.instructor-card .badge-level{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12.5px;
  color:#fff;
  background:linear-gradient(90deg,var(--claret),var(--claret-2));
  border:1px solid rgba(0,0,0,.04);
  box-shadow:0 6px 14px rgba(122,27,30,.15);
}

/* 소속 라인 */
.instructor-card .dept-line{
  margin:0;
  display:flex;
  align-items:center;
  gap:8px;
  color:#333;
  font-weight:700;
  min-width:0;
}
.instructor-card .dept-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 3px rgba(212,175,55,.18);
  flex:0 0 auto;
}
.instructor-card .dept-text{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 연락처 라인 */
.instructor-card .contact-line{
  margin:0;
  display:flex;
  align-items:baseline;
  gap:10px;
  padding-top:8px;
  border-top:1px dashed #eee;
  color:var(--muted);
  min-width:0;
}
.instructor-card .contact-label{
  flex:0 0 auto;
  font-size:12.5px;
  font-weight:800;
  color:#444;
  background:#fafafa;
  border:1px solid #eee;
  padding:4px 8px;
  border-radius:8px;
}
.instructor-card .contact-value{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:700;
}

/* 사진이 더 선명해 보이도록 */
.instructor-card .avatar{
  border:2px solid rgba(212,175,55,.25);
}

/* ===== Mobile tuning ===== */
@media (max-width:560px){
  .instructor-card{
    grid-template-columns:72px 1fr;
    gap:12px;
    padding:12px;
  }
  .instructor-card .avatar{
    width:72px; height:72px;
  }
  .instructor-card .instructor-name{
    font-size:16.5px;
  }
  .instructor-card .badge-level{
    font-size:12px;
    padding:5px 9px;
  }

  /* 모바일은 연락처를 한 줄에 다 넣기 빡빡하면, 라벨/값 줄바꿈 */
  .instructor-card .contact-line{
    align-items:flex-start;
    flex-direction:column;
    gap:6px;
  }
  .instructor-card .contact-value{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    line-height:1.45;
  }
}

/* ===== 가격 표시 (리스트/상세) ===== */
.product-tile .tile-name .price{
  color:#820000; font-weight:800; font-size:14px; margin-top:4px;
}
.price-lg{
  font-size:20px; font-weight:800; color:#820000; margin:6px 0 10px;
}

/* ===== 상세: 미리보기 썸네일(최대 5) ===== */
.detail-previews{
  display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 14px;
}
.preview-thumb{
  display:block; width:84px; height:84px; border-radius:8px; overflow:hidden;
  border:1px solid #eee; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.preview-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* ===== 상세보기 이미지(무제한) — container 가로 꽉차게 ===== */
.detail-photos{ margin-top:18px; }
.detail-photo{
  display:block; width:100%; height:auto; border:1px solid #eee; border-radius:12px;
  background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.05);
}
.detail-photo + .detail-photo{ margin-top:12px; }

/* ===== 갤러리 우측하단 '목록으로' 버튼 ===== */
.detail-gallery{
  position:relative; padding-bottom:44px; /* 버튼 공간 확보 */
}
.detail-actions-inline{
  position:absolute; right:0; bottom:0;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; font-weight:700; text-decoration:none; cursor:pointer;
  border-radius:999px; border:1px solid transparent; transition:background-color .2s,color .2s,border-color .2s,opacity .2s;
}
.btn-outline{
  background:#fff; color:#222; border-color:#ccc;
}
.btn-outline:hover{
  background:#222; color:#fff; border-color:#222; /* 마우스 오버 시 어두워짐 */
}
.btn-pill{ border-radius:999px; }

/* ===== 상세: ‘목록으로’ 버튼 위치(설명 바로 아래 우측) ===== */
.detail-actions--underdesc{
  display:flex;
  justify-content:flex-end;
  margin-top:10px;
}

/* ===== 상세보기 이미지를 테두리/둥글림/그림자/여백 없이 전폭으로 ===== */
.detail-photos--flush{
  margin-top:18px;
}
.detail-photo--flush{
  display:block;
  width:100%;
  height:auto;
  border:none;
  border-radius:0;
  box-shadow:none;
  margin:0;
}
.detail-photo--flush + .detail-photo--flush{
  margin-top:0; /* 이미지 사이도 여백 없음 */
}

/* ===== 미리보기 썸네일: a → button으로 바꿔도 동일한 비주얼 ===== */
.preview-thumb{
  display:block;
  width:84px; height:84px;
  border-radius:8px; overflow:hidden;
  border:1px solid #eee; background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  padding:0; cursor:pointer;
}
.preview-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.preview-thumb:focus-visible{
  outline:2px solid var(--claret);
  outline-offset:2px;
}

/* ===== 구매하기(전폭) ===== */
.buy-area{ margin-top:12px; }
.btn-buy{
  display:block; width:100%;
  padding:14px 16px;
  background:#e8340d; color:#fff; text-align:center; text-decoration:none;
  font-weight:800; letter-spacing:.2px; border-radius:10px; /* 필요시 0으로 변경 가능 */
  transition:filter .2s ease, opacity .2s ease, transform .02s ease;
  border:1px solid rgba(0,0,0,.05);
  box-shadow:0 8px 16px rgba(232,52,13,.18);
}
.btn-buy:hover{ filter:brightness(.92); }
.btn-buy:active{ transform:translateY(1px); }

/* ===== 상세 설명 구분칸 (detail-gallery 시작점) ===== */
.section-divider{
  margin:24px 0 12px;
}
.section-divider--primary{
  background:#e8340d; color:#fff;
  padding:10px 14px;
  border-radius:10px;
}
.section-divider--primary h3{
  margin:0; font-size:16px; font-weight:800;
}

/* ===== (재확인) 상세보기 전폭/플러시 ===== */
.detail-photos--flush{ margin-top:18px; }
.detail-photo--flush{
  display:block; width:100%; height:auto;
  border:none; border-radius:0; box-shadow:none; margin:0;
}
.detail-photo--flush + .detail-photo--flush{ margin-top:0; }

/* ===== (재확인) 미리보기 썸네일 클릭 영역(button) ===== */
.detail-previews{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 14px; }
.preview-thumb{
  display:block; width:84px; height:84px; border-radius:8px; overflow:hidden;
  border:1px solid #eee; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.05);
  padding:0; cursor:pointer;
}
.preview-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ===== (재확인) 목록으로 버튼(설명 아래 우측 정렬) ===== */
.detail-actions--underdesc{ display:flex; justify-content:flex-end; margin-top:10px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; font-weight:700; text-decoration:none; cursor:pointer; border-radius:999px; border:1px solid transparent; transition:background-color .2s,color .2s,border-color .2s,opacity .2s; }
.btn-outline{ background:#fff; color:#222; border-color:#ccc; }
.btn-outline:hover{ background:#222; color:#fff; border-color:#222; }
.btn-pill{ border-radius:999px; }

/* 회사소개 비주얼: 컨테이너 가로 100%로 */
.about-visual img{
  display:block;
  width:100%;
  height:auto;       /* 세로는 비율 유지 */
  object-fit:cover;  /* 필요 시 상단/하단 잘라내며 채움 */
  border-radius:0;   /* 둥글림 제거(원하면 유지) */
}