@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;800&family=Noto+Sans+KR:wght@400;500;700;800&display=swap");

/* =========================
   Global Variables (Refined)
   ========================= */
:root {
  --primary: #0B2A3B;
  --primary-dark: #071D28;

  --accent: #C9A227; /* subtle gold */
  --accent-soft: rgba(201,162,39,0.16);

  --text: #1f2326;
  --muted: #5b6368;
  --line: #eeeeee;

  --bg: #fbfaf8;
  --bg-soft: #f5f3ef;

  --shadow: 0 10px 30px rgba(15, 20, 24, 0.06);
  --shadow-hover: 0 18px 46px rgba(15, 20, 24, 0.10);

  --radius: 14px;

  --font-base: "Noto Sans KR", "Noto Sans JP", "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
  --font-head: "Noto Sans KR", "Noto Sans JP", "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
  --font-en: "Playfair Display", serif;
}

/* =========================
   Reset & Base
   ========================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-base);
  color: var(--text);
  line-height: 1.8;
  background: var(--bg);
  overflow-x: hidden;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* =========================
   Premium Base Enhancements
   ========================= */
html { scroll-behavior: smooth; }

/* Keep the form visible below sticky header when linked with #contact-form */
#contact-form { scroll-margin-top: 132px; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.1px;
}

a { text-decoration: none; color: inherit; transition: .25s; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.container-fluid { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

section { padding: 80px 0; }

@media (max-width: 900px) {
  section { padding: 60px 0; }
}

/* =========================
   Header (Glass)
   ========================= */
.header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15, 20, 24, 0.05);
}
.header-inner {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.brand img { height: 40px; }
.brand b { color: var(--primary); }

/* =========================
   Language Switcher (Safe)
   ========================= */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: 18px;
}
.lang-switch a {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.lang-switch a:hover { color: var(--primary); }
.lang-switch a.active {
  color: var(--primary);
  opacity: 1;
  position: relative;
}
.lang-switch a.active::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: var(--primary);
  margin-top: 2px;
}
@media (max-width: 600px) {
  .lang-switch { gap: 8px; margin-right: 12px; }
  .lang-switch a { font-size: 11px; letter-spacing: 0.6px; }
}

/* =========================
   Menu Button
   ========================= */
.menu-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  color: #111;
}
.menu-btn:hover {
  border-color: rgba(11,42,59,0.35);
  color: var(--primary);
}
.menu-icon { width: 18px; height: 12px; position: relative; }
.menu-icon span,
.menu-icon::before,
.menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.menu-icon::before { top: 0; }
.menu-icon span { top: 5px; }
.menu-icon::after { bottom: 0; }
.menu-label {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1px;
}

/* =========================
   Drawer
   ========================= */
.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.46);
  opacity: 0;
  pointer-events: none;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  z-index: 1200;
}
.drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: min(340px, 86vw);
  background: #fff;
  transform: translateX(100%);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  z-index: 1300;
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 40px rgba(0,0,0,0.14);
}
.drawer.open { transform: translateX(0); }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }

.drawer-head {
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.drawer-title {
  font-weight: 800;
  font-family: var(--font-head);
  letter-spacing: 0.6px;
}
.drawer-close {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 22px;
  cursor: pointer;
}
.drawer-close:hover { border-color: rgba(0,0,0,0.2); }

.drawer-nav { padding: 8px 20px 20px; overflow-y: auto; }
.drawer-nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  letter-spacing: 0.3px;
  font-size: 1rem;
}
.drawer-nav a small {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.drawer-nav a.active { color: var(--primary); font-weight: 800; }

.drawer-cta {
  margin-top: auto;
  padding: 18px 20px;
  background: var(--bg-soft);
  border-top: 1px solid rgba(15, 20, 24, 0.08);
}

/* =========================
   Buttons
   ========================= */
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 14px 30px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.95rem;
  gap: 10px;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 10px 24px rgba(11,42,59,0.18);
}
.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
}
.btn-outline {
  border: 1px solid rgba(15,20,24,0.14);
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn-outline:hover {
  border-color: rgba(11,42,59,0.45);
  color: var(--primary);
  transform: translateY(-2px);
}
.btn-block { width: 100%; }

/* EN pages: keep CTA labels on one line on desktop */
@media (min-width: 901px){
  html[lang="en"] .btn{
    white-space: nowrap;
  }
}

/* =========================
   Hero (Video)
   ========================= */
.hero {
  position: relative;
  width: 100%;
  height: 82vh;
  min-height: 520px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: none;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(1200px 700px at 50% 35%, rgba(0,0,0,0.10), rgba(0,0,0,0.50));
}
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: center;
}
.hero-box {
  color: #fff;
  max-width: 920px;
  padding: 0 20px;
  text-align: center;
}
.hero-box h1 {
  font-family: var(--font-head);
  font-size: 3.45rem;
  line-height: 1.12;
  margin-bottom: 22px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-shadow: 0 10px 28px rgba(0,0,0,0.38);
}
.hero-box p {
  font-size: 1.08rem;
  opacity: 0.95;
  margin-bottom: 34px;
  font-weight: 500;
  line-height: 1.85;
  text-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.hero-box .btn-outline {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.65);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-box .btn-outline:hover {
  background: #fff;
  color: var(--primary);
  border-color: #fff;
}
@media (max-width: 900px) {
  .hero { height: 72vh; min-height: 480px; }
  .hero-box h1 { font-size: 2.25rem; }
  .hero-box p { font-size: 1rem; }
}

/* =========================
   Page Head (Subpages)
   ========================= */
.page-head {
  padding: 96px 0 54px;
  background: url('photo/main.jpg') center/cover no-repeat;
  position: relative;
  color: #fff;
  text-align: center;
}
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.46);
}
.page-head .container { position: relative; z-index: 1; }
.page-head h1 {
  font-family: var(--font-head);
  font-size: 2.35rem;
  margin-bottom: 10px;
}
.page-head p {
  font-size: 0.98rem;
  opacity: 0.92;
  letter-spacing: 1px;
}

/* =========================
   Section Title
   ========================= */
.section-title {
  text-align: center;
  margin-bottom: 50px;
}
.section-title h2 {
  font-family: var(--font-head);
  font-size: 2.35rem;
  margin-bottom: 10px;
  letter-spacing: 0.2px;
}
.section-title .sub {
  color: var(--accent);
  font-weight: 900;
  letter-spacing: 1px;
  font-size: 0.9rem;
  text-transform: uppercase;
}

/* =========================
   Cards / Base components
   ========================= */
.card {
  background: #fff;
  border: 1px solid rgba(15, 20, 24, 0.08);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(15, 20, 24, 0.12);
}

.block { padding: 26px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
}

.mini { padding: 28px; text-align: center; }
.mini h3 { font-weight: 700; margin-bottom: 10px; font-family: var(--font-head); }
.mini p { color: var(--muted); font-size: 0.95rem; line-height: 1.75; }
.mini .more { margin-top: 14px; display: inline-block; }

.thumb {
  height: 250px;
  width: 100%;
  overflow: hidden;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }

.item-body {
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.item-title {
  font-family: var(--font-head);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-top: 2px;
}

.badges { display: flex; gap: 8px; flex-wrap: wrap; }
.badge {
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 6px;
  font-weight: 800;
  background: rgba(15,20,24,0.06);
  color: rgba(15,20,24,0.70);
  border: 1px solid rgba(15,20,24,0.06);
}
.badge.primary { background: var(--primary); color: #fff; }
.badge.accent { background: var(--accent); color: #111; border-color: rgba(201,162,39,0.35); }

.meta {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.65;
}

.more {
  margin-top: 6px;
  color: var(--primary);
  font-weight: 800;
  font-size: 0.92rem;
  display: inline-block;
}

/* Lists */
.list { display: grid; gap: 22px; }

/* =========================
   Property grid
   ========================= */
.prop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 1024px) { .prop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .prop-grid { grid-template-columns: 1fr; } }

.prop-price { font-weight: 800; color: var(--primary); }
.prop-spec { color: var(--muted); font-size: 0.92rem; line-height: 1.65; }
.card-actions { margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap; }

/* Listing cards: keep CTA baseline aligned */
.prop-grid > .card{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.prop-grid > .card .item-body{
  flex: 1 1 auto;
}
.prop-grid > .card .card-actions{
  margin-top: auto;
  padding-top: 6px;
}
.prop-grid > .card .card-actions .btn{
  width: 100%;
  justify-content: center;
}

/* =========================
   Property Slider (Horizontal)
   ========================= */
.prop-slider {
  display: flex;
  overflow-x: auto;
  gap: 24px;
  padding: 10px 10px 30px; /* 그림자 잘림 방지 및 스크롤바 여백 */
  margin: -10px -10px 0;   /* 패딩으로 늘어난 영역 보정 */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  align-items: stretch; /* 모든 카드의 높이를 가장 긴 카드에 맞춰 통일 */
}
.prop-slider::-webkit-scrollbar { height: 6px; }
.prop-slider::-webkit-scrollbar-track {
  background: rgba(15, 20, 24, 0.04);
  border-radius: 10px;
}
.prop-slider::-webkit-scrollbar-thumb {
  background: rgba(201, 162, 39, 0.4); /* 고급스러운 반투명 골드 */
  border-radius: 10px;
}
.prop-slider::-webkit-scrollbar-thumb:hover {
  background: rgba(201, 162, 39, 0.8);
}
.prop-slider > .card {
  flex: 0 0 auto;
  width: 340px; 
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}
.prop-slider > .card .item-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.prop-slider > .card .card-actions { margin-top: auto; padding-top: 14px; } /* 버튼을 항상 맨 밑으로 밀어냄 */
.prop-slider > .card .card-actions .btn { width: 100%; justify-content: center; }
@media (max-width: 768px) {
  .prop-slider > .card { width: 280px; }
  .prop-slider { gap: 16px; }
}

/* =========================
   Forms
   ========================= */
.form {
  display: grid;
  gap: 14px;
}
.field label {
  font-weight: 800;
  font-size: 0.92rem;
}
.input, .select, .textarea {
  width: 100%;
  padding: 12px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: var(--font-base);
  font-size: 15px;
  outline: none;
  background: #fff;
}
.textarea { min-height: 140px; resize: vertical; }

.input:focus, .select:focus, .textarea:focus {
  border-color: rgba(11,42,59,0.55);
  box-shadow: 0 0 0 4px rgba(11,42,59,0.10);
}

/* =========================
   Process steps
   ========================= */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.step {
  text-align: center;
  padding: 16px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.step .num {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  margin-bottom: 10px;
}
.step h4 { font-size: 0.98rem; margin-bottom: 6px; }
.step p { color: var(--muted); font-size: 0.9rem; line-height: 1.6; }

@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; }
}

/* =========================
   FAQ
   ========================= */
.faq details {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  background: #fff;
  margin-bottom: 12px;
}
.faq summary {
  cursor: pointer;
  font-weight: 900;
}
.faq p { margin-top: 10px; color: var(--muted); }

/* =========================
   Company profile table
   ========================= */
.profile-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.profile-grid div {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.profile-grid div:nth-child(odd) {
  background: var(--bg-soft);
  font-weight: 900;
}
.profile-grid div:nth-last-child(-n+2) { border-bottom: none; }

@media (max-width: 700px) {
  .profile-grid { grid-template-columns: 1fr; }
}

/* =========================
   News
   ========================= */
.card.news { overflow: hidden; }
.news-row {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}
.news-row:last-child { border-bottom: none; }
.news-date { color: #888; min-width: 90px; font-size: 0.9rem; }
.news-title { font-weight: 700; flex: 1; }
@media (max-width: 900px) {
  .news-row { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* =========================
   Swiper support (index only)
   ========================= */
.swiper-wrapper { align-items: stretch !important; }
.swiper-slide { height: auto !important; display: flex !important; }
.swiper-slide .card { width: 100%; display: flex !important; flex-direction: column !important; }
.swiper-slide .item-body { flex: 1 !important; }

.swiper-button-next,
.swiper-button-prev {
  color: var(--primary) !important;
  background: rgba(255,255,255,0.92);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
.swiper-button-next:after,
.swiper-button-prev:after { font-size: 16px !important; }
.swiper-pagination-bullet { opacity: 0.35; }
.swiper-pagination-bullet-active { opacity: 1; background: var(--primary) !important; }

/* =========================
   Footer
   ========================= */
.footer {
  background: #1a1a1a;
  color: #fff;
  padding: 56px 0;
  text-align: center;
}
.footer-menu {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  opacity: 0.75;
}
.footer-menu a:hover { opacity: 1; color: var(--accent); }
.footer-copy { opacity: 0.45; font-size: 0.85rem; }

/* =========================
   SNS / Contact Card (Index)
   ========================= */
.sns-contact { padding: 55px 0; background: #fff; }
.sns-card{
  border: 1px solid rgba(15, 20, 24, 0.08);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
  background: #fff;
}
.sns-top{
  display:flex;
  gap:18px;
  padding:20px;
  align-items: stretch;
}
.sns-qr-area{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.sns-qr{
  width:140px;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}
.sns-qr-badge{
  font-weight:900;
  font-size:12px;
  letter-spacing:.6px;
  padding:10px 12px;
  background: var(--bg-soft);
  border-bottom: 1px solid rgba(15, 20, 24, 0.05);
}
.sns-qr img{
  width:100%;
  height:auto;
  display:block;
  padding:10px;
}
.sns-right{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:12px;
  justify-content:space-between;
}
.sns-bubble{
  border-radius:18px;
  background: rgba(0,174,239,0.12);
  border: 1px solid rgba(0,174,239,0.25);
  padding:16px 18px;
}
.sns-bubble-title{
  font-weight:900;
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#0b6f93;
}
.sns-bubble-id{
  margin-top:6px;
  font-size:28px;
  font-weight:900;
  letter-spacing:0.5px;
  color:#0b6f93;
}
.sns-bubble-note{
  margin-top:6px;
  font-size:12px;
  color:#0b6f93;
  opacity:0.9;
}
.sns-mini{
  display:flex;
  gap:12px;
  align-items:center;
  padding:14px 16px;
  border:1px dashed rgba(0,0,0,0.15);
  border-radius:14px;
}
.sns-mini-icon{ font-size:20px; }
.sns-mini-text{ color:var(--muted); font-size:0.95rem; line-height:1.5; }
.sns-mini-text strong{ color:#111; font-size:1.05rem; }

.sns-bars{
  border-top:1px solid rgba(0,0,0,0.06);
  padding:16px 20px 20px;
  background: #fff;
  display:grid;
  gap:12px;
}
.sns-bar{
  border-radius:14px;
  padding:12px 16px;
  background: rgba(0,174,239,0.10);
  border: 1px solid rgba(0,174,239,0.18);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.sns-bar-label{
  font-weight:900;
  color:#0b6f93;
  font-size:12px;
  letter-spacing:.6px;
}
.sns-bar-value{
  font-weight:900;
  color:#0b6f93;
  font-size:16px;
}
.sns-bar-dark{
  background:#111;
  border-color:#111;
}
.sns-bar-dark .sns-bar-label,
.sns-bar-dark .sns-bar-value{
  color:#fff;
}

@media (max-width: 900px){
  .sns-top{ flex-direction:column; }
  .sns-qr-area{ justify-content:flex-start; }
  .sns-qr{ width:150px; }
  .sns-bubble-id{ font-size:24px; }
}

/* =========================
   Home 2-col layout (desire-e style)
   ========================= */
.home-wrap { padding: 60px 0; }
.home-grid{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 26px;
  align-items:start;
}

.side-col{ position: relative; }
.side-card{
  position: sticky;
  top: 90px; /* header 아래 */
  border: 1px solid rgba(15, 20, 24, 0.08);
  border-radius: 16px;
  background:#fff;
  box-shadow: var(--shadow);
  overflow:hidden;
}

.side-head{
  padding:16px 16px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: var(--bg-soft);
}
.side-title{ font-weight:900; letter-spacing:.2px; }
.side-sub{ margin-top:6px; color:var(--muted); font-size:.9rem; }

.side-phone{ padding:16px; }
.side-phone-label{ font-size:12px; color:var(--muted); font-weight:800; letter-spacing:.6px; }
.side-phone-num{ font-size:26px; font-weight:900; margin-top:4px; }
.side-phone-note{ margin-top:6px; color:#888; font-size:12px; }

.side-qr{
  display:flex;
  gap:12px;
  padding: 0 16px 14px;
}
.side-qr-item{
  flex:1;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}
.qr-badge{
  font-weight:900;
  font-size:12px;
  letter-spacing:.6px;
  padding:10px 12px;
  background: var(--bg-soft);
  border-bottom: 1px solid rgba(15, 20, 24, 0.05);
}
.side-qr-item img{
  width:100%;
  height:auto;
  display:block;
  padding:10px;
}

.side-id{
  margin: 0 16px 10px;
  border-radius:14px;
  padding:14px 14px;
  background: rgba(0,174,239,0.10);
  border: 1px solid rgba(0,174,239,0.22);
}
.side-id-label{ font-weight:900; font-size:12px; letter-spacing:1px; color:#0b6f93; }
.side-id-value{ margin-top:6px; font-size:22px; font-weight:900; color:#0b6f93; }
.side-id-note{ margin-top:6px; font-size:12px; color:#0b6f93; opacity:.9; }

.side-mini-menu{
  margin-top:14px;
  border-top: 1px solid rgba(0,0,0,0.06);
  padding:14px 16px 18px;
}
.side-mini-menu-title{
  font-weight:900;
  font-size:12px;
  letter-spacing:1px;
  color:#111;
  margin-bottom:10px;
}
.side-mini-menu a{
  display:block;
  padding:10px 0;
  border-bottom:1px solid rgba(0,0,0,0.06);
  color:#333;
  font-weight:700;
  font-size:.95rem;
}
.side-mini-menu a:last-child{ border-bottom:none; }
.side-mini-menu a:hover{ color: var(--primary); }

/* right main */
.main-col section{ padding: 0; } /* main 내부 section padding은 각 section에서 직접 */
@media (max-width: 1024px){
  .home-grid{ grid-template-columns: 1fr; }
  .side-card{ position: static; }
  .home-wrap{ padding: 40px 0; }
}

/* =========================
   [New] SNS & Contact Section
   ========================= */
.section-contact-wrapper {
  background: #f5f3ef; /* 배경을 살짝 넣어 구분을 줌 */
  padding: 80px 0;
}

.contact-grid-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

/* 공통 박스 스타일 */
.contact-box {
  background: #fff;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.3s ease;
}

.contact-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 174, 239, 0.1);
}

.box-header h3 {
  font-family: var(--font-head);
  font-size: 1.4rem;
  color: var(--primary);
  margin-bottom: 8px;
  font-weight: 700;
}

.box-header p {
  font-size: 0.95rem;
  color: #888;
  margin-bottom: 25px;
  font-weight: 500;
}

/* 왼쪽: 전화번호 스타일 */
.phone-display {
  background: #f9f9f9;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  margin-bottom: 25px;
  border: 1px dashed #ddd;
}

.icon-tel {
  display: block;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 5px;
  letter-spacing: 2px;
}

.tel-number {
  display: block;
  font-size: 2.2rem;
  font-weight: 800;
  color: #333;
  line-height: 1.2;
  font-family: var(--font-en);
  letter-spacing: -1px;
}

/* 버튼 커스텀 */
.icon-btn {
  display: flex;
  justify-content: space-between;
  padding: 18px 25px;
  font-size: 1.05rem;
}

/* 오른쪽: SNS 스타일 */
.sns-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sns-id-row {
  display: flex;
  align-items: center;
  gap: 15px;
  background: var(--primary);
  color: #fff;
  padding: 15px 25px;
  border-radius: 999px;
  box-shadow: 0 5px 15px rgba(0, 174, 239, 0.3);
}

.sns-label {
  font-size: 0.8rem;
  font-weight: 800;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sns-id-text {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 1px;
  margin-left: auto; /* 오른쪽 정렬 */
}

.qr-area {
  display: flex;
  gap: 20px;
  align-items: center;
}

.qr-box {
  width: 100px;
  height: 100px;
  background: #fff;
  border: 2px solid #eee;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.75rem;
  color: #aaa;
  font-weight: 700;
  overflow: hidden;
}

.qr-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sns-desc {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.6;
  flex: 1;
}

.sns-desc strong {
  color: var(--primary);
  font-weight: 700;
}

/* 모바일 대응 (반응형) */
@media (max-width: 768px) {
  .contact-grid-layout {
    grid-template-columns: 1fr; /* 세로로 쌓이게 */
    gap: 20px;
  }

  .tel-number {
    font-size: 1.8rem;
  }

  .contact-box {
    padding: 30px 20px;
  }
}

/* ======================================================
   ✅ About Page (desire-e style): watermark + greeting + map
   ====================================================== */
.about-wrap { padding: 70px 0; }
.about-top { align-items: stretch; }

.about-divider { height: 50px; }

.about-kicker{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.about-title{
  font-family: var(--font-head);
  font-size: 1.75rem;
  line-height: 1.35;
  margin-bottom: 14px;
  letter-spacing: 0.2px;
}

.about-text{
  color: var(--muted);
  margin-bottom: 12px;
}

.about-sign{
  margin-top: 16px;
  font-weight: 900;
}
.about-sign .en{
  opacity: 0.8;
  font-weight: 800;
  margin-top: 2px;
}

/* 로고 워터마크 */
.greet-card{
  position: relative;
  overflow: hidden;
}
.greet-card::before{
  content:"";
  position:absolute;
  inset:-20px;
  background: url("photo/logo2.jpg") no-repeat right 40px top 30px;
  background-size: 420px auto;
  opacity: .05;
  pointer-events:none;
  filter: saturate(0.2);
}
.greet-card .block{
  position: relative;
  z-index: 1;
}

/* ======================================================
   About Greeting Inner Layout (Right Image)
   ====================================================== */
.greet-kr-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
  align-items: center;
}
.greet-kr-text, .greet-jp-text {
  display: grid;
  gap: 12px;
}
.greet-kr-image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15, 20, 24, 0.08);
  display: block;
}
@media (max-width: 900px) {
  .greet-kr-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .greet-kr-image {
    order: -1;
    max-width: 400px;
    margin: 0 auto;
  }
}

/* 오른쪽 이미지 카드 조금 더 여유 있게 */
.thumb.about-hero{ height: 320px; }
@media (max-width: 900px){
  .thumb.about-hero{ height: 240px; }
}

/* Access map layout */
.about-access-grid{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 22px;
  align-items: start;
}
.about-access-info{
  border: 1px solid rgba(15,20,24,0.08);
  border-radius: 14px;
  padding: 16px;
  background: rgba(255,255,255,0.7);
}
.about-access-label{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.8px;
  color: var(--muted);
  text-transform: uppercase;
}
.about-access-value{
  margin-top: 6px;
  font-weight: 800;
  color: #111;
  line-height: 1.55;
}
.about-tel{
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.about-access-note{
  margin-top: 14px;
  font-size: 12px;
  color: var(--muted);
  opacity: 0.9;
}

/* map frame */
.map-embed{
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(15,20,24,0.08);
  background: #fff;
}
@media (max-width: 900px){
  .about-access-grid{ grid-template-columns: 1fr; }
}
/* ✅ About 상단(MESSAGE) 한 열로 꽉 채우기 */
.about-top{
  grid-template-columns: 1fr;  /* 1열 유지 */
  max-width: 100%;            /* 폭 제한 제거 */
  margin: 0;                  /* 가운데정렬 제거 */
}

/* 카드 패딩 약간 더 고급스럽게 */
.greet-card .block{
  position: relative;
  z-index: 1;
  padding: 48px 42px;
}

@media (max-width: 900px){
  .greet-card .block{ padding: 26px; }
} 
/* ======================================================
   ✅ Index KR/JP 동시표기 + 요청사항 반영 (ADD-ON)
   ====================================================== */

/* (1) 모바일에서 도쿄타워(영상/사진) 왼쪽 기준으로 보이게 */
.hero-video-left { object-position: center center; }
@media (max-width: 768px){
  .hero-video-left { object-position: left center; } /* ✅ 요청 1 */
}

/* (2) 상단 로고 더 눈에 띄게 */
.brand-strong img { height: 54px; } /* 기존 40px보다 크게 */
@media (max-width: 600px){
  .brand-strong img { height: 48px; }
}
.brand-strong span { font-size: 1.22rem; }
.header{
  border-bottom: 2px solid rgba(201,162,39,0.22); /* subtle gold line */
}

/* (3) KR/JP 동시표기 공통 */
.bi { display: grid; gap: 10px; }
.bi .kr{ font-weight: 700; }
.bi .jp{ color: var(--muted); }
.bi-sign{ margin-top: 14px; display:grid; gap:4px; font-weight:900; }
.bi-quote{ display:grid; gap:6px; font-weight:900; font-size:1.05rem; }
.bi-quote .jp{ color:#e9e9e9; opacity:.92; }
.bi-note{ display:grid; gap:4px; margin-top:10px; font-size:.95rem; }
.bi-note .jp{ color: var(--muted); }
.bi-card .jp{ font-size: .95rem; }
.bi-card .kr{ font-size: .96rem; }

/* (4) 메뉴 KR/JP 병기 */
.drawer-nav-bi a{
  align-items:flex-start;
  gap: 8px;
}
.drawer-nav-bi .nav-kr{
  display:block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

/* (5) 히어로 KR/JP + SNS 강조 */
.hero-bi{ max-width: 980px; margin: 0 auto; }
.hero-h1{ margin-bottom: 18px; }
.hero-h1 .kr,
.hero-h1 .jp{ display:block; }
.hero-p .kr,
.hero-p .jp{ display:block; }

.hero-cta{
  display:flex;
  gap: 15px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top: 6px;
}

/* SNS chips */
.hero-sns{
  margin-top: 18px;
  display:flex;
  gap: 10px;
  justify-content:center;
  flex-wrap:wrap;
}
.hero-sns-chip{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.20);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-sns-chip .label{
  font-size: 11px;
  opacity: .9;
  letter-spacing: 1px;
}
.hero-sns-chip .value{
  font-size: 16px;
}
.hero-sns-chip.kakao{
  background: rgba(255, 231, 0, 0.18);
  border-color: rgba(255, 231, 0, 0.35);
}
.hero-sns-chip.line{
  background: rgba(0, 200, 83, 0.16);
  border-color: rgba(0, 200, 83, 0.35);
}
.hero-sns-chip.insta{
  background: rgba(255, 0, 128, 0.12);
  border-color: rgba(255, 0, 128, 0.28);
}

.hero-tel{
  margin-top: 14px;
  display:grid;
  gap: 4px;
  font-size: 0.95rem;
  opacity: .95;
}
.hero-tel b{ text-decoration: underline; text-underline-offset: 3px; }

/* (6) KR・JP 표시 토글(실제로는 동시표기 안내용) */
.lang-switch span.active{
  font-size: 12px;
  font-weight: 800;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  position: relative;
}
.lang-switch span.active::after{
  content:'';
  display:block;
  width:100%;
  height:2px;
  background: var(--primary);
  margin-top: 2px;
}

/* (7) SNS QR 3개 (placeholder 이미지 대응) */
.qr-triple{ gap: 14px; }
.qr-box{
  width: 110px;
  height: 120px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  overflow: hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}
.qr-badge-mini{
  width:100%;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  background: var(--bg-soft);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  text-align:center;
}
.qr-box img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding: 10px;
}

/* (8) SNS bars channel color hint */
.sns-bars .sns-bar.kakao{
  background: rgba(255, 231, 0, 0.12);
  border-color: rgba(255, 231, 0, 0.24);
}
.sns-bars .sns-bar.line{
  background: rgba(0, 200, 83, 0.10);
  border-color: rgba(0, 200, 83, 0.22);
}
.sns-bars .sns-bar.insta{
  background: rgba(255, 0, 128, 0.08);
  border-color: rgba(255, 0, 128, 0.18);
}
/* index hero compact spacing */
.hero-box-compact { max-width: 920px; }
.hero-compact-copy { margin-bottom: 22px; }
.mini-tight { padding: 20px; }
/* ======================================================
   ✅ INDEX Premium Landing Add-on (KR/JP)
   ====================================================== */

/* (A) Lang switch : single button */
.lang-switch .lang-only{
  font-size: 12px;
  font-weight: 900;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,20,24,0.10);
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lang-switch .lang-only:hover{
  border-color: rgba(11,42,59,0.35);
  transform: translateY(-1px);
}

/* (B) Strong logo */
.brand-strong img { height: 54px; }
@media (max-width: 600px){
  .brand-strong img { height: 48px; }
}
.brand-strong span { font-size: 1.22rem; }
.header{
  border-bottom: 2px solid rgba(201,162,39,0.22);
}

/* (C) Drawer category titles */
.drawer-group{
  padding: 14px 20px 8px;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 1px;
  color: rgba(0,0,0,0.45);
  text-transform: uppercase;
}
.drawer-nav-bi{ padding-top: 6px; }
.drawer-nav-bi a{ align-items:flex-start; gap:8px; }
.drawer-nav-bi .nav-kr{
  display:block;
  margin-top:2px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

/* (D) Hero premium */
.hero-premium { min-height: 560px; }
.hero-video-left { object-position: center center; }
@media (max-width: 768px){
  .hero-video-left { object-position: left center; } /* ✅ 모바일에서 왼쪽 기준 */
}

.hero-box-compact{
  max-width: 920px;
  padding: 0 18px;
}
.hero-kicker{
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:center;
  margin-bottom: 10px;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
  font-size: 12px;
  opacity: .95;
}
.hero-kicker .dot{ opacity:.7; }
.hero-compact-copy{
  margin: 16px auto 22px;
  max-width: 860px;
}
.hero-compact-copy .kr{ display:block; font-weight:700; }
.hero-compact-copy .jp{ display:block; opacity:.92; }

.hero-btn{ padding: 15px 34px; font-size: 1rem; }
.hero-trust{
  margin-top: 18px;
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
.trust-pill{
  border-radius: 999px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-weight: 900;
  font-size: 12px;
}
.trust-pill .jp{ opacity:.9; }

.hero-scroll{
  position:absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 3;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 2px;
  opacity: .7;
}

/* (E) Highlights mini cards */
.mini-tight{ padding: 20px; }
.mini-tight .jp{ color: var(--muted); }

/* (F) Service grid compact cards */
.mini-icon-card{
  border: 1px solid rgba(15, 20, 24, 0.08);
  border-radius: 14px;
  padding: 18px 16px;
  background: #fff;
  box-shadow: var(--shadow);
  text-align: center;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.mini-icon-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(15, 20, 24, 0.12);
}
.mi-title{
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: .2px;
}
.mi-sub{
  margin-top: 6px;
  font-size: .9rem;
  color: var(--muted);
}

/* (G) Statement card */
.card.statement .block{
  padding: 28px;
  text-align: center;
}
.statement-quote{
  display:grid;
  gap: 8px;
  font-weight: 900;
  font-size: 1.05rem;
}
.statement-sub{
  margin-top: 10px;
  display:grid;
  gap: 4px;
  color: var(--muted);
  font-weight: 700;
}

/* (H) Contact tweaks */
.global-phone{
  margin-top: 10px;
  font-weight: 900;
  color: #333;
}
.contact-mini-note{
  margin-top: 12px;
  display:grid;
  gap: 4px;
  color: var(--muted);
  font-weight: 800;
  font-size: .92rem;
}

/* (I) SNS bars channel hint */
.sns-bars .sns-bar.kakao{
  background: rgba(255, 231, 0, 0.12);
  border-color: rgba(255, 231, 0, 0.24);
}
.sns-bars .sns-bar.line{
  background: rgba(0, 200, 83, 0.10);
  border-color: rgba(0, 200, 83, 0.22);
}
.sns-bars .sns-bar.insta{
  background: rgba(255, 0, 128, 0.08);
  border-color: rgba(255, 0, 128, 0.18);
}

/* (J) Footer premium */
.footer-premium .footer-brand{
  font-weight: 900;
  font-size: 1.05rem;
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}
.footer-premium .footer-info{
  display: grid;
  gap: 10px;
  opacity: .88;
  line-height: 1.75;
  font-size: .95rem;
}
.footer-premium .footer-info .line{
  display: grid;
  gap: 4px;
}
.footer-premium .footer-info strong{ font-weight: 900; }
.footer-premium .jp{ opacity: .88; }
/* =========================================
   [수정 및 추가] 프리미엄 UI & 한국어 메인 대응
   ========================================= */

/* 1 & 2. 로고 크기 확대 및 모바일 영상 좌측 정렬 (도쿄타워 노출) */
.brand img { height: 55px !important; }
@media (max-width: 600px) {
  .brand img { height: 48px !important; }
}

.hero-video {
  object-position: 20% center; /* 데스크탑에서도 도쿄타워가 잘 보이도록 약간 좌측으로 */
}
@media (max-width: 768px) {
  .hero-video { object-position: 0% center !important; } /* 모바일에서는 완전 좌측 기준 */
}

/* 3. 한/일 병기 텍스트 스타일 */
.lang-kr { display: block; font-weight: 700; color: #fff; line-height: 1.4; }
.lang-jp { display: block; font-size: 0.8em; opacity: 0.7; font-weight: 400; margin-top: 6px; }
.text-dark .lang-kr { color: var(--text); }
.text-dark .lang-jp { color: var(--muted); }

/* 4. SNS 히어로 강조 바 (메인 화면용) */
.hero-sns-bar {
  display: inline-flex;
  gap: 20px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 12px 24px;
  border-radius: 999px;
  margin-top: 30px;
}
.hero-sns-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
}
.hero-sns-item span.sns-icon { color: var(--accent); font-size: 1.2rem; }

/* 5. 3대 핵심 가치 & 6대 사업 소개 카드 스타일 */
.core-card {
  padding: 32px 24px;
  text-align: center;
  background: #fff;
  border-top: 3px solid var(--accent);
  box-shadow: var(--shadow);
  border-radius: 8px;
  transition: transform 0.3s ease;
}
.core-card:hover { transform: translateY(-5px); }
.core-num {
  font-size: 2rem;
  font-weight: 900;
  color: var(--accent-soft);
  margin-bottom: 10px;
  font-family: var(--font-head);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .service-grid { grid-template-columns: 1fr; } }

.service-card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 28px;
  border-radius: 12px;
}
.service-card h3 { font-size: 1.15rem; margin-bottom: 12px; color: var(--primary); font-weight: 800;}
/* ======================================================
   ✅ Premium Hero (User Style) + Index Preview
   ====================================================== */

/* language single button */
.lang-switch .lang-only{
  font-size: 12px;
  font-weight: 900;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,20,24,0.10);
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lang-switch .lang-only:hover{
  border-color: rgba(11,42,59,0.35);
  transform: translateY(-1px);
}

/* category labels in drawer */
.drawer-group{
  padding: 14px 20px 8px;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 1px;
  color: rgba(0,0,0,0.45);
  text-transform: uppercase;
}
.drawer-nav-bi{ padding-top: 6px; }
.drawer-nav-bi a{ align-items:flex-start; gap:8px; }
.drawer-nav-bi .nav-kr{
  display:block;
  margin-top:2px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

/* stronger logo */
.brand-strong img { height: 54px; }
@media (max-width: 600px){
  .brand-strong img { height: 48px; }
}
.brand-strong span { font-size: 1.22rem; }
.header{ border-bottom: 2px solid rgba(201,162,39,0.22); }

/* HERO premium */
.hero-premium{
  height: 82vh;
  min-height: 560px;
}
.hero-video-left { object-position: center center; }
@media (max-width: 768px){
  .hero-video-left { object-position: left center; } /* 모바일에서 왼쪽 */
}

.hero-box-premium{
  max-width: 980px;
  text-align: center;
  padding: 0 20px;
}

.hero-title{
  margin: 0;
}
.hero-title .lang-kr{
  display:block;
  font-family: var(--font-head);
  font-size: 3.2rem;
  line-height: 1.1;
  font-weight: 600;
  text-shadow: 0 10px 28px rgba(0,0,0,0.38);
}
.hero-title-jp{
  display:block;
  margin-top: 14px;
  font-family: var(--font-base);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .4px;
  opacity: .92;
}

.hero-lead{
  margin-top: 18px;
  font-size: 1.12rem;
  opacity: .96;
  line-height: 1.85;
  text-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

.hero-sns-bar{
  margin: 22px auto 0;
  max-width: 720px;
  display:flex;
  gap: 12px;
  justify-content:center;
  flex-wrap:wrap;
  padding: 12px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-sns-item{
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  opacity: .95;
}
.hero-sns-item b{ font-weight: 900; }
.sns-icon{ margin-right: 6px; }

.hero-phone{
  margin-top: 14px;
  font-weight: 800;
  font-size: .92rem;
  opacity: .92;
}
.hero-phone .sep{ margin: 0 10px; opacity: .65; }

@media (max-width: 900px){
  .hero-title .lang-kr{ font-size: 2.2rem; }
  .hero-lead{ font-size: 1rem; }
  .hero-sns-bar{ border-radius: 18px; }
}

/* Preview cards (core-card) */
.core-card{
  background:#fff;
  border: 1px solid rgba(15, 20, 24, 0.08);
  border-radius: 16px;
  padding: 22px 20px;
  box-shadow: var(--shadow);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.core-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(15,20,24,0.12);
}
.core-num{
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--accent);
  margin-bottom: 10px;
}
.core-card h3{
  font-family: var(--font-head);
  font-size: 1.15rem;
  margin-bottom: 8px;
}
.core-card p{
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.75;
}

/* service mini grid */
.service-grid-mini{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.service-mini{
  border: 1px solid rgba(15,20,24,0.08);
  border-radius: 14px;
  padding: 14px 14px;
  background: #fff;
  font-weight: 900;
  text-align:center;
  color: #111;
}
@media (max-width: 900px){
  .service-grid-mini{ grid-template-columns: 1fr; }
}

/* footer premium */
.footer-premium .footer-brand{
  font-weight: 900;
  font-size: 1.2rem;
  margin-bottom: 12px;
  color: var(--accent);
}
.footer-premium .footer-info{
  opacity:.85;
  line-height:1.8;
  font-size:0.95rem;
  margin-bottom: 18px;
}
.footer-premium .footer-sns{
  margin-top: 12px;
  opacity:.92;
  font-weight: 900;
  font-size: 1.05rem;
}
.footer-premium .accent{ color: var(--accent); }
.hero-box-lux {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}

.hero-kicker-premium {
  font-size: 0.9rem;
  letter-spacing: 2px;
  color: #444;
  margin-bottom: 18px;
}

.hero-kicker-premium .k-en {
  font-weight: 600;
}

.hero-kicker-premium .k-jp {
  opacity: 0.7;
}

.hero-main-title {
  font-family: var(--font-head);
  font-size: 4rem;
  font-weight: 700;
  letter-spacing: 4px;
  margin-bottom: 10px;
  color: #111;
}

.hero-subtitle {
  font-size: 1.2rem;
  letter-spacing: 2px;
  color: #777;
  margin-bottom: 30px;
}

.hero-description {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #222;
  margin-bottom: 12px;
}

.hero-description-jp {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 40px;
}

.hero-btn-lux {
  padding: 14px 40px;
  font-size: 1rem;
  letter-spacing: 1px;
  border-radius: 40px;
}
.hero-vignette-soft {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,0.85) 0%,
      rgba(255,255,255,0.4) 40%,
      rgba(255,255,255,0.4) 60%,
      rgba(255,255,255,0.85) 100%);
  z-index: 1;
}


/* ======================================================
   ✅ FIX 2026-02: HERO 밝기 밸런스 (영상 안 죽이고, 텍스트 대비만 확보)
   - 기존 overlay/vignette가 과하거나 중복되면 화면이 "탁"해지거나 "하얗게" 뜹니다.
   - 아래는 최종 우선 적용(파일 맨 아래에 둬서 override).
   ====================================================== */
.hero-video { filter: none !important; }

/* (1) 메인 오버레이: 0.50 → 0.22 수준으로 낮춤 */
.hero-overlay{
  background: radial-gradient(
    1200px 700px at 50% 35%,
    rgba(0,0,0,0.05),
    rgba(0,0,0,0.20)
  ) !important;
}

/* (2) 비네트: 너무 진하면 영상이 죽음 → 소프트하게 */


/* (3) 실수로 추가했던 밝은 레이어(화이트/소프트 비네트)는 기본 OFF */
.hero-overlay-bright,
.hero-vignette-soft{
  display: none !important;
}

.hero-premium .hero-description,
.hero-premium .hero-compact-copy{
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: 0.1px;
}

.hero-premium .hero-description-jp{
  font-weight: 400;
  line-height: 1.8;
  opacity: 0.88; /* 너무 흐리면 0.9~1로 */
}
/* (선택) 기존 큰 글래스 OFF — 남아있으면 스타일 충돌 방지 */
 /* 또는 아래 display:none 쓰지 말고 HTML 교체가 정석 */

/* 슬림 단일 글래스 */
.hero-glass-slim{
  max-width: min(820px, 92vw);
  margin: 26px auto 30px;
  padding: 18px 22px;
  border-radius: 18px;

  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.16),
    rgba(180,210,255,0.12)
  );

  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);

  border: 1px solid rgba(255,255,255,0.35);

  box-shadow:
    0 18px 40px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.55);

  text-align: center;
}

.hero-glass-slim .hero-description,
.hero-glass-slim .hero-description-jp{
  margin: 6px 0;
  color: rgba(20,20,20,0.86);
  font-weight: 500;
  line-height: 1.75;
  text-shadow: 0 2px 10px rgba(0,0,0,0.10);
}
.hero-main-title{
  font-family: var(--font-head);
  font-size: 4rem;
  font-weight: 600;
  letter-spacing: 4px;
  margin-bottom: 10px;
  color: inherit;
}


/* ======================================================
   ✅ 2026-02 Menu Button & Language Button Size Update
   ====================================================== */
.menu-btn{
  padding: 12px 22px !important;
  font-size: 13px !important;
}

.menu-icon{
  width: 20px !important;
  height: 14px !important;
}

.lang-switch .lang-only{
  padding: 8px 14px !important;
  font-size: 13px !important;
}


/* ======================================================
   ✅ 2026-02 Bilingual (KR/JP) polish: Core Values & Business Areas
   ====================================================== */
.section-title h2 .jp{
  display:block !important;
  margin-top: 6px !important;   /* 공백 줄임 */
  font-family: var(--font-head) !important;
  font-size: 0.80em !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  color:#111 !important;
}

.core-jp-sub{
  margin: 10px 0 14px !important;   /* 타이틀 다음 여백(조금 줄임) */
  font-size: 1.0rem !important;     /* KR 타이틀 아래 '같은 급' 느낌 */
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  color: #111 !important;           /* KR과 동일 색 */
  opacity: 0.92 !important;
}
.core-kr-desc{ margin-bottom: 10px !important; }
.core-jp-desc{
  margin: 0 !important;
  font-size: 0.88rem;
  line-height: 1.75;
  color: rgba(15,20,24,0.55);
}

.mini-icon-card .mi-jp{
  margin-top: 6px;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: rgba(15,20,24,0.55);
}


/* ======================================================
   ✅ 2026-02 Core Values spacing tune (KR/JP readability)
   ====================================================== */
.core-card h3{
  margin-bottom: 18px !important; /* 타이틀 다음 여백 */
}

.core-jp-sub{
  margin: 10px 0 14px !important;   /* 타이틀 다음 여백(조금 줄임) */
  font-size: 1.0rem !important;     /* KR 타이틀 아래 '같은 급' 느낌 */
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  color: #111 !important;           /* KR과 동일 색 */
  opacity: 0.92 !important;
}

.core-kr-desc{
  margin-bottom: 14px !important; /* KR ↔ JP 설명 간격 */
}

.core-jp-desc{
  margin-top: 8px !important;
  line-height: 1.9 !important;
}


/* ======================================================
   ✅ 2026-02 Section title balance: KR main + JP secondary (2줄만)
   ====================================================== */
.section-title h2 .jp{
  display:block !important;
  margin-top: 6px !important;   /* 공백 줄임 */
  font-family: var(--font-head) !important;
  font-size: 0.80em !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  color:#111 !important;
}


/* ======================================================
   ✅ 2026-02 Global rule: 섹션 타이틀은 KR/JP 2줄만 (sub 제거 전제)
   ====================================================== */
.section-title h2 .kr{ display:block; }
.section-title h2 br{ line-height: 0; }

.section-title h2 .jp{
  display:block !important;
  margin-top: 6px !important;   /* 공백 줄임 */
  font-family: var(--font-head) !important;
  font-size: 0.80em !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  color:#111 !important;
}

/* Contact(SNS) header bilingual spacing */
.contact-box .box-header h3{
  line-height: 1.35;
}


/* ======================================================
   ✅ FINAL TITLE SYSTEM v2 (KR/JP 비율 고정: 카드 타이틀 방식)
   - h2 자체에 기준 크기 부여 → KR=1em, JP=0.62em (항상 같은 비율)
   ====================================================== */
.section-title h2{
  font-family: var(--font-head) !important;
  font-size: clamp(2.1rem, 3.4vw, 2.8rem) !important; /* KR 기준 크기 */
  line-height: 1.18 !important;
  margin-bottom: 0 !important;
}
.section-title h2 .kr{
  display:block !important;
  font-size: 0.78em !important;
  font-weight: 700 !important;
  letter-spacing: 0.1px !important;
  color: var(--muted) !important;
}
.section-title h2 .jp{
  display:block !important;
  margin-top: 6px !important;   /* 공백 줄임 */
  font-family: var(--font-head) !important;
  font-size: 0.80em !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  color:#111 !important;
}


/* ======================================================
   ✅ 2026-02 Title spacing fix (KR/JP 간격 강제 제어)
   - h2를 grid로 만들어 gap으로 간격 통일
   ====================================================== */
.section-title h2{
  display: grid !important;
  gap: 6px !important;          /* ← KR/JP 사이 간격 */
  justify-items: center;
}

.section-title h2 .kr{ margin: 0 !important; }
.section-title h2 .jp{ margin: 0 !important; }


/* Core card title harmony */
.core-card h3,
.core-jp-sub{
  font-family: var(--font-head) !important;
}


/* ======================================================
   ✅ 2026-02 KR/JP 간격이 안 줄어드는 진짜 원인: <br> 라인브레이크
   - h2 안에 <br>이 남아있으면 line-height 만큼 공백이 생김
   - 해결: br 숨기고, grid+gap으로만 줄간격 제어
   ====================================================== */
.section-title h2 br{ display:none !important; }

.section-title h2{
  display: grid !important;
  gap: 6px !important;
  justify-items: center;
  line-height: 1.12 !important;
}

.section-title h2 .kr,
.section-title h2 .jp{
  margin: 0 !important;
  padding: 0 !important;
}


/* ======================================================
   ✅ 2026-02 Divider system (Section title + Core card title)
   ====================================================== */


/* ===== Core Card Title Divider ===== */
.core-card h3 + .core-jp-sub{
  position: relative;
  padding-top: 14px !important;
}

.core-card h3 + .core-jp-sub::before{
  content:"";
  position:absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 2px;
  background: rgba(0,0,0,0.18);
}

/* SCROLL label off */
.hero-scroll{ display:none !important; }





/* ======================================================
   ✅ SECTION TITLE: KR/JP 동일 크기 + 구분선
   - 기준: "3대 핵심 가치" 타이틀 스타일(폰트/사이즈) 유지
   - KR/JP를 같은 크기(1em)로 맞추고, 사이에 divider line 추가
   - <br>로 생기는 불필요한 공백 제거 (br 숨김 + grid gap으로 제어)
   ====================================================== */

.section-title h2{
  font-family: var(--font-head) !important;
  font-size: 2.35rem !important;        /* KR 기준 크기 */
  letter-spacing: 0.2px !important;
  line-height: 1.14 !important;
  margin-bottom: 10px !important;

  /* two-line system */
  display: grid !important;
  justify-items: center !important;
  gap: 14px !important;                /* KR ↔ divider ↔ JP 간격 */
}

/* br로 생기는 line-height 공백 제거 */
.section-title h2 br{ display:none !important; }

.section-title h2 .jp{
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1em !important;
  font-weight: 600 !important;
  color: #111 !important;
}

.section-title h2 .kr{
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.78em !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
}

/* JP 약간의 톤 차이만 (크기는 동일 유지) */
.section-title h2 .jp{
  opacity: 0.86 !important;
  letter-spacing: 0.2px !important;
  position: relative !important;
}



/* 모바일에서 크기만 살짝 다운 (KR/JP 비율 유지) */
@media (max-width: 900px){
  .section-title h2{
    font-size: 1.9rem !important;
    gap: 12px !important;
  }
  }


/* ======================================================
   ✅ FORCE INLINE TITLE LAYOUT (Horizontal Fix)
   ====================================================== */
.section-title h2.title-inline{
  display: block !important;      /* grid 제거 */
  text-align: center !important;
  gap: 0 !important;
}

.section-title h2.title-inline .divider{
  display: inline !important;
}

.section-title h2.title-inline::before,
.section-title h2.title-inline .jp::before{
  display: none !important;       /* 기존 divider line 제거 */
}


/* ======================================================
   ✅ HERO subtitle color (match other titles)
   ====================================================== */
.hero-glass-subtitle{
  color: #fff !important;
}

/* ======================================================
   ✅ KR/JP paragraph spacing system (paired tight / section wide)
   ====================================================== */
/* 같은 뜻(KR→JP) 붙여서 */
.core-kr-desc{ margin-bottom: 8px !important; }
.core-jp-desc{ margin-top: 0 !important; }

/* 타이틀(KR) ↔ JP 서브타이틀은 더 타이트하게 */
.card.mini h3{ margin-bottom: 6px !important; }
.core-jp-sub{ margin-top: 2px !important; margin-bottom: 12px !important; }

/* 문단/블록이 바뀔 때는 여백 크게 (카드 내부의 다음 요소들) */
.card.mini .core-jp-desc + *{ margin-top: 14px !important; }

/* ======================================================
   ✅ SNS section (no QR, no repeated IDs)
   ====================================================== */
.sns-channels{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 14px;
}
.sns-chip{
  display:inline-flex;
  align-items:center;
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .6px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.8);
}
.sns-chip.kakao{ background: rgba(255,231,0,0.14); border-color: rgba(255,231,0,0.28); }
.sns-chip.line{ background: rgba(0,200,83,0.10); border-color: rgba(0,200,83,0.22); }
.sns-chip.insta{ background: rgba(225,48,108,0.08); border-color: rgba(225,48,108,0.18); }

.sns-note-mini{
  margin-top: 12px;
  display:grid;
  gap:4px;
  color: var(--muted);
  font-weight: 800;
  font-size: .92rem;
}
.sns-note-mini b{ color:#111; }



/* ======================================================
   ✅ FINAL POLISH v4 (home)
   - scroll hint
   - core value numbers
   - SNS icon premium wrap
   - statement KR/JP pairing
   ====================================================== */


/* Core values: stronger number */
.core-num-big{
  font-size: 2.4rem;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--accent-soft);
  font-family: var(--font-head);
  line-height: 1;
  margin-top: 2px;
}

/* Statement KR/JP pairing */
.statement-quote .jp-line,
.statement-sub .jp-line{
  display:block;
  margin-top:6px;
  font-size:0.95rem;
  opacity:0.85;
}

/* SNS icon row: size + premium pills */
.sns-channels{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  margin-top:18px;
  flex-wrap:wrap;
}

.sns-icon-wrap{
  width: 56px;
  height: 56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(15,20,24,0.08);
  box-shadow: 0 10px 22px rgba(15, 20, 24, 0.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sns-icon-wrap:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(15, 20, 24, 0.10);
  border-color: rgba(15,20,24,0.14);
}

.sns-icon-img{
  width: 34px;
  height: 34px;
  object-fit: contain;
  display:block;
}



/* ======================================================
   ✅ LAUNCH PATCH v6
   - SNS icon links
   ====================================================== */
.sns-icon-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.sns-icon-link:focus-visible{
  outline: 3px solid rgba(201,162,39,0.45);
  outline-offset: 4px;
  border-radius: 999px;
}
/* ======================================================
   ✅ About Greeting: Letter style + Right-aligned signature
   ====================================================== */

.greet-catch{
  margin: 10px 0 18px;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(201,162,39,0.10);
  border: 1px solid rgba(201,162,39,0.20);
  font-weight: 900;
  color: var(--primary);
  line-height: 1.6;
}
.greet-catch .jp-line{
  display:block;
  margin-top:8px;
  font-weight: 800;
  opacity: .85;
  color: var(--primary);
}

.greet-letter{
  display: grid;
  gap: 12px;
}

.greet-lang-title{
  font-family: var(--font-head);
  font-weight: 900;
  letter-spacing: 0.2px;
  margin-top: 4px;
}

.greet-letter p{
  margin: 0;
  color: var(--muted);
  line-height: 1.9;
}

.greet-divider{
  border: 0;
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 10px 0 6px;
}

.greet-sign{
  margin-top: 6px;
  text-align: right;              /* ✅ 핵심: 오른쪽 정렬 */
  display: grid;
  gap: 4px;
}

.sign-company{
  font-weight: 900;
  color: #111;
}

.sign-role{
  font-weight: 800;
  color: rgba(15,20,24,0.60);
  font-size: 0.95rem;
}

.sign-name{
  font-family: var(--font-head);
  font-weight: 900;
  color: #111;
  font-size: 1.05rem;
  letter-spacing: 0.2px;
}

/* ======================================================
   ✅ About Greeting Signature: 2-line layout
   - Line 1: Company
   - Line 2: Role + Name (same line)
   ====================================================== */
.greet-sign{
  margin-top: 12px;
  text-align: right;
  display: grid;
  gap: 6px;
}
.greet-sign .sign-company{
  font-weight: 900;
  color: #111;
}
.greet-sign .sign-line{
  display: block;
  white-space: nowrap;
}
.greet-sign .sign-role{
  font-weight: 800;
  color: rgba(15,20,24,0.60);
  margin-right: 10px;
}
.greet-sign .sign-name{
  font-family: var(--font-head);
  font-weight: 900;
  color: #111;
  letter-spacing: 0.2px;
}


/* =========================
   PATCH: Bi-language Title + Responsive Tabs (2026-03)
   ========================= */

/* Header layout for (row + nav) structure */
.header-inner{
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  padding: 12px 0 14px;
}
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

/* Primary Nav: desktop = show all, wrap nicely */
.topnav.topnav-tabs{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  padding: 6px 0 4px;
}

/* Pill style */
.topnav.topnav-tabs a{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding: 8px 10px;
  min-width: 96px;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(15,20,24,0.12);
  box-shadow: 0 6px 14px rgba(0,0,0,0.05);
  color: #111;
  text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.topnav.topnav-tabs a:hover{
  transform: translateY(-1px);
  border-color: rgba(11,42,59,0.25);
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
}
.topnav.topnav-tabs a.active{
  background: rgba(255,255,255,0.95);
  border-color: rgba(11,42,59,0.22);
}
.topnav.topnav-tabs .jp{
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 0.98rem;
  line-height: 1.15;
  white-space: nowrap;
}
.topnav.topnav-tabs .kr{
  font-weight: 800;
  opacity: .58;
  font-size: 0.62rem;
  line-height: 1.1;
  white-space: nowrap;
}

/* Mobile: use 2-column "tab grid" so EVERYTHING is visible (no horizontal overflow) */
@media (max-width: 900px){
  .topnav.topnav-tabs{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:10px;
    padding: 10px 0 6px;
  }
  .topnav.topnav-tabs a{
    min-width: 0;
    width: 100%;
    padding: 10px 10px;
  }
  .topnav.topnav-tabs .jp{ font-size: 0.96rem; }
  .topnav.topnav-tabs .kr{ font-size: 0.68rem; } /* a bit larger for balance */
}
@media (max-width: 420px){
  .topnav.topnav-tabs{
    grid-template-columns: 1fr;
  }
}

/* Bi-language titles: JP main + KR smaller but clear (KR slightly larger than before) */
.title-bi{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  line-height: 1.05;
}
.title-bi .jp{
  font-family: var(--font-head);
  font-weight: 600;
}
.title-bi .kr{
  font-weight: 900;
  opacity: .92;
  letter-spacing: 0.02em;
  font-size: 0.56em; /* KR smaller for clearer hierarchy */
}


/* Title separator between JP and KR (replaces awkward top divider) */
.title-bi .kr{
  position: relative;
  padding-top: 14px;
}
.title-bi .kr::before{
  content:"";
  position:absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 1px;
  background: rgba(0,0,0,0.18);
}

/* Smaller title variant */
.title-bi-sm{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  line-height:1.1;
}
.title-bi-sm .kr{
  font-size: 0.72em; /* ↑ for balance in small headers */
  opacity: .85;
  font-weight: 900;
}

/* Business 영역 mini cards (mi-jp is used as KR line in your HTML) */
.mini-icon-card .mi-jp.kr{
  font-size: 0.95rem; /* ↑ KR a bit bigger */
  font-weight: 900;
  opacity: .88;
}

/* Brand tagline stack */
.brand-tagline .jp{
  font-weight: 700;
  letter-spacing: 0.06em;
}
.brand-tagline .en{
  margin-top: 2px;
  font-size: 0.86em;
  opacity: 0.72;
  letter-spacing: 0.12em;
}

/* Remove accidental leftover long divider above titles if any */
.section-title > hr,
.section-title .divider,
.section-divider{
  display:none !important;
}


/* Hero brand tagline: make JP/EN feel distinct */
.brand-tagline .en{
  position: relative;
  margin-top: 8px;
  padding-top: 10px;
  font-size: 0.86em;
  opacity: 0.80;
  letter-spacing: 0.14em;
}
.brand-tagline .en::before{
  content:"";
  position:absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 1px;
  background: rgba(255,255,255,0.55);
}



/* Mobile collapsible tabs */
.nav-toggle{
  display:none;
  border: 1px solid rgba(15,20,24,0.12);
  background: rgba(255,255,255,0.92);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 900;
  letter-spacing: 0.12em;
  font-size: 12px;
  cursor: pointer;
}
.nav-toggle:hover{ border-color: rgba(11,42,59,0.22); color: var(--primary); }

@media (max-width: 900px){
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  /* collapsed by default */
  .topnav.topnav-tabs{ display:none; }
  html.nav-open .topnav.topnav-tabs{ display:grid; }
}



@media (max-width: 900px){
  .hero-glass,
  .hero-glass-subtitle,
  .hero-glass-slim{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
  }
  .hero-subtitle{
    color: #fff !important;
    text-shadow: 0 6px 18px rgba(0,0,0,0.45);
  }
}



/* Hero text should be white (as requested) */
.hero-premium .hero-kicker,
.hero-premium .hero-kicker * ,
.hero-premium .hero-main-title,
.hero-premium .hero-description,
.hero-premium .hero-description-jp{
  color:#fff;
}



/* ======================================================
   ✅ Brand tagline: inline + separator (avoid "stuck together")
   ====================================================== */
.hero-premium .brand-tagline{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:center;
  color:#fff;
}
.hero-premium .brand-tagline .jp{
  font-weight:700;
  letter-spacing:0.06em;
}
.hero-premium .brand-tagline .en{
  font-size: 0.92em;
  opacity: 0.85;
  letter-spacing: 0.14em;
}
.hero-premium .brand-tagline .sep{
  opacity:.65;
  font-weight:900;
}

/* ======================================================
   ✅ Mobile nav: collapsible grid tabs (open/close)
   ====================================================== */
.nav-toggle{
  display:none;
  border-radius: 999px;
  padding: 10px 16px;
  border: 1px solid rgba(15,20,24,0.18);
  background: rgba(255,255,255,0.92);
  font-weight: 900;
  letter-spacing: .08em;
}
@media (max-width: 900px){
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  /* nav hidden by default on mobile */
  #primaryNav{ display:none; }
  body.nav-open #primaryNav{ display:grid; }
}
@media (min-width: 901px){
  /* Desktop: always show nav, hide toggle */
  #primaryNav{ display:flex !important; }
  .nav-toggle{ display:none !important; }
}


/* =========================
   FIX: Hero kicker line + bilingual separators
   ========================= */

/* Hero: enforce white text everywhere */
.hero.hero-premium .hero-kicker,
.hero.hero-premium .hero-kicker-premium,
.hero.hero-premium .hero-main-title,
.hero.hero-premium .hero-subtitle,
.hero.hero-premium .hero-compact-copy,
.hero.hero-premium .hero-compact-copy *{
  color: #ffffff !important;
}

/* Remove accidental divider line above EN in kicker (was from .brand-tagline .en::before) */
.hero.hero-premium .hero-kicker .en::before,
.hero.hero-premium .brand-tagline .en::before{
  content: none !important;
  display: none !important;
}

/* Kicker inline separator dot styling */
.hero.hero-premium .hero-kicker .sep{
  opacity: .75;
  transform: translateY(-0.5px);
}

/* Subtitle JP/KR inline separator */
.hero.hero-premium .hero-bi-stack{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hero.hero-premium .hero-bi-stack .sep{
  opacity: .70;
}

/* Desktop: keep subtitle readable on video */
@media (min-width: 769px){
  .hero.hero-premium .hero-subtitle{
    text-shadow: 0 10px 24px rgba(0,0,0,0.45);
  }
  .hero.hero-premium .hero-kicker{
    text-shadow: 0 8px 18px rgba(0,0,0,0.35);
  }
  .hero.hero-premium .hero-main-title{
    text-shadow: 0 16px 34px rgba(0,0,0,0.45);
  }
}

/* =========================
   FINAL HEADER POSITION (2026-03)
   ========================= */
@media (min-width: 901px){
  .header-inner{
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 10px 0 12px !important;
  }

  .header-row{
    display: contents !important;
  }

  .brand{
    grid-column: 1 / 2 !important;
    justify-self: start !important;
  }

  #primaryNav{
    grid-column: 2 / 3 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 !important;
  }
  #primaryNav > a{
    min-width: auto !important;
    padding: 6px 8px 10px !important;
  }
  #primaryNav .jp{
    font-size: 0.90rem !important;
    color: rgba(17,29,39,0.94) !important;
  }
  #primaryNav .kr{
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    color: #CBB88E !important;
    opacity: 1 !important;
    letter-spacing: 0.01em;
  }
  #primaryNav > a:hover .kr,
  #primaryNav > a.active .kr,
  #primaryNav .nav-dd-btn:hover .kr,
  #primaryNav .nav-dd-btn:focus-visible .kr{
    color: #B89A58 !important;
  }

  .header-right{
    grid-column: 3 / 4 !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .lang-switch{
    margin: 0 !important;
    padding: 0 !important;
  }

  .lang-switch::before{
    display: none !important;
  }
}

@media (max-width: 900px){
  .header-right{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-direction: row-reverse !important;
  }

  .lang-switch{
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  .lang-switch::before{
    display: none !important;
  }
}

/* =========================
   LANG SWITCH FINAL TONE (2026-03)
   - keep it minimal and consistent with nav
   ========================= */
.lang-switch .lang-only{
  border: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  padding: 2px 0 !important;
  box-shadow: inset 0 -1px 0 transparent;
  color: var(--muted) !important;
  transform: none !important;
  transition: color .2s ease, box-shadow .2s ease;
}

.lang-switch .lang-only:hover{
  color: var(--primary) !important;
  box-shadow: inset 0 -1px 0 rgba(201,162,39,0.75);
  transform: none !important;
}

/* add subtle separation from brand area */
.header-right{
  gap: 14px;
}

.lang-switch{
  position: relative;
  margin-left: 8px;
  padding-left: 12px;
}

.lang-switch::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 16px;
  background: rgba(15,20,24,0.16);
  transform: translateY(-50%);
}

@media (max-width: 900px){
  .lang-switch{
    margin-left: 4px;
    padding-left: 10px;
  }
  .lang-switch::before{
    height: 14px;
    background: rgba(15,20,24,0.12);
  }
}

/* =========================
   HEADER LAYOUT REALIGN (2026-03)
   - Desktop: Brand | Menu | Language
   - Mobile: keep language at far right
   ========================= */
@media (min-width: 901px){
  .header-inner{
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 10px 0 12px !important;
  }

  .header-row{
    display: contents !important;
  }

  .brand{
    grid-column: 1 / 2;
    justify-self: start;
  }

  #primaryNav{
    grid-column: 2 / 3;
    justify-content: center;
    margin: 0 !important;
  }

  .header-right{
    grid-column: 3 / 4;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .nav-toggle{
    display: none !important;
  }

  .lang-switch{
    margin: 0 !important;
    padding: 0 !important;
  }

  .lang-switch::before{
    display: none !important;
  }
}

@media (max-width: 900px){
  .header-right{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-direction: row-reverse;
  }

  .lang-switch{
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  .lang-switch::before{
    display: none !important;
  }
}

/* =========================
   RELATED MENU TIE-IN (2026-03)
   - subtle shared baseline for real-estate pair
   ========================= */
/* Removed confusing faint underline for real estate menus */

/* Section titles: KR must be clearly smaller than JP, and divider must be between lines */
.section-title .kr,
.section-heading .kr{
  font-size: 0.78em;
  font-weight: 700;
  opacity: .88;
}
.section-title .jp::before,
.section-heading .jp::before,
.section-title .jp::after,
.section-heading .jp::after{
  content: none !important;
  display: none !important;
}
.hero.hero-premium .hero-kicker .en{
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.hero.hero-premium .brand-tagline .en{
  font-size: 12px !important;
}
/* =========================================
   FIX: Hero kicker JP/EN same size
   ========================================= */
.hero.hero-premium .hero-kicker .jp,
.hero.hero-premium .hero-kicker .en{
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
}
/* =========================================
   Desktop header: Brand | Nav | EN in one row
   (keeps mobile collapsible)
   ========================================= */
@media (min-width: 901px){
  .header-inner{
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 12px 0 14px;
  }

  /* header-row 안 요소들은 그리드 좌/우에 배치 */
  .header-row{
    grid-column: 1 / 2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
  }

  /* 메뉴(nav)는 가운데 */
  #primaryNav{
    grid-column: 2 / 3;
    justify-content: center;
    margin: 0 !important;
  }

  /* EN 영역은 오른쪽 */
  .header-right{
    grid-column: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
  }

  /* 데스크탑에서는 토글 버튼 숨김 */
  .nav-toggle{ display: none !important; }

  /* 메뉴가 많으니 pill을 살짝 컴팩트하게 */
  .topnav.topnav-tabs a{
    padding: 7px 10px;
    min-width: 90px;
  }
  .topnav.topnav-tabs .jp{ font-size: 0.95rem; }
  .topnav.topnav-tabs .kr{ font-size: 0.60rem; }
}

/* =========================================
   MENU UPDATE: grouped dropdowns (2026-03)
   - Only affects header menu
   ========================================= */

/* dropdown wrapper behaves like a tab item */
.nav-dd{ position: relative; }

/* button styled same as .topnav a pills */
.nav-dd-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding: 8px 10px;
  min-width: 96px;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(15,20,24,0.12);
  box-shadow: 0 6px 14px rgba(0,0,0,0.05);
  color:#111;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.nav-dd-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(11,42,59,0.25);
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
}
.nav-dd-btn .jp{
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 0.98rem;
  line-height: 1.15;
  white-space: nowrap;
}
.nav-dd-btn .kr{
  font-weight: 800;
  opacity: .58;
  font-size: 0.62rem;
  line-height: 1.1;
  white-space: nowrap;
}
.nav-dd-btn .caret{
  font-size: 10px;
  opacity: .55;
  line-height: 1;
  margin-top: 2px;
}

/* panel */
.nav-dd-panel{
  position: absolute;
  top: 100%;
  margin-top: 10px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 230px;
  background: #fff;
  border: 1px solid rgba(15,20,24,0.10);
  border-radius: 14px;
  box-shadow: 0 18px 46px rgba(15,20,24,0.10);
  padding: 10px;
  display: none;
  z-index: 2000;
  pointer-events: auto;
}
.nav-dd-panel a{
  display:block;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.95rem;
  color:#111;
  white-space: nowrap;
}
.nav-dd-panel a:hover{
  background: rgba(11,42,59,0.06);
  color: var(--primary);
}

/* desktop: open on hover or keyboard focus; keep hover when moving to panel */
@media (min-width: 901px){
  .nav-dd{ position: relative; }
  /* hover-bridge to prevent closing gap */
  .nav-dd::after{
    content:"";
    position:absolute;
    left:0; right:0;
    top: 100%;
    height: 14px;
  }
  .nav-dd:hover .nav-dd-panel,
  .nav-dd:focus-within .nav-dd-panel{ display:block; }
}

/* mobile: dropdown becomes accordion inside grid */
@media (max-width: 900px){
  .nav-dd{ width: 100%; }
  .nav-dd-btn{
    width: 100%;
    min-width: 0;
    padding: 10px 10px;
  }
  .nav-dd-panel{
    position: static;
    transform: none;
    min-width: 0;
    border: none;
    box-shadow: none;
    padding: 8px 0 0;
    display: none;
  }
  .nav-dd.open .nav-dd-panel{ display:block; }
  .nav-dd-panel a{
    border: 1px solid rgba(15,20,24,0.10);
    background: rgba(255,255,255,0.92);
    box-shadow: 0 6px 14px rgba(0,0,0,0.04);
    margin-top: 8px;
    text-align:center;
    border-radius: 999px;
    font-size: 0.92rem;
    padding: 10px 10px;
  }
}


/* ======================================================
   FONT UPDATE (2026-03): Modern JP + Premium EN
   - JP: Noto Sans JP (clean, modern)
   - EN: Playfair Display (premium)
   ====================================================== */
.hero.hero-premium .hero-main-title,
.hero.hero-premium .hero-kicker .en,
.brand span,
.footer-premium .footer-brand .kr{
  font-family: var(--font-en) !important;
}

/* ======================================================
   FINAL PATCH (2026-03) — Requested tweaks
   1) Bigger brand logo
   2) Square menu tabs
   3) Remove hero glass completely
   ====================================================== */

/* 1) Brand logo bigger (top-left) */
.brand img{
  height: 84px !important;
}
@media (max-width: 900px){
  .brand img{
    height: 62px !important;
  }
}

/* =========================
   HEADER BALANCE TUNE (2026-03)
   ========================= */
@media (min-width: 901px){
  .header-inner{
    padding: 8px 0 10px !important;
  }
}

/* 2) Menu pills -> square */
.topnav.topnav-tabs a,
.nav-dd-btn{
  border-radius: 0px !important;
}

/* 3) Hero glass off (desktop + mobile) */
.hero-glass,
.hero-glass-subtitle,
.hero-glass-slim{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
}

/* ======================================================
   FINAL PATCH v2 (2026-03) — spacing + gentle radius
   ====================================================== */

/* 1) Hero JP/KR copy: remove extra gap */
.hero.hero-premium .hero-description-jp{
  margin: 0 0 8px !important;
}
.hero.hero-premium .hero-description{
  margin: 0 !important;
}

/* 2) Menu tabs: add very subtle rounding (not pill) */
.topnav.topnav-tabs a,
.nav-dd-btn{
  border-radius: 8px !important;
}

/* ======================================================
   HERO IMPACT UPGRADE (2026-03)
   - Bigger POST HOUSE
   - Lighter sub copy
   - Stronger CTA
   ====================================================== */

/* 1) Make POST HOUSE 12% bigger */
.hero.hero-premium .hero-main-title{
  font-size: 4.5rem !important;
  letter-spacing: 5px !important;
}

@media (max-width: 900px){
  .hero.hero-premium .hero-main-title{
    font-size: 2.6rem !important;
  }
}

/* 2) Sub copy thinner & more elegant */
.hero.hero-premium .hero-description,
.hero.hero-premium .hero-description-jp{
  font-weight: 400 !important;
  opacity: 0.92 !important;
  letter-spacing: 0.2px;
}

/* 3) Stronger CTA button presence */
.hero.hero-premium .hero-btn-lux{
  padding: 18px 48px !important;
  font-size: 1.05rem !important;
  letter-spacing: 1px !important;
  box-shadow: 0 18px 40px rgba(11,42,59,0.35) !important;
}

.hero.hero-premium .hero-btn-lux:hover{
  transform: translateY(-3px) !important;
  box-shadow: 0 24px 50px rgba(11,42,59,0.45) !important;
}

/* ======================================================
   HERO MOBILE SIZE FIX (2026-03)
   - Increase brand size on mobile
   ====================================================== */

@media (max-width: 900px){
  .hero.hero-premium .hero-main-title{
    font-size: 3.1rem !important;   /* was 2.6rem */
    letter-spacing: 3px !important;
  }
}

@media (max-width: 480px){
  .hero.hero-premium .hero-main-title{
    font-size: 2.6rem !important;   /* very small devices */
  }
}
/* =========================
   FIX: Mobile Nav Toggle (EN page)
   ========================= */
@media (max-width: 900px){

  /* 기본은 숨김 */
  #primaryNav{
    display: none !important;
  }

  /* 열렸을 때만 표시 */
  body.nav-open #primaryNav,
  html.nav-open #primaryNav{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

}

/* =========================
   HEADER NAV REFINEMENT (2026-03)
   - Borderless top menu
   - Elegant gold bar on hover/active
   ========================= */
@media (min-width: 901px){
  .topnav.topnav-tabs a,
  .nav-dd-btn{
    position: relative;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 8px 12px 12px !important;
    transition: color .22s ease, transform .22s ease;
  }

  .topnav.topnav-tabs a::after,
  .nav-dd-btn::after{
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 2px;
    background: linear-gradient(
      90deg,
      rgba(201,162,39,0),
      rgba(201,162,39,0.95) 50%,
      rgba(201,162,39,0)
    );
    opacity: 0;
    transform: scaleX(0.55);
    transform-origin: center;
    transition: opacity .22s ease, transform .22s ease;
  }

  .topnav.topnav-tabs a:hover::after,
  .topnav.topnav-tabs a.active::after,
  .nav-dd:hover .nav-dd-btn::after,
  .nav-dd:focus-within .nav-dd-btn::after{
    opacity: 1;
    transform: scaleX(1);
  }

  .topnav.topnav-tabs a:hover,
  .topnav.topnav-tabs a.active,
  .nav-dd:hover .nav-dd-btn,
  .nav-dd:focus-within .nav-dd-btn{
    color: var(--primary);
    transform: translateY(-1px);
  }
}

/* =========================
   FINAL HEADER OVERRIDE LAST (2026-03)
   ========================= */
@media (min-width: 901px){
  .header-inner{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 0 12px !important;
    min-height: 92px;
    gap: 14px !important;
  }
  .header-row{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 70px;
    flex: 0 0 auto !important;
  }
  .brand{
    position: relative;
    z-index: 2;
  }
  #primaryNav{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    z-index: 1;
  }
  #primaryNav > a{
    min-width: auto !important;
    padding: 6px clamp(4px, 0.8vw, 8px) 10px !important;
  }
  #primaryNav .jp{
    font-size: 0.90rem !important;
    color: rgba(17,29,39,0.94) !important;
  }
  #primaryNav .kr{
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    color: #CBB88E !important;
    opacity: 1 !important;
    letter-spacing: 0.01em;
  }
  #primaryNav > a:hover .kr,
  #primaryNav > a.active .kr,
  #primaryNav .nav-dd-btn:hover .kr,
  #primaryNav .nav-dd-btn:focus-visible .kr{
    color: #B89A58 !important;
  }
  .header-right{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    z-index: 2;
    flex: 0 0 auto !important;
  }
  .lang-switch{
    margin: 0 !important;
    padding: 0 !important;
  }
  .nav-toggle{ display: none !important; }
  .lang-switch::before{ display: none !important; }
}

/* =========================
   HOME HERO FINAL BALANCE (2026-03)
   ========================= */
.hero.hero-premium:not(.hero-subpage) .hero-kicker .en{
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
}

.hero.hero-premium:not(.hero-subpage) .hero-main-title{
  font-size: 4.2rem !important;
  letter-spacing: 4px !important;
}

.hero.hero-premium:not(.hero-subpage) .hero-subtitle{
  font-size: 1.26rem !important;
  line-height: 1.4 !important;
  margin-top: 14px !important;
}

.hero.hero-premium:not(.hero-subpage) .hero-description-jp,
.hero.hero-premium:not(.hero-subpage) .hero-description{
  font-size: 1.0rem !important;
  line-height: 1.75 !important;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

/* Homepage: Stack the bilingual subtitle vertically for long text */
.hero.hero-premium:not(.hero-subpage) .hero-bi-stack{
  flex-direction: column !important;
  gap: 6px !important;
}
.hero.hero-premium:not(.hero-subpage) .hero-bi-stack .sep{
  display: none !important;
}

.hero.hero-premium:not(.hero-subpage) .hero-btn-lux{
  border-radius: 8px !important;
  border: 1px solid rgba(197,163,78,0.5) !important;
  background: linear-gradient(135deg, rgba(30,84,118,0.88), rgba(68,128,166,0.82)) !important;
  color: #f8fcff !important;
  padding: 15px 38px !important;
  font-size: 1.02rem !important;
  letter-spacing: 0.04em !important;
  backdrop-filter: blur(3px) saturate(115%);
  -webkit-backdrop-filter: blur(3px) saturate(115%);
  box-shadow:
    0 12px 24px rgba(14,48,68,0.3),
    inset 0 0 0 1px rgba(255,255,255,0.14) !important;
}

.hero.hero-premium:not(.hero-subpage) .hero-btn-lux:hover{
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg, rgba(26,78,110,0.93), rgba(62,118,154,0.9)) !important;
  box-shadow:
    0 16px 30px rgba(14,48,68,0.36),
    inset 0 0 0 1px rgba(255,255,255,0.18) !important;
}

@media (max-width: 900px){
  .hero.hero-premium:not(.hero-subpage) .hero-kicker .en{
    font-size: 16px !important;
    letter-spacing: 0.12em !important;
  }

  .hero.hero-premium:not(.hero-subpage) .hero-main-title{
    font-size: 2.95rem !important;
    letter-spacing: 3px !important;
  }

  .hero.hero-premium:not(.hero-subpage) .hero-subtitle{
    font-size: 1.04rem !important;
  }

  .hero.hero-premium:not(.hero-subpage) .hero-description-jp,
  .hero.hero-premium:not(.hero-subpage) .hero-description{
    font-size: 0.94rem !important;
    line-height: 1.68 !important;
  }

  .hero.hero-premium:not(.hero-subpage) .hero-btn-lux{
    padding: 14px 30px !important;
    font-size: 0.96rem !important;
  }
}

@media (max-width: 900px){
  .header-right{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-direction: row-reverse !important;
  }
  .lang-switch{
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  .lang-switch::before{ display: none !important; }
}

/* =========================
   MENU UNITY TUNE (2026-03)
   - KR label bigger
   - Mobile nav matches desktop tone (borderless)
   ========================= */
@media (max-width: 900px){
  body.nav-open #primaryNav,
  html.nav-open #primaryNav{
    row-gap: 10px !important;
    column-gap: 16px !important;
  }

  .header-right{
    gap: 18px !important;
  }
  .lang-switch{
    position: relative;
    margin-left: 2px !important;
    padding-left: 14px !important;
  }
  .lang-switch::after{
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 16px;
    background: rgba(17,29,39,0.22);
    transform: translateY(-50%);
  }

  #primaryNav .jp{
    font-size: 0.97rem !important;
    color: rgba(17,29,39,0.94) !important;
    letter-spacing: 0.01em !important;
  }
  #primaryNav .kr{
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    color: #CBB88E !important;
    opacity: 1 !important;
    letter-spacing: 0.01em !important;
  }

  .nav-toggle{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 4px 2px 6px !important;
    min-width: auto !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    color: rgba(14,31,43,0.86) !important;
    position: relative;
  }
  .nav-toggle::after{
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 0;
    height: 1.5px;
    background: linear-gradient(
      90deg,
      rgba(201,162,39,0),
      rgba(201,162,39,0.72) 50%,
      rgba(201,162,39,0)
    );
    opacity: 0;
    transition: opacity .2s ease;
  }
  .nav-toggle:hover,
  .nav-toggle:active,
  .nav-toggle:focus-visible{
    color: rgba(11,42,59,0.96) !important;
  }
  .nav-toggle:hover::after,
  .nav-toggle:active::after,
  .nav-toggle:focus-visible::after,
  body.nav-open .nav-toggle::after,
  html.nav-open .nav-toggle::after{
    opacity: 0.72;
  }

  #primaryNav > a,
  #primaryNav .nav-dd-btn{
    position: relative;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 7px 6px 11px !important;
  }

  #primaryNav > a::after,
  #primaryNav .nav-dd-btn::after{
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 2px;
    height: 1.5px;
    background: linear-gradient(
      90deg,
      rgba(201,162,39,0),
      rgba(201,162,39,0.72) 50%,
      rgba(201,162,39,0)
    );
    opacity: 0;
    transform: scaleX(0.62);
    transition: opacity .20s ease, transform .20s ease;
  }

  #primaryNav > a:hover::after,
  #primaryNav > a:active::after,
  #primaryNav > a.active::after,
  #primaryNav .nav-dd-btn:hover::after,
  #primaryNav .nav-dd-btn:active::after{
    opacity: 1;
    transform: scaleX(1);
  }

  #primaryNav > a:hover,
  #primaryNav > a.active,
  #primaryNav .nav-dd-btn:hover{
    color: var(--primary) !important;
  }
  #primaryNav > a:hover .kr,
  #primaryNav > a.active .kr,
  #primaryNav .nav-dd-btn:hover .kr,
  #primaryNav .nav-dd-btn:active .kr{
    color: #B89A58 !important;
  }

  #primaryNav .nav-dd-panel{
    padding-top: 4px !important;
  }
  #primaryNav .nav-dd-panel a{
    position: relative;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
    padding: 8px 6px 10px !important;
  }
  #primaryNav .nav-dd-panel a::after{
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 1px;
    height: 1px;
    background: linear-gradient(
      90deg,
      rgba(201,162,39,0),
      rgba(201,162,39,0.58) 50%,
      rgba(201,162,39,0)
    );
    opacity: 0;
    transform: scaleX(0.65);
    transition: opacity .20s ease, transform .20s ease;
  }
  #primaryNav .nav-dd-panel a:hover::after,
  #primaryNav .nav-dd-panel a:active::after{
    opacity: 1;
    transform: scaleX(1);
  }
}

/* =========================
   INDEX QUICK CONTACT
   - Desktop: bottom-right floating contact card
   - Mobile: bottom dock bar
   ========================= */
.contact-float{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1400;
  width: 300px;
  max-width: calc(100vw - 32px);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(15,20,24,0.14);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.16);
}
.contact-float-inner{ padding: 14px 14px 12px; }
.cf-main{
  display: block;
  padding: 12px;
  border-radius: 14px;
  background: rgba(201,162,39,0.10);
  border: 1px solid rgba(201,162,39,0.22);
}
.cf-title{
  display: block;
  font-weight: 900;
  color: #111;
  letter-spacing: 0.2px;
  margin-bottom: 2px;
}
.cf-title .kr{
  color: var(--primary);
  font-weight: 800;
}
.cf-title-sep{
  opacity: 0.55;
}
.cf-sub{
  display: block;
  color: var(--muted);
  font-weight: 800;
  font-size: 0.88rem;
  margin-top: 2px;
}
.cf-sub b{
  color: #111;
  font-weight: 900;
  margin-right: 4px;
}
.cf-list{
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(15,20,24,0.08);
  display: grid;
  gap: 8px;
}
.cf-item{
  display: flex;
  align-items: center;
  gap: 10px;
}
.cf-item-icon{
  width: 26px;
  height: 26px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(11,42,59,0.09);
  border: 1px solid rgba(15,20,24,0.10);
  color: var(--primary);
  font-size: 14px;
  flex: 0 0 auto;
}
.cf-item-text{
  font-size: 0.86rem;
  line-height: 1.35;
  color: rgba(38,50,58,0.92);
  font-weight: 800;
  overflow-wrap: normal;
}
.cf-item-text-intl{
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}
.cf-item-text-intl .cf-item-label{
  opacity: 0.9;
}
.cf-item-text-intl .cf-item-num{
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.cf-item-icon-sns{
  width: auto;
  height: auto;
  padding: 0;
  gap: 6px;
  border: 0;
  background: transparent;
}
.cf-item-icon-sns img{
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 7px;
  border: 1px solid rgba(15,20,24,0.14);
  background: #fff;
  display: block;
}

.contact-dock{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1500;
  display: none;
  gap: 10px;
  padding: 12px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(15,20,24,0.12);
}
.contact-dock > .dock-item{
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(15,20,24,0.12);
  background: #fff;
}
.contact-dock .dock-icon{
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(11,42,59,0.08);
}
.contact-dock .dock-icon-glyph{
  font-size: 15px;
  color: var(--primary);
}
.contact-dock .dock-icon-sns{
  gap: 2px;
  padding: 0 5px;
  width: auto;
}
.contact-dock .dock-icon-sns img{
  width: 11px;
  height: 11px;
  display: block;
}
.contact-dock .dock-copy{
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
.contact-dock .dock-copy b{ font-weight: 900; color: #111; }
.contact-dock .dock-copy small{
  font-weight: 800;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.25;
  text-align: left;
  white-space: normal;
}
.contact-dock .dock-copy small span{
  display: block;
}
.contact-dock .dock-copy small .dock-num{
  white-space: nowrap;
}
.contact-dock .dock-tel .dock-copy{
  gap: 0;
}
.contact-dock .dock-tel .dock-copy small{
  font-size: 0.9rem;
  line-height: 1.34;
  font-weight: 900;
  color: rgba(33,42,49,0.95);
}
.contact-dock .dock-tel{
  justify-content: flex-start;
  gap: 10px;
}
.contact-dock .dock-sns{
  justify-content: space-between;
}
.contact-dock .dock-sns-links{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}
.contact-dock .dock-sns-link{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(15,20,24,0.14);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.contact-dock .dock-sns-link img{
  width: 19px;
  height: 19px;
  display: block;
}
.contact-dock .dock-sns-link:hover{
  border-color: rgba(11,42,59,0.32);
}

@media (max-width: 900px){
  body.has-contact-dock{ padding-bottom: 78px; }
  .contact-dock{
    display: flex;
    gap: 8px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  }
  .contact-dock > .dock-item{
    padding: 8px 9px;
    border-radius: 12px;
    gap: 8px;
    align-items: flex-start;
  }
  .contact-dock .dock-icon{
    width: 26px;
    height: 26px;
    margin-top: 1px;
  }
  .contact-dock .dock-copy b{
    font-size: 1rem;
    line-height: 1.18;
    white-space: normal;
  }
  .contact-dock .dock-copy small{
    font-size: 0.7rem;
    line-height: 1.2;
    white-space: normal;
    word-break: keep-all;
  }
  .contact-dock .dock-tel .dock-copy small{
    font-size: 0.82rem;
  }
  .contact-dock .dock-sns{
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .contact-dock .dock-sns .dock-copy b{
    display: none;
  }
  .contact-dock .dock-sns .dock-copy small{
    font-size: 0.78rem;
    line-height: 1.2;
    white-space: nowrap;
  }
  .contact-dock .dock-sns-links{
    width: 100%;
    margin-left: 0;
    margin-top: 4px;
    gap: 5px;
    flex-wrap: wrap;
  }
  .contact-dock .dock-sns-link{
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }
  .contact-dock .dock-sns-link img{
    width: 17px;
    height: 17px;
  }
  .contact-float{ display: none; }
}

@media (max-width: 420px){
  body.has-contact-dock{ padding-bottom: 72px; }
  .contact-dock{
    gap: 6px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  }
  .contact-dock > .dock-item{
    padding: 7px 8px;
  }
  .contact-dock .dock-copy b{
    font-size: 0.95rem;
  }
  .contact-dock .dock-copy small{
    font-size: 0.66rem;
  }
  .contact-dock .dock-tel .dock-copy small{
    font-size: 0.78rem;
  }
  .contact-dock .dock-sns .dock-copy small{
    font-size: 0.72rem;
    white-space: nowrap;
  }
}

/* =========================
   INDEX Tone Sync (Hero -> Below)
   - Keep copy unchanged
   - Align lower sections with premium hero tone
   ========================= */
.page-index .home-wrap{
  position: relative;
  padding: 74px 0 82px;
  background:
    radial-gradient(1100px 320px at 50% -80px, rgba(120, 170, 200, 0.18), rgba(120, 170, 200, 0) 72%),
    linear-gradient(180deg, #f6fafc 0%, #f8f5ef 56%, #f6f2ea 100%);
}
.page-index .home-wrap::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(201,162,39,0),
    rgba(201,162,39,0.58) 50%,
    rgba(201,162,39,0)
  );
}
.page-index .home-wrap .section-title{
  margin-bottom: 40px;
}
.page-index .home-wrap .title-bi .jp{
  color: #152f42;
  letter-spacing: 0.03em;
}
.page-index .home-wrap .title-bi .kr{
  color: rgba(21,47,66,0.70);
}

.page-index .home-wrap .card.mini.mini-tight{
  padding: 30px 24px;
  border-radius: 18px;
  border: 1px solid rgba(15,20,24,0.09);
  border-top: 3px solid rgba(201,162,39,0.72) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.92));
  box-shadow: 0 14px 34px rgba(12, 20, 28, 0.08);
}
.page-index .home-wrap .card.mini.mini-tight:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(12, 20, 28, 0.12);
}
.page-index .home-wrap .core-num-big{
  color: rgba(201,162,39,0.58);
  font-size: 2.55rem;
}
.page-index .home-wrap .card.mini.mini-tight h3.jp{
  color: #1d3445;
}
.page-index .home-wrap .card.mini.mini-tight p.jp,
.page-index .home-wrap .card.mini.mini-tight p.kr{
  color: rgba(35, 46, 55, 0.82) !important;
}

.page-index .home-wrap > .container > .card:not(.mini){
  border-radius: 22px;
  border: 1px solid rgba(15,20,24,0.08) !important;
  background: linear-gradient(180deg, rgba(247,250,252,0.96), rgba(245,241,234,0.92)) !important;
  box-shadow: 0 20px 48px rgba(10, 18, 25, 0.10);
}
.page-index .home-wrap > .container > .card:not(.mini) > .block{
  padding: 42px 38px !important;
}
.page-index .home-wrap .mini-icon-card{
  border-radius: 14px;
  border: 1px solid rgba(15,20,24,0.10);
  background: rgba(255,255,255,0.90);
  box-shadow: 0 10px 24px rgba(12, 20, 28, 0.07);
}
.page-index .home-wrap .mini-icon-card:hover{
  border-color: rgba(201,162,39,0.45);
  box-shadow: 0 16px 30px rgba(12, 20, 28, 0.10);
}
.page-index .home-wrap .mini-icon-card .mi-title{
  color: #1d3445;
}
.page-index .home-wrap .mini-icon-card .mi-jp.kr{
  color: rgba(29,52,69,0.70);
}
.page-index .home-wrap .card-actions .btn.btn-primary{
  border-radius: 10px;
  border: 1px solid rgba(197,163,78,0.50);
  background: linear-gradient(
    135deg,
    rgba(30,84,118,0.90),
    rgba(72,132,168,0.84)
  );
  color: #f8fcff;
  box-shadow:
    0 12px 24px rgba(14,48,68,0.28),
    inset 0 0 0 1px rgba(255,255,255,0.14);
}
.page-index .home-wrap .card-actions .btn.btn-primary:hover{
  transform: translateY(-2px);
  background: linear-gradient(
    135deg,
    rgba(27,78,110,0.94),
    rgba(64,121,156,0.90)
  );
  box-shadow:
    0 18px 30px rgba(14,48,68,0.34),
    inset 0 0 0 1px rgba(255,255,255,0.18);
}

.page-index .section-contact-wrapper{
  position: relative;
  padding: 78px 0 92px;
  background:
    radial-gradient(900px 260px at 50% 0, rgba(201,162,39,0.12), rgba(201,162,39,0) 72%),
    linear-gradient(180deg, #f7f3eb 0%, #f3f7fa 100%);
}
.page-index .section-contact-wrapper .card.statement{
  border-radius: 18px;
  border: 1px solid rgba(201,162,39,0.42) !important;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 14px 36px rgba(10, 20, 28, 0.09);
}
.page-index .section-contact-wrapper .statement-quote{
  color: #1a3a52 !important;
}
.page-index .section-contact-wrapper .statement-sub{
  color: rgba(25, 45, 58, 0.76);
}
.page-index .section-contact-wrapper .contact-grid-layout{
  gap: 24px;
}
.page-index .section-contact-wrapper .contact-box{
  border-radius: 18px;
  border: 1px solid rgba(15,20,24,0.08);
  background: rgba(255,255,255,0.96);
  box-shadow: 0 14px 34px rgba(10,20,28,0.08);
  padding: 36px;
}
.page-index .section-contact-wrapper .contact-box:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(10,20,28,0.12);
}
.page-index .section-contact-wrapper .phone-display{
  background: linear-gradient(180deg, rgba(11,42,59,0.06), rgba(11,42,59,0.02));
  border: 1px solid rgba(11,42,59,0.14);
  border-radius: 14px;
}
.page-index .section-contact-wrapper .icon-tel{
  color: #1b3a4d;
}
.page-index .section-contact-wrapper .tel-number{
  color: #0f2c40;
}
.page-index .section-contact-wrapper .global-phone b{
  color: #132533 !important;
}
.page-index .section-contact-wrapper .sns-id-row{
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    rgba(30,84,118,0.92),
    rgba(70,128,164,0.86)
  ) !important;
  border: 1px solid rgba(197,163,78,0.40);
  box-shadow:
    0 12px 28px rgba(14,48,68,0.24),
    inset 0 0 0 1px rgba(255,255,255,0.12);
}
.page-index .section-contact-wrapper .sns-id-row .sns-label{
  color: rgba(236,246,252,0.86);
}
.page-index .section-contact-wrapper .sns-id-row .sns-id-text{
  color: #f7fbff !important;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.16);
}
.page-index .section-contact-wrapper .sns-icon-wrap{
  width: 58px;
  height: 58px;
  border-radius: 999px;
  border: 1px solid rgba(15,20,24,0.12);
  background: rgba(255,255,255,0.94);
}
.page-index .section-contact-wrapper .sns-icon-img{
  width: 36px;
  height: 36px;
}

.page-index .footer.footer-premium{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0) 22%),
    linear-gradient(180deg, #14364a 0%, #0f2b3d 100%);
  border-top: 1px solid rgba(201,162,39,0.28);
  padding: 34px 0 24px;
}
.page-index .footer-premium .footer-brand{
  margin-bottom: 8px;
}
.page-index .footer-premium .footer-brand .kr{
  color: #d6b66d !important;
}
.page-index .footer-premium .footer-info{
  display: grid;
  gap: 6px;
  color: rgba(237,244,248,0.90);
  opacity: 1;
  line-height: 1.5;
  font-size: 0.89rem;
  margin-bottom: 8px;
}
.page-index .footer-premium .footer-info .line{
  gap: 2px;
}
.page-index .footer-premium .footer-copy{
  color: rgba(237,244,248,0.50);
  opacity: 1;
  font-size: 0.8rem;
}

@media (max-width: 900px){
  .page-index .home-wrap{
    padding: 58px 0 64px;
  }
  .page-index .home-wrap > .container > .card:not(.mini) > .block{
    padding: 30px 18px !important;
  }
  .page-index .section-contact-wrapper{
    padding: 62px 0 88px;
  }
  .page-index .section-contact-wrapper .contact-box{
    padding: 28px 20px;
  }
  .page-index .footer.footer-premium{
    padding: 30px 0 22px;
  }
}

/* =========================
   SITE Tone Sync (All Pages Except Home Index)
   - Keep copy unchanged
   - Unify visual tone with current hero direction
   ========================= */
body:not(.page-index){
  background:
    radial-gradient(1000px 340px at 50% -100px, rgba(115,166,196,0.12), rgba(115,166,196,0) 72%),
    linear-gradient(180deg, #f7fafc 0%, #f7f4ee 56%, #f4f7fa 100%);
}

body:not(.page-index) section:not(.hero){
  position: relative;
  padding: 74px 0;
}
body:not(.page-index) section:not(.hero):nth-of-type(even){
  background: linear-gradient(180deg, rgba(248,252,255,0.72), rgba(246,242,235,0.64));
}

body:not(.page-index) .section-title{
  margin-bottom: 40px;
}
body:not(.page-index) .section-title h2{
  color: #163247;
}
body:not(.page-index) .title-bi .jp{
  color: #163247;
}
body:not(.page-index) .title-bi .kr{
  color: rgba(22,50,71,0.72);
}

body:not(.page-index) .card{
  border-radius: 18px;
  border: 1px solid rgba(15,20,24,0.08);
  background: rgba(255,255,255,0.95);
  box-shadow: 0 14px 34px rgba(12, 20, 28, 0.08);
}
body:not(.page-index) .card:hover{
  box-shadow: 0 22px 44px rgba(12, 20, 28, 0.12);
}
body:not(.page-index) .card.statement{
  border: 1px solid rgba(201,162,39,0.42) !important;
  background: rgba(255,255,255,0.94);
}
body:not(.page-index) .card.statement .statement-quote{
  color: #1a3a52 !important;
}
body:not(.page-index) .card.statement .statement-sub{
  color: rgba(25,45,58,0.78);
}

body:not(.page-index) .mini-icon-card,
body:not(.page-index) .step{
  border: 1px solid rgba(15,20,24,0.10);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 24px rgba(12, 20, 28, 0.07);
}
body:not(.page-index) .mini-icon-card:hover{
  border-color: rgba(201,162,39,0.40);
  box-shadow: 0 16px 30px rgba(12, 20, 28, 0.10);
}
body:not(.page-index) .step .num{
  background: linear-gradient(135deg, #204f6f, #3f7ca1);
}

body:not(.page-index) .phone-display{
  background: linear-gradient(180deg, rgba(11,42,59,0.06), rgba(11,42,59,0.02));
  border: 1px solid rgba(11,42,59,0.14);
  border-radius: 14px;
}
body:not(.page-index) .sns-id-row{
  background: linear-gradient(
    135deg,
    rgba(30,84,118,0.92),
    rgba(70,128,164,0.86)
  ) !important;
  border: 1px solid rgba(197,163,78,0.40);
  box-shadow:
    0 12px 28px rgba(14,48,68,0.24),
    inset 0 0 0 1px rgba(255,255,255,0.12);
}
body:not(.page-index) .sns-id-row .sns-label{
  color: rgba(236,246,252,0.86);
}
body:not(.page-index) .sns-id-row .sns-id-text{
  color: #f7fbff !important;
  letter-spacing: 0.05em;
}

body:not(.page-index) .btn-primary{
  border-radius: 10px;
  border: 1px solid rgba(197,163,78,0.50);
  background: linear-gradient(
    135deg,
    rgba(30,84,118,0.90),
    rgba(72,132,168,0.84)
  );
  color: #f8fcff;
  box-shadow:
    0 12px 24px rgba(14,48,68,0.28),
    inset 0 0 0 1px rgba(255,255,255,0.14);
}
body:not(.page-index) .btn-primary:hover{
  background: linear-gradient(
    135deg,
    rgba(27,78,110,0.94),
    rgba(64,121,156,0.90)
  );
  box-shadow:
    0 18px 30px rgba(14,48,68,0.34),
    inset 0 0 0 1px rgba(255,255,255,0.18);
}
body:not(.page-index) .btn-outline{
  border: 1px solid rgba(20,49,69,0.24);
  background: rgba(255,255,255,0.84);
}
body:not(.page-index) .btn-outline:hover{
  border-color: rgba(20,49,69,0.42);
  color: #17384f;
}

body:not(.page-index) .footer.footer-premium{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0) 22%),
    linear-gradient(180deg, #14364a 0%, #0f2b3d 100%);
  border-top: 1px solid rgba(201,162,39,0.28);
  padding: 36px 0 26px;
}
body:not(.page-index) .footer-premium .footer-brand{
  margin-bottom: 10px;
}
body:not(.page-index) .footer-premium .footer-brand .kr{
  color: #d6b66d !important;
}
body:not(.page-index) .footer-premium .footer-info{
  color: rgba(237,244,248,0.90);
  line-height: 1.55;
  font-size: 0.91rem;
  opacity: 1;
  margin-bottom: 10px;
}
body:not(.page-index) .footer-premium .footer-copy{
  color: rgba(237,244,248,0.50);
  opacity: 1;
  font-size: 0.8rem;
}

@media (max-width: 900px){
  body:not(.page-index) section:not(.hero){
    padding: 58px 0;
  }
  body:not(.page-index) .section-title{
    margin-bottom: 30px;
  }
  body:not(.page-index) .footer.footer-premium{
    padding: 30px 0 22px;
  }
}

/* Property info: buy/rent switch balance */
body:not(.page-index) .listing-switch-card{
  border: 1px solid rgba(201,162,39,0.22) !important;
  background: rgba(255,255,255,0.62) !important;
  box-shadow: none !important;
}
body:not(.page-index) .listing-switch-block{
  padding: 14px 18px !important;
}
body:not(.page-index) .listing-switch{
  gap: 16px !important;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
body:not(.page-index) .listing-switch .btn.btn-primary{
  flex: 1 1 320px;
  max-width: 430px;
  padding: 12px 24px;
  border-radius: 9px;
  box-shadow: none !important;
  border-color: rgba(197,163,78,0.40);
}
body:not(.page-index) .listing-switch .btn.btn-primary:hover{
  box-shadow: none !important;
}
@media (max-width: 900px){
  body:not(.page-index) .listing-switch{
    gap: 10px !important;
  }
  body:not(.page-index) .listing-switch .btn.btn-primary{
    flex-basis: 100%;
    max-width: 100%;
    padding: 11px 16px;
  }
}

/* Header top color line */
.header{
  overflow: visible;
}
.header::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, #0b2a3b 0%, #2c6e91 42%, #c9a227 100%);
  pointer-events: none;
}

/* Airier menu spacing */
@media (min-width: 901px){
  #primaryNav{
    gap: clamp(8px, 1.5vw, 22px) !important;
  }
  #primaryNav > a,
  #primaryNav .nav-dd-btn{
    padding: 7px clamp(6px, 1vw, 16px) 12px !important;
  }
}

/* English pages: prevent header overlap after wider global menu spacing */
@media (min-width: 901px){
  html[lang="en"] #primaryNav{
    gap: clamp(4px, 1vw, 10px) !important;
  }
  html[lang="en"] #primaryNav > a,
  html[lang="en"] #primaryNav .nav-dd-btn{
    padding: 7px clamp(4px, 0.8vw, 9px) 12px !important;
  }
  html[lang="en"] #primaryNav .jp{
    font-size: 0.84rem !important;
    letter-spacing: 0.005em !important;
  }
}

@media (max-width: 900px){
  body.nav-open #primaryNav,
  html.nav-open #primaryNav{
    row-gap: 14px !important;
    column-gap: 24px !important;
  }
}

/* Small mobile: restore original 2-column tab layout */
@media (max-width: 520px){
  body.nav-open #primaryNav,
  html.nav-open #primaryNav{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: 10px !important;
    column-gap: 14px !important;
  }

  #primaryNav > a,
  #primaryNav .nav-dd-btn{
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 7px 6px 11px !important;
  }

  #primaryNav .jp{
    font-size: 0.9rem !important;
    white-space: nowrap !important;
  }
  #primaryNav .kr{
    font-size: 0.68rem !important;
    white-space: nowrap !important;
  }
}

/* Index bottom access block */
.home-access-section{
  padding: 24px 0 84px;
  background: linear-gradient(180deg, #f3f7fa 0%, #f5f2eb 100%);
}
.home-access-section .card{
  border-radius: 20px;
}
.home-access-section .block{
  padding: 34px 32px;
}
.home-access-media{
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr);
  gap: 16px;
}
.home-access-panel{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(15,20,24,0.08);
  box-shadow: var(--shadow);
  background: #fff;
}
.home-access-panel iframe{
  display: block;
  width: 100%;
}
.home-access-building{
  margin: 0;
  display: flex;
  flex-direction: column;
}
.home-access-building img{
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
}
.home-access-cap{
  padding: 10px 12px;
  font-size: 0.88rem;
  font-weight: 800;
  color: #26333d;
  border-top: 1px solid rgba(15,20,24,0.08);
  background: linear-gradient(180deg, rgba(249,251,253,0.98), rgba(245,246,247,0.96));
}
.home-access-cap .cap-title{
  font-weight: 900;
  letter-spacing: 0.2px;
}
.home-access-cap .cap-sub{
  margin-top: 5px;
  color: #41515f;
  font-size: 0.86rem;
  font-weight: 700;
}
.home-access-cap .hint{
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(201,162,39,0.24);
  background: rgba(201,162,39,0.12);
  color: #1f2a33;
  font-size: 0.84rem;
  font-weight: 800;
}
.home-access-contact-line{
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(15,20,24,0.08);
  background: rgba(255,255,255,0.86);
}
.home-access-item{
  color: #22313c;
  font-size: 0.95rem;
  line-height: 1.45;
}
.home-access-item b{
  color: #111;
  margin-right: 6px;
}
.home-access-divider{
  color: rgba(15,20,24,0.35);
  font-weight: 700;
}

/* Subpage hero line consistency:
   always show gold line under EN kicker text */
.hero.hero-premium.hero-subpage .hero-gold-line{
  display: none !important;
}
.hero.hero-premium.hero-subpage .hero-kicker{
  position: relative !important;
  display: inline-block !important;
  padding-bottom: 14px !important;
}
.hero.hero-premium.hero-subpage .hero-kicker::after{
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  transform: translateX(-50%) !important;
  width: 72px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: var(--accent) !important;
  opacity: 0.9 !important;
}

@media (max-width: 900px){
  .home-access-section{
    padding: 14px 0 74px;
  }
  .home-access-section .block{
    padding: 26px 18px;
  }
  .home-access-media{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .home-access-building img{
    height: 280px;
  }
  .home-access-contact-line{
    justify-content: flex-start;
    gap: 8px;
  }
  .home-access-divider{
    display: none;
  }
  .home-access-item{
    width: 100%;
  }
}

/* Hero tone rebalance:
   keep original bright look, apply only minimal guard on very wide desktop */
.hero.hero-premium .hero-video{
  filter: none !important;
}
.hero.hero-premium .hero-overlay{
  background: radial-gradient(
    1280px 720px at 50% 35%,
    rgba(0,0,0,0.06),
    rgba(0,0,0,0.22)
  ) !important;
}
.hero.hero-premium .hero-vignette{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.02) 45%,
    rgba(0,0,0,0.08) 78%,
    rgba(0,0,0,0.14) 100%
  );
}

/* Wide desktop only: avoid occasional overexposure on subpage hero */
@media (min-width: 1200px){
  .hero.hero-premium.hero-subpage .hero-video{
    object-position: 18% 58% !important;
  }
  .hero.hero-premium.hero-subpage .hero-overlay{
    background: radial-gradient(
      1400px 760px at 50% 40%,
      rgba(0,0,0,0.10),
      rgba(0,0,0,0.30)
    ) !important;
  }
}

/* Mobile header overflow guard:
   keep top-right MENU / language controls on one line */
@media (max-width: 900px){
  .header-row{
    display: flex !important;
    align-items: center !important; /* 수직 정렬 */
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 12px !important; /* 좌우 여유 공간 확보 */
  }

  .brand{
    min-width: 0 !important;
    flex: 1 1 auto !important;
    gap: 8px !important;
  }
  .brand img{
    height: clamp(80px, 17vw, 105px) !important; /* 모바일: 클라이언트 타협안 (10% 증폭) */
    width: auto !important;
    max-width: 100% !important; /* 이미지가 영역을 벗어나지 않게 제어 */
    object-fit: contain !important;
    margin-top: -10px !important; /* 모바일: 현재보다 2px 미세하게 위로 조정 (0.25 포인트) */
    margin-bottom: -26px !important; 
    margin-left: -12px !important;
    flex-shrink: 1 !important; /* 공간이 부족할 때 수축 허용 */
  }
  .brand span{
    font-size: clamp(1.1rem, 4vw, 1.25rem) !important; /* 텍스트 밸런스 맞춤 */
    letter-spacing: 0 !important;
    white-space: nowrap;
    display: block !important; /* 항상 보이도록 설정 */
  }

  .header-right{
    flex: 0 0 auto !important;
    min-width: max-content !important;
    display: flex !important;
    align-items: center !important; /* 버튼들 수직 정렬 */
    flex-direction: row-reverse !important;
    gap: 10px !important;
    white-space: nowrap !important;
  }

  .lang-switch{
    margin: 0 !important;
    padding: 0 !important;
    gap: 8px !important;
    white-space: nowrap !important;
  }
  .lang-switch::before,
  .lang-switch::after{
    display: none !important;
  }

  /* Unify MENU & Language Button Styles (Mobile) */
  .lang-switch .lang-only,
  .nav-toggle{
    /* Base Reset */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important; /* 높이 통일 */
    padding: 0 6px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;

    /* Typography */
    font-family: var(--font-base) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    color: #111 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    position: relative !important;
  }

  /* Unified Hover Line */
  .lang-switch .lang-only::after,
  .nav-toggle::after{
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 4px !important;
    height: 2px !important;
    background: linear-gradient(90deg, rgba(201,162,39,0), rgba(201,162,39,0.8), rgba(201,162,39,0)) !important;
    opacity: 0 !important;
    transition: opacity .25s ease !important;
    width: 100% !important;
    transform: none !important;
  }

  .lang-switch .lang-only:hover::after,
  .nav-toggle:hover::after,
  .nav-toggle[aria-expanded="true"]::after{
    opacity: 1 !important;
  }
}

@media (max-width: 380px){
  .brand img{
    height: 76px !important; /* 미니 화면에서도 약간 더 확대 */
    margin-top: -9px !important;
    margin-bottom: -19px !important;
    margin-left: -8px !important;
  }
  .brand span{
    font-size: 1.05rem !important; 
  }
  .header-right{
    gap: 6px !important;
  }
  .lang-switch a,
  .lang-switch .lang-only,
  .nav-toggle{
    font-size: 11px !important; /* 최소 사이즈 유지 */
    letter-spacing: 0.04em !important;
  }
}

/* ======================================================
   ✅ HEADER 1-TIER (SINGLE ROW) FIX
   - 2단(위아래)으로 분리되는 현상 완벽 제거
   - 절대위치(absolute) 강제 해제로 크기 변경 시 겹침 현상 원천 차단
   ====================================================== */
.header-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 1240px !important; /* 요소들이 너무 멀어지지 않도록 간격 좁힘 */
  margin: 0 auto !important;    /* 로고와 메뉴를 화면 중앙으로 모음 */
  padding-left: 20px !important; /* 화면이 좁아졌을 때 양옆 최소 여백 확보 */
  padding-right: 20px !important;
  gap: clamp(10px, 2vw, 24px) !important; /* 서로 맞닿기 전에 밀어내는 최소 여백 방어막 */
}

/* 데스크탑 무조건 1줄(가로) 고정 및 겹침 방지 */
@media (min-width: 901px) {
  .header-inner {
    flex-wrap: nowrap !important;
  }
  .header-row {
    display: contents !important; /* 내부 래퍼 무시하고 일렬 배치 강제 */
  }
  .brand,
  #primaryNav,
  .header-right {
    position: static !important; /* 겹침을 유발하는 원인(absolute) 완전 해제 */
    transform: none !important;
  }
  
  /* 로고 영역: 화면이 좁아지면 로고 크기도 비율에 맞춰 자연스럽게 축소 */
  .brand { order: 1; flex: 0 1 auto !important; min-width: 0 !important; }
  .brand img {
    height: clamp(80px, 9.5vw, 116px) !important; /* 데스크탑: 극한과 밸런스의 중간 타협점 */
    margin-top: -13px !important; /* 데스크탑: 정확히 3px 위로 끌어올림 */
    margin-bottom: -33px !important; 
    margin-left: -12px !important;
    object-fit: contain !important;
  }
  .brand span {
    font-size: clamp(1.15rem, 1.5vw, 1.45rem) !important; 
  }

  /* 메뉴 영역: 화면이 좁아지면 간격과 글자 크기 자동 축소 */
  #primaryNav { 
    order: 2; 
    flex: 1 1 auto !important;
    min-width: 0 !important; /* 공간이 부족하면 메뉴가 밖으로 튀어나가지 않고 수축하도록 방어 */
    gap: clamp(4px, 2vw, 32px) !important; /* 큰 화면에서 간격을 시원하게(최대 32px) 벌려줌 */
  }
  #primaryNav > a,
  #primaryNav .nav-dd-btn {
    padding: 8px clamp(4px, 1.5vw, 18px) 12px !important; /* 메뉴 버튼 자체의 양옆 여백도 대폭 확대 */
    min-width: 0 !important;
  }
  #primaryNav .jp {
    font-size: clamp(0.72rem, 1.1vw, 0.90rem) !important;
    letter-spacing: -0.01em !important;
  }
  #primaryNav .kr {
    font-size: clamp(0.55rem, 0.8vw, 0.74rem) !important;
  }

  /* 우측 버튼 영역 유연한 수축 및 영어탭 줄바꿈 방지 */
  .header-right { 
    order: 3; 
    flex: 0 1 auto !important; 
    min-width: 0 !important; 
    white-space: nowrap !important; /* 전체 영역 줄바꿈 금지 */
  }
  .lang-switch a,
  .lang-switch .lang-only {
    white-space: nowrap !important; /* 글자(h)가 밑으로 떨어지는 현상 완벽 방지 */
    font-size: clamp(10px, 1.2vw, 13px) !important; /* 메뉴처럼 공간이 좁아지면 글씨 자동 축소 */
  }
}

/* 모바일에서도 로고와 우측 버튼은 무조건 1줄 유지 (메뉴 오픈 시에만 아래로 확장) */
@media (max-width: 900px) {
  .header-inner {
    flex-wrap: wrap !important;
  }
  .header-row {
    display: contents !important;
  }
  .brand,
  #primaryNav,
  .header-right {
    position: static !important;
    transform: none !important;
  }
    .brand { order: 1; flex: 1 1 0% !important; min-width: 0 !important; } /* 우측 메뉴 공간을 확보하기 위해 강제 수축 허용 */
  .header-right { order: 2; flex: 0 0 auto !important; }
  #primaryNav { order: 3; flex: 1 1 100% !important; width: 100% !important; }
}