/* 홈 맨 앞의 입구: 영상 끝의 폰 화면이 그대로 커져서 명함이 된다. 기존 홈은 이 아래에 그대로 있다. */
.ent { --ent-gold: #e9c67a; --ent-foil: linear-gradient(100deg, #c9a04e 0%, #fbe9b6 38%, #d7b062 66%, #fff0c6 100%); position: relative; z-index: 30; isolation: isolate; min-height: 100vh; min-height: 100dvh; overflow: hidden; background: #070509; color: #f8f2e4; font-family: 'Noto Sans KR', system-ui, sans-serif; }

.ent-film, .ent-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; z-index: -2; }
.ent-still { opacity: 0; transition: opacity 2.4s ease; }
.ent.still .ent-still { opacity: 1; }
.ent::after { content: ''; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(to bottom, transparent, rgba(7,5,9,.74) 46%, rgba(7,5,9,.95) 74%, #07050d); pointer-events: none; z-index: -1; opacity: 0; transition: opacity 1.8s ease; }
.ent.met::after { opacity: 1; }

.ent-top { position: absolute; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: calc(16px + env(safe-area-inset-top, 0px)) clamp(16px, 4vw, 40px) 22px; background: linear-gradient(to bottom, rgba(7,5,9,.72), transparent); }
.ent-logo { display: inline-flex; align-items: center; gap: 9px; font: 800 12.5px 'Montserrat', sans-serif; letter-spacing: .22em; color: #f8f2e4; }
.ent-logo img { width: 24px; height: 24px; border-radius: 7px; }
.ent-login { font-size: 13px; color: #f8f2e4; padding: 8px 2px; }

/* 슬로건: 영화 끝에 뜨는 타이틀처럼 한 줄씩 */
/* 영상이 끝나면 폰 화면 자리에서 명함이 커져 나오고, 뒤 장면은 어둠으로 가라앉는다 */
.ent-film, .ent-still { transition: opacity 1.2s ease; }
.ent.touch .ent-still { opacity: 1; }
.ent-black { position: absolute; inset: 0; z-index: -1; background: #050406; opacity: 0; pointer-events: none; transition: opacity .9s ease-in-out; }
.ent.met .ent-black { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .ent-still { transform-origin: 60% 62%; }
  .ent.touch .ent-still { animation: ent-push 7s ease-out both; }
}
@keyframes ent-push { from { scale: 1; } to { scale: 1.08; } }

.ent-end { position: absolute; inset: 0; padding: calc(64px + env(safe-area-inset-top, 0px)) 16px max(26px, env(safe-area-inset-bottom, 0px)); display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: 18px; text-align: center; pointer-events: none; }
.ent-copy { display: grid; justify-items: center; width: min(500px, 100%); }

/* 명함: 실제 툼카드 앞면. 폰을 움직이면 그 각도로 기운다 */
.ent-stage { height: 100%; max-height: 430px; aspect-ratio: 555 / 890; perspective: 1300px; visibility: hidden; pointer-events: auto; user-select: none; -webkit-user-select: none; }
.ent.met .ent-stage { visibility: visible; }
.ent-fly, .ent-card { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.ent-card { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.ent-face { position: absolute; inset: 0; border-radius: 22px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #0d0b0e center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(233,198,122,.4), 0 34px 90px rgba(0,0,0,.75), 0 0 80px rgba(233,198,122,.16); }
.ent-face.front { background-image: url(/assets/w/toomcard_front_plate.webp); }
.ent-sheen { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255,244,214,.26) 50%, transparent 62%); translate: -130% 0; pointer-events: none; }
.ent-face.front::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 50% at var(--sx, 30%) var(--sy, 20%), rgba(255,244,214,.3), transparent 70%); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .ent.met .ent-fly { animation: ent-fly 1s cubic-bezier(.3,0,.1,1) both; }
  .ent.met .ent-sheen { animation: ent-sheen 1.4s ease-in-out .8s both; }
}
@keyframes ent-fly { from { opacity: 0; transform: translate(var(--fx, 0), var(--fy, 0)) rotate(var(--fr, 6deg)) scale(var(--fs, .4)); } 8% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes ent-sheen { from { translate: -130% 0; } to { translate: 130% 0; } }
.ent-hook { margin: 0; font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif; font-weight: 600; font-size: clamp(28px, 7.6vw, 46px); line-height: 1.32; letter-spacing: -.02em; word-break: keep-all; text-shadow: 0 2px 22px #000; }
.ent-hook span { display: block; opacity: 0; transition: opacity 1.2s ease-in-out; }
.ent-hook .l2 { font-weight: 700; background: var(--ent-foil); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 2px 14px rgba(0,0,0,.85)); }
.ent-mark { display: flex; align-items: center; gap: 14px; margin-top: 20px; font: 600 13px 'Montserrat', sans-serif; letter-spacing: .42em; padding-left: .42em; color: #f8f2e4; opacity: 0; transition: opacity 1.2s ease; }
.ent-mark::before, .ent-mark::after { content: ''; width: 34px; height: 1px; background: var(--ent-gold); opacity: .7; }
.ent-motto { margin-top: 7px; font: 500 12px 'Montserrat', sans-serif; letter-spacing: .1em; color: var(--ent-gold); opacity: 0; transition: opacity 1.2s ease; }
.ent-make { margin-top: 22px; display: inline-block; padding: 16px 46px; border-radius: 999px; font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif; letter-spacing: 0; background: var(--ent-foil); color: #1a1205; font-size: 15px; font-weight: 700; white-space: nowrap; opacity: 0; translate: 0 10px; pointer-events: none; transition: opacity 1s ease, translate 1s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1); }
.ent-make:hover { transform: translateY(-1px); }
.ent-make:active { transform: scale(.98); }
.ent-make:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ent.met .ent-hook span { opacity: 1; }
.ent.met .ent-hook .l1 { transition-delay: .9s; }
.ent.met .ent-hook .l2 { transition-delay: 1.4s; }
.ent.met .ent-mark, .ent.met .ent-motto { opacity: 1; transition-delay: 2s; }
.ent.met .ent-make { opacity: 1; translate: 0 0; pointer-events: auto; transition-delay: 2.5s, 2.5s, 0s; }

/* 움직임을 줄인 기기와 다시 온 사람은 바로 마지막 화면으로 */
.ent.now *, .ent.now::after { transition-duration: .01s !important; transition-delay: 0s !important; animation: none !important; }

/* 가로 화면: 끝나면 명함은 왼쪽, 글은 오른쪽 */
@media (min-aspect-ratio: 1/1) {
  .ent-end { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); padding-left: 6vw; padding-right: 6vw; }
  .ent-stage { justify-self: end; max-height: 560px; }
  .ent-copy { justify-self: start; justify-items: start; text-align: left; }
  .ent-hook { font-size: clamp(34px, 3.7vw, 54px); }
  .ent-mark { padding-left: 0; }
  .ent-mark::before { display: none; }
}

/* 기존 홈을 입구의 격에 맞춘다. 지운 것은 없고 여기서 가렸을 뿐이라, 이 묶음을 빼면 예전 모습으로 돌아간다. */
.aurora, .grain, .progress, .starband, .rail2, .all, .tags2, .thud, .o-ring, .o-glow, #spark, .o-chip, .o-hint, .kick i, .spill, .spstrip, .pnav a[href="/friends"] { display: none !important; }
#grid a[href*="friend="], #grid a[href*="preset=bear"], #grid a[href*="preset=dream"], #grid a[href*="preset=taekwon"], #grid a[href*="preset=dancheong"] { display: none !important; }
.pnav a { font-size: 0; }
.pnav a span { font-size: 13px; }
.bar { background: rgba(7,5,9,.86); border-bottom-color: rgba(233,198,122,.16); }
.bar .logo { font: 800 15px 'Montserrat', sans-serif; letter-spacing: .14em; }
.bar .cta { background: transparent; color: #e9c67a; border: 1px solid rgba(233,198,122,.55); font-weight: 400; }
.bar .mine, .bar .mlogin { font-weight: 300; }
.section h2, .stp h2, .real-h b, .ttext h3 { font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif !important; font-weight: 700 !important; letter-spacing: -.02em; }
.section .sub, .stp p, .real-h span, .ttext p { font-weight: 300; }
.stp .no { background: none !important; color: #e9c67a !important; padding: 0 !important; border: 0 !important; font: 600 12px 'Montserrat', sans-serif; letter-spacing: .18em; box-shadow: none !important; }
.chip { font-weight: 300; background: transparent; }
.chip[aria-pressed="true"] { background: transparent !important; color: #e9c67a !important; border-color: #e9c67a !important; }
.tab.on { color: #e9c67a; }
.final a, .ctas .big, .tcta, .all-go { background: linear-gradient(100deg, #c9a04e 0%, #fbe9b6 38%, #d7b062 66%, #fff0c6 100%) !important; color: #1a1205 !important; font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif; font-weight: 700 !important; box-shadow: none !important; }
.hero2 h1 { font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif !important; font-weight: 700 !important; letter-spacing: -.025em; }
.hero2 h1 em { font-style: normal; background: var(--ent-foil, linear-gradient(100deg, #c9a04e, #fbe9b6 38%, #d7b062 66%, #fff0c6)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero2 p { font-weight: 300; }
.kick { color: #e9c67a !important; font-weight: 600 !important; letter-spacing: .18em; }
.kpi b { font-family: 'Montserrat', 'Pretendard Variable', sans-serif !important; font-weight: 600 !important; color: #e9c67a !important; background: none !important; -webkit-text-fill-color: #e9c67a; }
.kpi span { font-weight: 300; }
.o-card { width: 46%; }

/* 사파리는 다단(columns) 안의 둥근 카드를 잘라 먹는다. 같은 비율의 카드들이라 그리드로 바꾼다 */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; columns: auto; }
.grid.wk { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; columns: auto; }
.grid > .stile, .grid > .tile { margin-bottom: 0; }
@media (min-width: 760px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; columns: auto; } .grid.wk { grid-template-columns: repeat(3, minmax(0, 1fr)); columns: auto; } }

/* 쓰임새: 왜 만드는지부터 보여 준다 */
.uses { width: calc(100% - 32px); max-width: 1048px; margin: 44px auto 0; }
.uses h2 { margin: 0 0 16px; font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif; font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -.02em; text-align: center; }
.use-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.use { display: grid; gap: 4px; padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(233,198,122,.26); background: rgba(255,255,255,.03); transition: border-color .2s ease, transform .2s ease; }
.use:hover { border-color: #e9c67a; transform: translateY(-1px); }
.use b { font-size: 16.5px; font-weight: 700; color: #e9c67a; }
.use span { font-size: 13.5px; font-weight: 300; color: rgba(255,255,255,.72); line-height: 1.5; }
@media (min-width: 760px) { .use-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 어디에 쓰나: 폰 안에서 대화가 저절로 오가고, 왼쪽 제목과 함께 다음 쓰임새로 넘어간다 */
.try { width: calc(100% - 32px); max-width: 1048px; margin: 56px auto 0; display: grid; gap: 26px; justify-items: center; font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif; }
.try-me { display: grid; gap: 16px; width: min(440px, 100%); min-width: 0; }
.try h2 { position: relative; margin: 0; min-height: 2.5em; display: grid; align-items: end; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.25; font-weight: 700; letter-spacing: -.025em; color: #f8f2e4; word-break: keep-all; }
.try-line { grid-area: 1 / 1; opacity: 0; transition: opacity .5s ease; }
.try-line.on { opacity: 1; }
.try-sub { margin: -8px 0 0; font-size: 15px; font-weight: 300; line-height: 1.5; color: rgba(255,255,255,.72); word-break: keep-all; }
.try-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.try-chip { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(233,198,122,.3); background: transparent; color: rgba(255,255,255,.72); font: inherit; font-size: 13.5px; cursor: pointer; transition: color .2s ease, border-color .2s ease; }
.try-chip.on { color: #e9c67a; border-color: #e9c67a; }
.try-chip:focus-visible, .try-qr:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.try-give { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: stretch; }
.try-card { width: 100%; height: auto; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(233,198,122,.4), 0 18px 46px rgba(0,0,0,.6); }
.try-qr { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px; border-radius: 12px; border: 1px solid rgba(233,198,122,.45); background: rgba(255,255,255,.03); color: #e9c67a; transition: border-color .2s ease; }
.try-qr:hover { border-color: #e9c67a; }
.try-qr b { font-size: 13.5px; font-weight: 600; line-height: 1.4; word-break: keep-all; }
.try-code { flex: none; display: block; padding: 6px; border-radius: 8px; background: #fff; line-height: 0; }
.try-code img, .try-code canvas { display: block; width: 96px; height: 96px; }
.try-mo { display: none; }
.try-phone { width: 230px; aspect-ratio: 9 / 18.6; padding: 8px; border-radius: 36px; background: #17151a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 26px 70px rgba(0,0,0,.7); }
.try-screen { position: relative; height: 100%; border-radius: 29px; overflow: hidden; background: #0e0d11; }
.try-screen::before { content: ''; position: absolute; top: 9px; left: 50%; width: 62px; height: 17px; margin-left: -31px; border-radius: 10px; background: #000; z-index: 2; }
.try-screen small { position: absolute; top: 34px; left: 0; right: 0; text-align: center; font-size: 10.5px; font-weight: 300; color: rgba(255,255,255,.45); }
.try-scene { position: absolute; inset: 54px 10px 14px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; visibility: hidden; }
.try-scene.on { visibility: visible; }
.try-scene .me, .try-scene .you { margin: 0; padding: 8px 11px; max-width: 86%; border-radius: 14px; font-size: 12.5px; line-height: 1.42; word-break: keep-all; }
.try-scene .me { align-self: flex-end; background: linear-gradient(100deg, #d7b062, #fbe9b6); color: #1a1205; border-bottom-right-radius: 4px; }
.try-scene .you { align-self: flex-start; background: #26242b; color: #f8f2e4; border-bottom-left-radius: 4px; }
.try-scene .got { align-self: flex-end; width: 44%; }
.try-scene .got img { display: block; width: 100%; height: auto; border-radius: 8px; }
.try-scene > * { opacity: 0; translate: 0 10px; }
.try.play .try-scene.on > * { opacity: 1; translate: 0 0; transition: opacity .45s ease, translate .45s cubic-bezier(.16,1,.3,1); }
.try.play .try-scene.on .got { transition-delay: .9s; }
.try.play .try-scene.on .you { transition-delay: 2.3s; }
@media (max-width: 759px) {
  .try h2 { min-height: 1.25em; }
  .try-give { grid-template-columns: minmax(0, 1fr); }
  .try-card { display: none; }
  .try-phone { width: 214px; }
}
@media (min-width: 760px) {
  .try { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 7vw, 96px); align-items: center; justify-content: center; margin-top: 84px; }
  .try-me { justify-self: end; }
  .try-give { grid-template-columns: 132px minmax(0, 1fr); }
  .try-phone { width: 270px; }
  .try-scene { gap: 10px; }
  .try-scene .me, .try-scene .you { font-size: 14px; padding: 10px 13px; }
  .try-scene .got { width: 54%; }
}
@media (hover: none) {
  .try-code, .try-pc { display: none; }
  .try-mo { display: block; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .try * { transition-duration: .01s !important; transition-delay: 0s !important; } }

/* 답장 뒤: 대화 속 명함이 뒤집히며 커져서 뒷면이 폰을 채운다 */
.try-screen { perspective: 900px; }
.try-flip { position: absolute; inset: 0; z-index: 1; display: block; visibility: hidden; font-size: 11px; color: #f8f2e4; transform-style: preserve-3d; transform: translate(var(--x, 0), var(--y, 0)) scale(var(--a, .4), var(--b, .3)) rotateY(0deg); }
.try-flip.shown { visibility: visible; }
.try-flip.flipped { transform: translate(0, 0) scale(1, 1) rotateY(180deg); transition: transform 1.2s cubic-bezier(.45,0,.15,1); }
.try-side { position: absolute; inset: 0; display: block; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.try-front img { display: block; width: 100%; height: 100%; }
.try-back { transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: flex-end; gap: .45em; padding: 3.6em 1.2em 1.2em; background: radial-gradient(90% 50% at 50% 26%, #24242e, #111118 75%); }
.try-back .tb-logo { align-self: center; width: 42%; height: auto; margin-bottom: auto; margin-top: auto; border-radius: 16%; box-shadow: 0 0 0 1px rgba(233,198,122,.45), 0 0 34px rgba(233,198,122,.22); }
.try-back strong { font: 800 1.7em 'Montserrat', sans-serif; letter-spacing: .03em; }
.try-back em { font-style: normal; font-size: .95em; font-weight: 600; line-height: 1.35; color: #e9c67a; word-break: keep-all; }
.try-back .tb-role { font-size: 1em; font-weight: 600; color: #e9c67a; }
.try-back .tb-line { font-size: 1em; line-height: 1.45; }
.try-back .tb-btns, .try-back .tb-bar { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; margin-top: .3em; }
.try-back i { font-style: normal; padding: .8em .3em; border-radius: .8em; text-align: center; font-size: .95em; font-weight: 600; white-space: nowrap; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.try-back .tb-bar i { color: #ffd978; box-shadow: inset 0 0 0 1px rgba(255,217,120,.6); }
.try-back .tb-bar i.on { background: #ffd978; color: #1a1205; }
@media (min-width: 760px) { .try-flip { font-size: 13.5px; } }

/* 필수 여섯 가지: 불편 한 줄, 답 한 줄, 그리고 움직이는 작은 화면. 내 명함 관리의 실제 항목만 예시로 보여 준다 */
.ess { width: calc(100% - 32px); max-width: 1048px; margin: 72px auto 0; display: grid; gap: 16px; font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif; }
.ess h2 { margin: 0 0 8px; font-size: clamp(26px, 3.8vw, 40px); line-height: 1.25; font-weight: 700; letter-spacing: -.02em; color: #f8f2e4; word-break: keep-all; }
.ess-row { display: grid; gap: 22px; align-items: center; padding: 26px 20px; border-radius: 22px; border: 1px solid rgba(255,255,255,.08); background: #111014; }
.ess-t { display: grid; gap: 8px; min-width: 0; }
.ess-t .no { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.5); }
.ess-t .pain { margin: 0; font-size: 14.5px; font-weight: 600; color: #e9c67a; word-break: keep-all; }
.ess-t h3 { margin: 0; font-size: clamp(24px, 3.1vw, 34px); line-height: 1.28; font-weight: 700; letter-spacing: -.025em; color: #f8f2e4; word-break: keep-all; }
.ess-t .d { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.6; color: rgba(255,255,255,.72); word-break: keep-all; }
.ess-panel { min-width: 0; display: grid; gap: 12px; }
.ess-box, .ess-url { padding: 16px 18px; border-radius: 14px; background: #1d1c21; }
.ess-box { display: grid; gap: 8px; }
.ess-box b { font-size: 16px; font-weight: 700; color: #f8f2e4; }
.ess-box span { font-size: 13.5px; font-weight: 300; color: rgba(255,255,255,.65); }
.ess-url { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14.5px; color: rgba(255,255,255,.72); }
.ess-url > span { min-width: 0; white-space: nowrap; }
.ess-url b { color: #e9c67a; font-weight: 700; }
.ess-url em { font-style: normal; font-size: 13px; font-weight: 700; color: #e9c67a; }
.caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.16em; background: #e9c67a; animation: ess-blink 1s steps(2) infinite; }
@keyframes ess-blink { 50% { opacity: 0; } }
.ess-flip { perspective: 1400px; }
.ess-turn { position: relative; display: grid; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.45,0,.15,1); }
.ess-flip.over .ess-turn { transform: rotateY(180deg); }
.ess-face { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; min-width: 0; padding: 16px; border-radius: 14px; background: #1d1c21; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ess-face.back { transform: rotateY(180deg); gap: 0; padding-block: 10px; }
.ess-fh { display: flex; align-items: baseline; justify-content: space-between; }
.ess-fh b { font-size: 15px; font-weight: 700; color: #f8f2e4; }
.ess-fh small { font-size: 12px; font-weight: 300; color: rgba(255,255,255,.5); }
.bar-row { display: grid; gap: 6px; }
.bar-row i { font-style: normal; font-size: 13px; font-weight: 300; color: rgba(255,255,255,.72); }
.bar-row u { display: block; height: 11px; width: 0; border-radius: 99px; background: linear-gradient(100deg, #c9a04e, #fbe9b6 60%, #d7b062); transition: width 1.1s cubic-bezier(.16,1,.3,1); }
.ess-flip.grow .bar-row u { width: var(--w); }
.bar-row:nth-of-type(3) u { transition-delay: .15s; }
.bar-row:nth-of-type(4) u { transition-delay: .3s; }
.dex { position: absolute; top: 10px; right: 16px; font-size: 12px; font-weight: 300; color: rgba(255,255,255,.5); }
.dkpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding-bottom: 8px; }
.dkpi span { display: grid; gap: 1px; }
.dkpi b { font: 600 20px 'Montserrat', sans-serif; color: #e9c67a; }
.dkpi i { font-style: normal; font-size: 11.5px; font-weight: 300; color: rgba(255,255,255,.6); }
.dline { display: block; width: 100%; height: auto; margin: 2px 0 10px; }
.dttl { font-size: 12.5px; font-weight: 700; color: #f8f2e4; }
.dchips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.dchips span { padding: 5px 9px; border-radius: 99px; background: rgba(233,198,122,.1); font-size: 11.5px; color: rgba(255,255,255,.72); white-space: nowrap; }
.dchips em { font-style: normal; font-weight: 600; color: #f8f2e4; }
.dtime { margin: 9px 0 0; font-size: 12px; color: #e9c67a; }
.ess-steps { display: grid; gap: 8px; }
.ess-steps span { padding: 13px 16px; border-radius: 12px; background: #1d1c21; font-size: 14.5px; font-weight: 500; color: rgba(255,255,255,.4); transition: color .4s ease, box-shadow .4s ease; }
.ess-steps span.lit { color: #e9c67a; box-shadow: inset 0 0 0 1px rgba(233,198,122,.55); }
@media (min-width: 760px) {
  .ess-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; padding: 44px; }
  .ess-row.alt .ess-t { order: 2; }
}
@media (prefers-reduced-motion: reduce) { .caret { animation: none; } .bar-row u, .ess-turn, .ess-steps span { transition-duration: .01s; } }

/* 명함(홈)은 설득까지, 그 아래는 만들기(/designs)에서 처음 온 사람이 보고 간다. 어디서든 시작하기로 이어진다 */
html:not(.is-make) #makeZone { display: none; }
html.is-make .ent, html.is-make .try, html.is-make .ess { display: none; }
.final { display: grid; justify-items: center; gap: 14px; }
.final a.how { background: none !important; color: #e9c67a !important; padding: 6px 12px; font-size: 14px; font-weight: 500 !important; box-shadow: none; }
html.is-make .final a.how { display: none; }

/* 영상 중 건너뛰기, 끝 화면에서 아래로 이어 가기 */
.ent-side { display: inline-flex; align-items: center; gap: 14px; }
.ent-skip { appearance: none; border: 1px solid rgba(248,242,228,.45); border-radius: 999px; background: rgba(7,5,9,.35); color: #f8f2e4; padding: 6px 12px; font: inherit; font-size: 12.5px; cursor: pointer; }
.ent.met .ent-skip, .ent.now .ent-skip { display: none; }
.ent-more { margin-top: 12px; padding: 6px 10px; font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif; font-size: 13.5px; color: var(--ent-gold); opacity: 0; pointer-events: none; transition: opacity 1s ease; }
.ent.met .ent-more { opacity: 1; pointer-events: auto; transition-delay: 3s; }
.try { scroll-margin-top: 90px; }