/* ONETEX demo — 공통 스타일 (포인트 컬러는 --accent 한 줄로 교체) */
:root{
  --ink:#111111; --ink2:#3b3b3b; --sub:#7a7a76; --line:#dcdcd6; --bg:#ffffff; --bg2:#f4f4f1;
  --accent:#d41765; --logo:#54498d; --err:#d4213d;
  --max:1280px; --gutter:40px; --strip:26px; --nav:72px;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--strip) + var(--nav) + 12px); }
body{ font-family:'Noto Sans KR','Pretendard','Malgun Gothic',sans-serif; color:var(--ink); background:var(--bg); line-height:1.65; font-size:16px; -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }
.eyebrow{ font-size:12px; letter-spacing:.28em; font-weight:500; color:var(--accent); text-transform:uppercase; }
h1,h2,h3{ line-height:1.3; letter-spacing:-.02em; }

/* 샘플 안내 띠 */
.strip{ position:fixed; top:0; left:0; right:0; height:var(--strip); background:#000; color:#bdbdb6; font-size:11px; letter-spacing:.06em; display:flex; align-items:center; justify-content:center; z-index:60; }
.strip b{ color:#fff; font-weight:500; margin-right:8px; }

/* 헤더 / GNB */
.gnb{ position:fixed; top:var(--strip); left:0; right:0; height:var(--nav); z-index:50; background:#fff; border-bottom:1px solid var(--line); transition:background .3s,border-color .3s; }
.gnb .wrap{ display:flex; align-items:center; height:100%; justify-content:space-between; }
.logo{ display:flex; align-items:center; gap:12px; font-weight:900; font-size:24px; letter-spacing:.1em; color:var(--logo); }
.logo img{ height:38px; width:auto; display:block; }
.menu{ display:flex; height:100%; }
.menu > li{ position:relative; height:100%; display:flex; align-items:center; }
.menu > li > a{ padding:0 34px; font-weight:600; font-size:16px; height:100%; display:flex; align-items:center; position:relative; }
.menu > li > a:after{ content:''; position:absolute; left:34px; right:34px; bottom:-1px; height:3px; background:var(--accent); transform:scaleX(0); transition:transform .25s; }
.menu > li:hover > a:after, .menu > li.active > a:after{ transform:scaleX(1); }
.sub{ position:absolute; top:100%; left:50%; transform:translateX(-50%); min-width:170px; background:#fff; border:1px solid var(--line); border-top:0; padding:10px 0; opacity:0; visibility:hidden; transition:opacity .2s; box-shadow:0 14px 28px rgba(0,0,0,.08); }
.menu > li:hover .sub{ opacity:1; visibility:visible; }
.sub a{ display:block; padding:9px 24px; font-size:14px; color:var(--ink2); text-align:center; white-space:nowrap; }
.sub a:hover{ color:var(--accent); }
.lang{ font-size:12px; letter-spacing:.14em; color:var(--sub); }
.lang b{ color:var(--ink); font-weight:600; }
.burger{ display:none; width:28px; height:20px; position:relative; }
.burger i{ position:absolute; left:0; right:0; height:2px; background:var(--ink); }
.burger i:nth-child(1){ top:0 } .burger i:nth-child(2){ top:9px } .burger i:nth-child(3){ bottom:0 }
/* 메인 히어로 위: 투명 헤더 */
body.home .gnb:not(.solid){ background:transparent; border-color:rgba(255,255,255,.18); color:#fff; }
body.home .gnb:not(.solid) .logo{ color:#fff; }
body.home .gnb:not(.solid) .burger i{ background:#fff; }
body.home .gnb:not(.solid) .lang, body.home .gnb:not(.solid) .lang b{ color:#cfcfca; }

/* 서브 히어로 */
.subhero{ position:relative; margin-top:calc(var(--strip) + var(--nav)); height:300px; background:#0d0d0d; color:#fff; overflow:hidden; display:flex; align-items:flex-end; }
.subhero:before{ content:''; position:absolute; inset:0; background:repeating-linear-gradient(115deg,transparent 0 46px,rgba(255,255,255,.035) 46px 47px); }
.subhero:after{ content:''; position:absolute; right:-80px; top:-60px; width:460px; height:460px; border-radius:50%; border:70px solid var(--accent); opacity:.9; }
.subhero .wrap{ position:relative; z-index:1; padding-bottom:44px; width:100%; }
.subhero h1{ font-size:44px; font-weight:700; }
.subhero .en{ display:block; margin-top:8px; font-size:13px; letter-spacing:.42em; color:#a9a9a3; font-weight:300; }
.crumb{ border-bottom:1px solid var(--line); font-size:13px; color:var(--sub); }
.crumb .wrap{ height:50px; display:flex; align-items:center; gap:10px; }
.crumb b{ color:var(--ink); font-weight:500; }

/* 이미지 자리표시 */
.ph{ position:relative; background:linear-gradient(135deg,#2a2a2a,#0e0e0e); overflow:hidden; min-height:100px; }
.ph:before{ content:''; position:absolute; inset:0; background:repeating-linear-gradient(115deg,transparent 0 22px,rgba(255,255,255,.05) 22px 23px); }
.ph:after{ content:attr(data-label); position:absolute; left:16px; bottom:12px; font-size:11px; letter-spacing:.04em; color:rgba(255,255,255,.65); }
.ph.g2{ background:linear-gradient(135deg,#d41765,#7a0b38); }
.ph.g3{ background:linear-gradient(135deg,#e9e7df,#c9c6ba); } .ph.g3:after{ color:rgba(0,0,0,.5); } .ph.g3:before{ background:repeating-linear-gradient(115deg,transparent 0 22px,rgba(0,0,0,.05) 22px 23px); }
.ph.g4{ background:linear-gradient(135deg,#3d4c5c,#1a232c); }
.ph.g5{ background:linear-gradient(135deg,#8b8579,#4f4a42); }

/* 실제 사진을 넣은 이미지 블록 / 서브 히어로 (이미지 경로·위치는 각 HTML 인라인 style) */
.ph.photo{ background-color:#111; background-size:cover; background-repeat:no-repeat; background-position:center; }
.ph.photo:before, .ph.photo:after{ display:none; }
.subhero.photo{ background-color:#0d0d0d; background-size:cover; background-repeat:no-repeat; background-position:center; }
.subhero.photo:before{ background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.5) 55%,rgba(0,0,0,.25) 100%); }
.subhero.photo:after{ display:none; }
.subhero.photo h1:after{ content:''; display:block; width:44px; height:3px; background:var(--accent); margin-top:18px; }

/* 공통 섹션 */
section.blk{ padding:110px 0; }
.sec-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:44px; }
.sec-head h2{ font-size:40px; font-weight:700; margin-top:10px; }
.sec-head p{ color:var(--sub); margin-top:12px; max-width:560px; }
.pill{ display:inline-flex; align-items:center; gap:10px; background:var(--accent); color:#fff; padding:13px 28px; border-radius:40px; font-size:14px; font-weight:500; white-space:nowrap; transition:filter .2s; }
.pill:hover{ filter:brightness(.88); }
.pill.line{ background:transparent; color:var(--ink); border:1px solid var(--ink); }
.pill.line:hover{ background:var(--ink); color:#fff; filter:none; }
.three-img{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.three-img .ph{ height:300px; }
.three-card{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px; }
.three-card > div{ background:var(--bg2); padding:28px 28px 32px; }
.three-card h3{ font-size:18px; font-weight:600; margin-bottom:10px; }
.three-card p{ font-size:14px; color:var(--ink2); }
.alt{ background:var(--bg2); }
.alt .three-card > div{ background:#fff; }

/* 푸터 */
footer{ background:#0d0d0d; color:#9c9c96; padding:60px 0 44px; font-size:13px; }
footer .top{ display:flex; justify-content:space-between; gap:40px; padding-bottom:30px; border-bottom:1px solid #2a2a2a; flex-wrap:wrap; }
footer .logo{ color:#fff; font-size:22px; }
footer .logo img{ height:34px; }
footer nav{ display:flex; gap:26px; }
footer nav a:hover{ color:#fff; }
footer .addr{ margin-top:28px; line-height:1.9; }
footer .copy{ margin-top:18px; color:#6a6a65; }

/* 스크롤 페이드인 */
.fade{ opacity:0; transform:translateY(24px); transition:opacity .7s, transform .7s; }
.fade.in{ opacity:1; transform:none; }

/* 반응형 */
@media (max-width:1000px){
  :root{ --gutter:22px; }
  .burger{ display:block; }
  .lang{ display:none; }
  .menu{ position:fixed; top:calc(var(--strip) + var(--nav)); left:0; right:0; background:#fff; color:var(--ink); flex-direction:column; height:auto; max-height:0; overflow:hidden; transition:max-height .3s; border-bottom:1px solid var(--line); }
  .gnb.open .menu{ max-height:520px; }
  .menu > li{ height:auto; flex-direction:column; align-items:stretch; }
  .menu > li > a{ padding:16px 22px; height:auto; color:var(--ink); }
  .menu > li > a:after{ display:none; }
  .sub{ position:static; transform:none; opacity:1; visibility:visible; border:0; box-shadow:none; padding:0 0 8px; display:flex; flex-wrap:wrap; }
  .sub a{ padding:4px 22px 4px 30px; color:var(--sub); }
  body.home .gnb.open{ background:#fff; color:var(--ink); }
  body.home .gnb.open .logo{ color:var(--logo); }
  body.home .gnb.open .burger i{ background:var(--ink); }
  .sec-head{ flex-direction:column; align-items:flex-start; }
  .sec-head h2{ font-size:30px; }
  .three-img, .three-card{ grid-template-columns:1fr; }
  .three-img .ph{ height:200px; }
  section.blk{ padding:70px 0; }
  .subhero{ height:230px; } .subhero h1{ font-size:32px; }
  .subhero:after{ width:300px; height:300px; border-width:48px; right:-110px; }
}