/* C6 hook band (캠페인 문안) — OWNER 2026-11-05 (latest): "배경을 메인이랑 같은 색, 글씨체 바꾸고 왼쪽 정렬(아까같이),
   바탕에 만족해 웃는 여자 사진이 살짝 나왔다 없어졌다 (무료 사진)".
   Page background shows through; left-aligned Nanum Myeongjo ExtraBold lines rise one by one; a thin underline draws under the key
   words; a free Pexels photo (stock/SOURCE.md) slowly appears and fades on the right, melting into the page.
   (Earlier versions — rainbow letters, black 3D chrome with searchlights — were replaced at the OWNER's request.) */
@font-face { font-family: "HK Myeongjo"; src: url("nanum-myeongjo-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
/* OWNER "아니, 검은 바탕에 살짝 웃는 여자 모습이 보였다가 없어진다" → "메인" meant the black first screen: same colour #04060a */
.hk { position: relative; overflow: hidden; isolation: isolate; background: #04060a; color: #f3eee4;
  padding: clamp(84px, 12vw, 170px) 0 clamp(56px, 8vw, 110px); }

/* the photo: right side, edges dissolved into the page, breathing in and out */
.hk-photo { position: absolute; z-index: 0; top: 0; bottom: 0; right: 0; width: min(60%, 900px); pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, #000 35%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to left, #000 35%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%); mask-composite: intersect; }
.hk-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; opacity: 0; transform: scale(1.04); }
.hk.in .hk-photo img { animation: hkBreath 11s ease-in-out 1.2s infinite; }
@keyframes hkBreath { 0% { opacity: 0; transform: scale(1.04); } 35%, 60% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.02); } }
.hk.off .hk-photo img { animation-play-state: paused; }

/* the lines */
.hk > .wrap { position: relative; z-index: 1; }
.hk-big { display: grid; justify-items: start; text-align: left; gap: clamp(2px, .5vw, 8px); }
.hk-l { margin: 0; overflow: hidden; padding: .06em 0 .12em; font-family: "HK Myeongjo", "Nanum Myeongjo", serif; font-weight: 800; font-size: clamp(36px, 6.6vw, 104px); line-height: 1.12; letter-spacing: -.035em; }
.hk-in { display: inline-block; transform: translateY(105%); transition: transform 1.2s cubic-bezier(.16, .84, .24, 1) calc(var(--i) * .22s + .1s); }
.hk.in .hk-in { transform: none; }
.hk-key { position: relative; font-style: normal; color: #fff; }
.hk-u { position: absolute; left: 0; right: 0; bottom: .02em; height: max(2px, .035em); background: #e3a866; transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) calc(var(--i) * .22s + 1s); }
.hk.in .hk-u { transform: scaleX(1); }

.hk-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: clamp(32px, 4.4vw, 56px); padding-top: 22px; border-top: 1px solid rgba(255,255,255,.16); opacity: 0; transform: translateY(14px); transition: opacity .9s ease 1.3s, transform .9s var(--ease) 1.3s; }
.hk.in .hk-foot { opacity: 1; transform: none; }
.hk-small { margin: 0; max-width: 44ch; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.7; color: rgba(243,238,228,.75); }
.hk-cta { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; background: var(--ink); color: #fff; text-decoration: none; font-size: 16px; font-weight: 600; }
/* shortcuts (OWNER: replace "지금 상담하기" with 6 links) */
.hk-links { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); gap: 8px; }
@media (max-width: 1100px) { .hk-links { grid-template-columns: repeat(3, minmax(0, auto)); } }
.hk-go { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; padding: 0 16px; border: 1px solid rgba(255,255,255,.3); background: rgba(4,6,10,.45); color: #f3eee4; font: inherit; font-size: 15px; text-decoration: none; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .25s, color .25s, border-color .25s; }
.hk-go span { opacity: .7; transition: transform .25s; }
.hk-go:hover, .hk-go:focus-visible { background: #f3eee4; color: #04060a; border-color: #f3eee4; }
.hk-go:hover span, .hk-go:focus-visible span { transform: translateX(3px); opacity: 1; }
.hk-go:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hk-go[data-act="chat-inquiry"] { background: #FEE500; border-color: #FEE500; color: #191919; }
.hk-go[data-act="chat-inquiry"]:hover, .hk-go[data-act="chat-inquiry"]:focus-visible { background: #fff; border-color: #fff; color: #191919; }
@media (max-width: 760px) {
  .hk-links { grid-template-columns: 1fr 1fr; width: 100%; } .hk-go { font-size: 13.5px; padding: 0 10px; gap: 6px; white-space: nowrap; } .hk-go[data-act="chat-inquiry"] { grid-column: 1 / -1; }
  /* phone: the photo sits behind the lines, fainter */
  .hk-photo { width: 100%; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 60%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 60%, transparent 100%); }
  .hk-photo img { object-position: 50% 35%; }
  .hk.in .hk-photo img { animation-name: hkBreathM; }
  @keyframes hkBreathM { 0% { opacity: 0; transform: scale(1.04); } 35%, 60% { opacity: .3; transform: scale(1); } 100% { opacity: 0; transform: scale(1.02); } }
}
@media (min-width: 761px) { .hk-go[data-act="chat-inquiry"] { grid-column: span 2; } }
.hk + #contact { padding-top: clamp(56px, 7vw, 96px) !important; }
/* reduced motion: everything in place, the photo stays faintly visible, nothing loops */
.hk.still .hk-in, .hk.still .hk-u, .hk.still .hk-foot { transition: none; }
.hk.still .hk-photo img { animation: none; opacity: .4; transform: none; }
@media (prefers-reduced-motion: reduce) { .hk-in, .hk-u, .hk-foot { transition: none !important; } .hk-photo img { animation: none !important; opacity: .4; transform: none; } }