/* 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.hk-brief { background: #FEE500; border-color: #FEE500; color: #191919; }
.hk-go.hk-brief:hover, .hk-go.hk-brief: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.hk-brief { 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.hk-brief { 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; } }

/* OWNER 2026-11-06: "모션을 좀 줘야 하지 않나, 글자체도 마음에 안 든다" → 명조 대신 굵은 고딕(사이트 기본 서체), 글자 하나씩 떠오름 + 핵심어 빛 훑기 + 천천히 움직이는 빛 + 바로가기 차례로 등장 */
.hk-l { font-family: var(--f); font-weight: 800; letter-spacing: -.045em; line-height: 1.14; }
.hk-in { transform: none; transition: none; }
.hk-c { display: inline-block; opacity: 0; transform: translateY(.22em);
  transition: opacity 1.5s cubic-bezier(.25,.6,.3,1) calc(var(--i) * .55s + var(--c) * .03s + .2s), transform 1.7s cubic-bezier(.22,.61,.36,1) calc(var(--i) * .55s + var(--c) * .03s + .2s); }
.hk.in .hk-c { opacity: 1; transform: none; }
.hk-key .hk-c { transition: opacity 1.5s cubic-bezier(.25,.6,.3,1) calc(var(--i) * .55s + var(--c) * .03s + .2s), transform 1.7s cubic-bezier(.22,.61,.36,1) calc(var(--i) * .55s + var(--c) * .03s + .2s), color 1.8s ease calc(var(--i) * .55s + var(--c) * .03s + 1.4s); }
.hk.in .hk-key .hk-c { color: #e9bd8a; }
/* 물방울 → 파동: 색이 든 장면에서 멈춰 있다가, 물방울이 떨어지면 글자들이 물결처럼 출렁인다 */
.hk-drop { position: absolute; z-index: 0; width: 10px; height: 14px; margin: -7px 0 0 -5px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: linear-gradient(#fff, #e9bd8a); opacity: 0; pointer-events: none; }
.hk-ring { position: absolute; z-index: 0; width: 12px; height: 12px; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid rgba(233,189,138,.55); box-shadow: 0 0 40px rgba(233,189,138,.18), inset 0 0 40px rgba(233,189,138,.1); opacity: 0; pointer-events: none; }
.hk.still .hk-drop, .hk.still .hk-ring { display: none; }
.hk.off .hk-key .hk-c { animation-play-state: paused; }
.hk-glow { position: absolute; z-index: 0; right: -10%; top: 5%; width: min(70vw, 900px); aspect-ratio: 1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(227,168,102,.22), rgba(227,168,102,0) 70%); opacity: 0; animation: hkGlow 14s ease-in-out infinite alternate; }
.hk.in .hk-glow { opacity: 1; transition: opacity 2s ease 1s; }
@keyframes hkGlow { from { transform: translate(0, 0) scale(.9); } to { transform: translate(-14%, 18%) scale(1.15); } }
.hk.off .hk-glow { animation-play-state: paused; }
.hk-go { opacity: 0; transform: translateY(14px); transition: opacity .7s ease calc(var(--k, 0) * .08s + 1.6s), transform .8s cubic-bezier(.16,.84,.24,1) calc(var(--k, 0) * .08s + 1.6s), background .25s, color .25s, border-color .25s; }
.hk.in .hk-go { opacity: 1; transform: none; }
.hk.in .hk-go:hover, .hk.in .hk-go:focus-visible { transition-delay: 0s; }
.hk.still .hk-c, .hk.still .hk-go { opacity: 1; transform: none; filter: none; transition: none; animation: none; }
.hk.still .hk-glow { animation: none; opacity: .7; }
@media (prefers-reduced-motion: reduce) { .hk-c, .hk-go { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; animation: none !important; } .hk-glow { animation: none !important; opacity: .7; } }
.hk-water { position: absolute; z-index: 0; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); }
.hk.still .hk-water { display: none; }
.hk-ring { display: none; }