@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&family=Noto+Sans+KR:wght@400;500;600;700;800;900&family=Song+Myung&display=swap');

/* V12 — 첨부 PDF의 먹빛 편집 레이아웃만 참고하고, 이미지는 기존 백운산신 자산만 사용한다. */
:root {
  --v12-ink: #050506;
  --v12-charcoal: #111214;
  --v12-slate: #181b22;
  --v12-pearl: #d8d4cf;
  --v12-pearl-soft: #aaa8aa;
  --v12-red: #982e2a;
  --v12-blue: #182038;
  --v12-line: rgba(216, 212, 207, .18);
  --v12-line-strong: rgba(216, 212, 207, .36);
  --v12-display: "Song Myung", "Noto Serif KR", serif;
  --v12-body: "Noto Sans KR", sans-serif;
  --v12-reading: "Gowun Batang", serif;
}

body.home-v11.home-v12 {
  background:
    radial-gradient(circle at 12% 7%, rgba(89, 105, 159, .12), transparent 22%),
    radial-gradient(circle at 92% 28%, rgba(152, 46, 42, .08), transparent 18%),
    linear-gradient(90deg, #050506, #090a0d 46%, #050506);
  font-family: var(--v12-body);
}
body.home-v11.home-v12::before {
  opacity: .14;
  background-image:
    linear-gradient(135deg, transparent 48%, rgba(255, 255, 255, .035) 49%, rgba(255, 255, 255, .035) 51%, transparent 52%),
    linear-gradient(45deg, transparent 48%, rgba(255, 255, 255, .02) 49%, rgba(255, 255, 255, .02) 51%, transparent 52%);
  background-size: 42px 42px;
}
body.home-v11.home-v12::after {
  content: "";
  position: fixed;
  z-index: -1;
  right: -180px;
  top: 18vh;
  width: 440px;
  height: 440px;
  border: 1px solid rgba(216, 212, 207, .06);
  border-radius: 50%;
  box-shadow: inset 0 0 80px rgba(121, 130, 166, .04), 0 0 100px rgba(121, 130, 166, .025);
  pointer-events: none;
}

.home-v12 .v11-shell { width: min(800px, calc(100% - 32px)); }
.home-v12 .v11-header { height: 64px; border-color: var(--v12-line); background: rgba(5, 5, 6, .96); }
.home-v12 .v11-header-inner { width: min(800px, calc(100% - 32px)); }
.home-v12 .v11-brand strong { font: 400 18px/1.1 var(--v12-display); letter-spacing: -.03em; }
.home-v12 .v11-brand small { color: var(--v12-pearl-soft); }
.home-v12 .v11-header-cta { min-height: 38px; border: 1px solid rgba(255,255,255,.12); border-radius: 2px; background: var(--v12-red); }
.home-v12 .v11-nav { top: 64px; border-color: var(--v12-line); background: rgba(9, 10, 12, .96); }
.home-v12 .v11-nav-inner { width: min(800px, calc(100% - 32px)); justify-content: center; }
.home-v12 .v11-nav a { color: #777a80; letter-spacing: .02em; }
.home-v12 .v11-nav a.active { color: var(--v12-pearl); }
.home-v12 .v11-nav a.active::after { background: var(--v12-red); }

.home-v12 .v11-hero { padding: 18px 0 62px; }
.home-v12 .v11-hero-card {
  min-height: 650px;
  border: 1px solid var(--v12-line-strong);
  border-radius: 2px;
  background: #050506;
  box-shadow: 0 35px 90px rgba(0, 0, 0, .52);
}
.home-v12 .v11-hero-card::before {
  background:
    linear-gradient(90deg, #050506 0%, rgba(5, 5, 6, .98) 34%, rgba(5, 5, 6, .48) 61%, rgba(5, 5, 6, .1) 100%),
    linear-gradient(180deg, transparent 56%, rgba(5, 5, 6, .7));
}
.home-v12 .v11-hero-card::after {
  content: "白 雲 山 神";
  position: absolute;
  right: 19px;
  bottom: 20px;
  writing-mode: vertical-rl;
  color: rgba(255, 255, 255, .45);
  font: 400 11px/1.8 var(--v12-reading);
  letter-spacing: .34em;
}
.home-v12 .v11-hero-image { object-position: 72% 50%; filter: grayscale(.3) saturate(.7) contrast(1.16) brightness(.75); }
.home-v12 .v11-hero-copy { width: 61%; min-height: 650px; padding: 58px 42px; }
.home-v12 .v11-kicker, .home-v12 .v11-label { color: #9aa5c9; font-size: 9px; letter-spacing: .22em; }
.home-v12 .v11-hero h1 { margin-block: 20px; font: 400 clamp(44px, 6vw, 66px)/1.17 var(--v12-display); letter-spacing: -.055em; text-shadow: 0 2px 22px #000; }
.home-v12 .v11-hero h1 em { color: var(--v12-pearl); font-family: var(--v12-reading); font-weight: 700; }
.home-v12 .v11-hero-quote { color: #e1dfdb; font-family: var(--v12-reading); }
.home-v12 .v11-hero-desc { color: #929398; }
.home-v12 .v11-button { min-height: 52px; border-color: var(--v12-line-strong); border-radius: 2px; background: rgba(9, 10, 12, .88); }
.home-v12 .v11-button.primary { border-color: var(--v12-red); background: var(--v12-red); }
.home-v12 .v11-hero-mark {
  width: 76px;
  height: 76px;
  border-color: rgba(255,255,255,.5);
  color: #11131a;
  background:
    radial-gradient(circle at 36% 31%, rgba(255,255,255,.92), transparent 17%),
    conic-gradient(from 35deg, #e5d7df, #a9c8cf, #dad5aa, #bba9c9, #e5d7df);
  box-shadow: 0 0 40px rgba(192, 201, 220, .16);
  font-family: var(--v12-display);
}

.home-v12 .v11-section { position: relative; overflow: hidden; overflow: clip; padding: 108px 0; }
.home-v12 .v11-section.alt { border-color: var(--v12-line); background: rgba(10, 11, 13, .78); }
.home-v12 .v11-section-head { max-width: 680px; margin-bottom: 45px; }
.home-v12 .v11-section-head.center { margin-inline: 0; text-align: left; }
.home-v12 .v11-section-head.center > p:last-child { margin-inline: 0; }
.home-v12 .v11-section-head h2 { margin-top: 15px; font: 400 clamp(34px, 5vw, 52px)/1.24 var(--v12-display); letter-spacing: -.045em; }
.home-v12 .v11-section-head > p:last-child { color: #8d8f95; }

.home-v12 #core::after,
.home-v12 #why::after,
.home-v12 #access::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 290px;
  height: 290px;
  border-radius: 50%;
  opacity: .13;
  background: conic-gradient(from 25deg, #a9c6ce, #d4c4d2, #c5c891, #9aaed4, #a9c6ce);
  filter: blur(.2px);
}
.home-v12 #core::after { right: -170px; top: 70px; }
.home-v12 #why::after { left: -190px; top: 120px; }
.home-v12 #access::after { right: -170px; bottom: 60px; }

.home-v12 .v11-story-grid { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--v12-line-strong); }
.home-v12 .v11-story-card {
  min-height: 200px;
  grid-template-columns: 230px 1fr;
  gap: 34px;
  padding: 22px 0;
  border: 0;
  border-bottom: 1px solid var(--v12-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.home-v12 .v11-story-card:nth-child(even) { grid-template-columns: 1fr 230px; }
.home-v12 .v11-story-card:nth-child(even) img { grid-column: 2; grid-row: 1; }
.home-v12 .v11-story-card:nth-child(even) div { grid-column: 1; grid-row: 1; text-align: right; }
.home-v12 .v11-story-card img { width: 230px; height: 154px; border-radius: 1px; object-fit: cover; filter: saturate(.7) contrast(1.1) brightness(.76); box-shadow: 0 18px 45px rgba(0,0,0,.38); }
.home-v12 .v11-story-card h3 { font: 700 22px/1.42 var(--v12-reading); }
.home-v12 .v11-story-card p { font-size: 12px; line-height: 1.75; }

.home-v12 .v11-service-wrap { padding-bottom: 110px; }
.home-v12 .v11-service-panel { gap: 1px; padding: 1px; border-color: var(--v12-line-strong); border-radius: 2px; background: var(--v12-line); box-shadow: 0 30px 70px rgba(0,0,0,.4); }
.home-v12 .v11-service-item { gap: 13px; min-height: 156px; padding: 18px 7px; border-radius: 0; background: #0c0d10; }
.home-v12 .v11-service-item:hover, .home-v12 .v11-service-item:focus-visible { border-color: transparent; background: #15171c; }
.home-v12 .v11-service-item img { width: 100%; height: 92px; border-radius: 0; filter: grayscale(.14) saturate(.72) contrast(1.12) brightness(.78); box-shadow: none; }
.home-v12 .v11-service-item span { font-family: var(--v12-reading); font-size: 11px; }
.home-v12 .v11-resume { border-radius: 1px; }

.home-v12 .v11-process { grid-template-columns: 1fr; border-color: var(--v12-line-strong); border-radius: 1px; background: transparent; }
.home-v12 .v11-step { min-height: 145px; grid-template-columns: 96px 1fr; padding: 28px; border-right: 0; border-bottom: 1px solid var(--v12-line); }
.home-v12 .v11-step:last-child { border-bottom: 0; }
.home-v12 .v11-step-no { width: auto; height: auto; border: 0; border-radius: 0; color: rgba(216,212,207,.28); background: none; font: 400 52px/1 var(--v12-display); }
.home-v12 .v11-step b { font: 700 19px/1.4 var(--v12-reading); }
.home-v12 .v11-step span:last-child { font-size: 11px; }

.home-v12 .v11-benefit-grid { grid-template-columns: 1fr; gap: 16px; }
.home-v12 .v11-benefit { min-height: 185px; display: grid; grid-template-columns: 180px 1fr; gap: 30px; align-items: center; padding: 0; border-color: var(--v12-line); border-radius: 1px; background: #0c0d10; overflow: hidden; }
.home-v12 .v11-benefit:nth-child(even) { grid-template-columns: 1fr 180px; }
.home-v12 .v11-benefit:nth-child(even) img { grid-column: 2; grid-row: 1; }
.home-v12 .v11-benefit:nth-child(even) div { grid-column: 1; grid-row: 1; padding-left: 28px; }
.home-v12 .v11-benefit img { width: 180px; height: 185px; border-radius: 0; object-fit: cover; filter: saturate(.65) brightness(.72); }
.home-v12 .v11-benefit h3 { margin: 0 28px 9px 0; font: 700 20px/1.4 var(--v12-reading); }
.home-v12 .v11-benefit p { margin-right: 28px; }

.home-v12 .v11-preview { background: #070708; }
.home-v12 .v11-preview::before { content: "解 讀"; position: absolute; right: 4vw; top: 55px; color: rgba(255,255,255,.045); font: 400 120px/1 var(--v12-display); letter-spacing: .15em; }
.home-v12 .v11-preview-grid { grid-template-columns: 1fr; gap: 12px; }
.home-v12 .v11-preview-card { min-height: 230px; padding: 31px; border-color: var(--v12-line); border-radius: 1px; background: linear-gradient(110deg, #111216, #08090b); }
.home-v12 .v11-preview-card h3 { max-width: 620px; font: 700 23px/1.6 var(--v12-reading); }
.home-v12 .v11-preview-chip { border-radius: 1px; color: var(--v12-pearl); background: rgba(255,255,255,.07); }

.home-v12 .v11-products-section { padding: 108px 0; color: #f1eee9; background: linear-gradient(135deg, #111216, #070708 64%); border-block: 1px solid var(--v12-line); }
.home-v12 .v11-products-section .v11-label { color: #9aa5c9; }
.home-v12 .v11-products-section .v11-section-head > p:last-child { color: #8d8f95; }
.home-v12 .v11-products-head > span { border-radius: 1px; color: #d8d4cf; background: rgba(255,255,255,.07); }
.home-v12 .v11-arrow { border-color: var(--v12-line-strong); border-radius: 1px; color: #e7e3de; background: #111216; }
.home-v12 .v11-product-track { gap: 10px; }
.home-v12 .v11-product-card {
  flex-basis: 292px;
  min-height: 390px;
  padding: 160px 25px 25px;
  overflow: hidden;
  border-color: var(--v12-line);
  border-radius: 1px;
  color: #efebe6;
  background: #0e0f12;
  box-shadow: 0 20px 50px rgba(0,0,0,.34);
}
.home-v12 .v11-product-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 134px;
  background-position: center;
  background-size: cover;
  filter: grayscale(.18) saturate(.75) contrast(1.12) brightness(.72);
}
.home-v12 .v11-product-card:nth-child(1)::before { background-image: linear-gradient(0deg, rgba(5,5,6,.38), transparent), url('/media/v7-destiny-compass.webp'); }
.home-v12 .v11-product-card:nth-child(2)::before { background-image: linear-gradient(0deg, rgba(5,5,6,.38), transparent), url('/media/baegun-sansin-celestial-poster-v4.webp'); }
.home-v12 .v11-product-card:nth-child(3)::before { background-image: linear-gradient(0deg, rgba(5,5,6,.38), transparent), url('/media/v7-fate-bell.webp'); }
.home-v12 .v11-product-card:nth-child(4)::before { background-image: linear-gradient(0deg, rgba(5,5,6,.38), transparent), url('/media/v7-zodiac-ring.webp'); }
.home-v12 .v11-product-card:nth-child(5)::before { background-image: linear-gradient(0deg, rgba(5,5,6,.38), transparent), url('/media/v7-red-thread.webp'); }
.home-v12 .v11-product-card:nth-child(6)::before { background-image: linear-gradient(0deg, rgba(5,5,6,.38), transparent), url('/media/v7-mountain-gate.webp'); }
.home-v12 .v11-product-card.best { border-color: rgba(152,46,42,.68); box-shadow: 0 20px 50px rgba(0,0,0,.36); }
.home-v12 .v11-product-card.best::after { top: 14px; right: 14px; z-index: 1; padding: 5px 7px; color: white; background: var(--v12-red); }
.home-v12 .v11-product-badge { border-radius: 1px; color: #c3cadf; background: rgba(154,165,201,.1); }
.home-v12 .v11-product-card h3 { font: 700 22px/1.3 var(--v12-reading); }
.home-v12 .v11-product-card p { color: #96989f; }
.home-v12 .v11-product-card del { color: #71747b; }
.home-v12 .v11-product-card strong { color: #c95a54; }
.home-v12 .v11-product-card small { color: #7e8188; }

.home-v12 .v11-access-grid { gap: 1px; padding: 1px; background: var(--v12-line); }
.home-v12 .v11-access-card { border: 0; border-radius: 0; background: #0d0e11; }
.home-v12 .v11-access-card.featured { background: linear-gradient(145deg, #1b1214, #0d0e11); }
.home-v12 .v11-access-card h3 { font-family: var(--v12-reading); }
.home-v12 .v11-access-card strong { color: var(--v12-pearl); }

.home-v12 .v11-faq-grid { grid-template-columns: 1fr; gap: 42px; }
.home-v12 .v11-faq-intro { position: static; }
.home-v12 .v11-faq-intro h2 { font: 400 clamp(36px, 5vw, 50px)/1.28 var(--v12-display); }
.home-v12 .v11-faq-list summary { font-family: var(--v12-reading); }

.home-v12 .v11-final-visual { width: min(800px, 100%); height: 420px; margin: 0 auto; border: 1px solid var(--v12-line); }
.home-v12 .v11-final-visual img { filter: grayscale(.12) saturate(.7) contrast(1.1) brightness(.65); }
.home-v12 .v11-final { background: #050506; }
.home-v12 .v11-final h2 { font-family: var(--v12-display); font-weight: 400; }
.home-v12 .v11-footer { border-color: var(--v12-line); }
.home-v12 .v11-bottom-bar { border-color: var(--v12-line); background: rgba(6,6,7,.98); }
.home-v12 .v11-bottom-bar a { border-radius: 1px; }
.home-v12 .v11-bottom-bar img { border-radius: 1px; filter: saturate(.55) brightness(.72); }
.home-v12 .v11-bottom-bar a.start { background: var(--v12-blue); }

@media (max-width: 800px) {
  .home-v12 .v11-header { height: 60px; }
  .home-v12 .v11-nav { top: 60px; }
  .home-v12 .v11-nav-inner { justify-content: flex-start; }
  .home-v12 .v11-hero-card { min-height: 670px; }
  .home-v12 .v11-hero-card::before { background: linear-gradient(180deg, rgba(5,5,6,.06), rgba(5,5,6,.25) 38%, rgba(5,5,6,.95) 68%, #050506); }
  .home-v12 .v11-hero-image { object-position: 77% 44%; }
  .home-v12 .v11-hero-copy { width: 100%; min-height: 670px; padding: 34px 22px; }
  .home-v12 .v11-hero h1 { font-size: clamp(39px, 11.7vw, 52px); }
  .home-v12 .v11-hero-card::after { display: none; }
  .home-v12 .v11-section { padding: 82px 0; }
  .home-v12 .v11-section-head h2 { font-size: 36px; }
  .home-v12 .v11-story-card,
  .home-v12 .v11-story-card:nth-child(even) { min-height: 0; grid-template-columns: 105px 1fr; gap: 17px; padding: 18px 0; }
  .home-v12 .v11-story-card:nth-child(even) img { grid-column: 1; grid-row: 1; }
  .home-v12 .v11-story-card:nth-child(even) div { grid-column: 2; grid-row: 1; text-align: left; }
  .home-v12 .v11-story-card img { width: 105px; height: 116px; }
  .home-v12 .v11-story-card h3 { font-size: 16px; }
  .home-v12 .v11-story-card p { font-size: 10px; }
  .home-v12 .v11-service-item { min-height: 128px; padding-inline: 4px; }
  .home-v12 .v11-service-item img { height: 72px; }
  .home-v12 .v11-step { grid-template-columns: 73px 1fr; padding: 23px 18px; }
  .home-v12 .v11-step-no { font-size: 42px; }
  .home-v12 .v11-benefit,
  .home-v12 .v11-benefit:nth-child(even) { min-height: 145px; grid-template-columns: 110px 1fr; gap: 18px; }
  .home-v12 .v11-benefit:nth-child(even) img { grid-column: 1; grid-row: 1; }
  .home-v12 .v11-benefit:nth-child(even) div { grid-column: 2; grid-row: 1; padding-left: 0; }
  .home-v12 .v11-benefit img { width: 110px; height: 145px; }
  .home-v12 .v11-benefit h3 { margin-right: 17px; font-size: 16px; }
  .home-v12 .v11-benefit p { margin-right: 17px; font-size: 10px; }
  .home-v12 .v11-preview::before { right: -28px; font-size: 72px; }
  .home-v12 .v11-preview-card { padding: 24px; }
  .home-v12 .v11-preview-card h3 { font-size: 19px; }
  .home-v12 .v11-products-section { padding: 82px 0; }
  .home-v12 .v11-product-card { flex-basis: 82vw; max-width: 300px; }
  .home-v12 .v11-final-visual { height: 280px; }
}

@media (max-width: 390px) {
  .home-v12 .v11-brand strong { font-size: 14px; }
  .home-v12 .v11-service-item { min-height: 118px; }
  .home-v12 .v11-service-item img { height: 66px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-v12 .v11-hero-image { animation: none !important; transform: none !important; }
}