/* Full-width landing; existing copy, sections and purchase behavior are retained. */ #kn-app[data-screen="landing"] { --kn-gutter:clamp(24px,5vw,112px); --kn-section-space:clamp(88px,8vw,120px); --kn-detail-space:80px; --kn-item-space:64px; --kn-glass-surface:linear-gradient(135deg,#f5fbffdc 0%,#e6f3ff80 38%,#ffffffa8 64%,#d9edff90 100%); --kn-glass-light:linear-gradient(115deg,transparent 36%,#ffffff08 42%,#ffffffb0 47%,#d1eaff70 49%,#ffffffb8 51%,transparent 57%); } #kn-app[data-screen="landing"] .kn-block { max-width:none; width:100%; margin:0; padding:var(--kn-section-space) var(--kn-gutter); border-bottom:1px solid #e4e9e5; } #kn-app[data-screen="landing"] .kn-scene-intro { position:relative; z-index:2; } #kn-app[data-screen="landing"] .kn-block .kn-eyebrow { font-size:11px; font-weight:650; letter-spacing:.15em; margin-bottom:28px; color:#52655b; } #kn-app[data-screen="landing"] .kn-block h2 { max-width:none; margin:0; font-size:clamp(46px,7.2vw,118px); line-height:1.02; letter-spacing:-.065em; text-wrap:balance; } #kn-app[data-screen="landing"] .kn-section-lead { max-width:620px; font-size:clamp(16px,1.25vw,20px); line-height:1.65; margin:32px 0 0 auto; } #kn-app[data-screen="landing"] .kn-results-showcase { padding-bottom:var(--kn-section-space); } #kn-app[data-screen="landing"] .kn-cards-scene { position:relative; margin:40px calc(-1 * var(--kn-gutter)) 52px; } #kn-app[data-screen="landing"][data-landing-motion="true"] .kn-cards-scene { height:165svh; min-height:1100px; } #kn-app[data-screen="landing"] .kn-cards-scene-stage { padding:0 var(--kn-gutter); } #kn-app[data-screen="landing"][data-landing-motion="true"] .kn-cards-scene-stage { position:sticky; top:0; height:100svh; min-height:680px; display:flex; flex-direction:column; justify-content:center; } #kn-app[data-screen="landing"] .kn-card-gallery[data-enhanced="true"] { margin:0 calc(-.5 * var(--kn-gutter)); } #kn-app[data-screen="landing"] .kn-card-gallery[data-enhanced="true"] .kn-result-cards { height:clamp(590px,calc(100svh - 110px),860px); perspective:1500px; } #kn-app[data-screen="landing"] .kn-card-gallery[data-enhanced="true"] figure { width:clamp(240px,min(28vw,calc((100svh - 180px)/1.777)),440px); top:48%; } #kn-app[data-screen="landing"] .kn-card-face { border-radius:2px; box-shadow:0 35px 70px -20px #17262042; } #kn-app[data-screen="landing"] .kn-card-gallery[data-enhanced="true"] .kn-card-face img { border-radius:2px; } #kn-app[data-screen="landing"] .kn-delivery-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; padding:36px 0; font-size:14px; } #kn-app[data-screen="landing"] .kn-delivery-item { display:flex; flex-direction:column; align-items:flex-start; padding:8px clamp(12px,2vw,28px); border-left:1px solid #d9e0d8; } #kn-app[data-screen="landing"] .kn-delivery-item:first-child { padding-left:0; border-left:0; } #kn-app[data-screen="landing"] .kn-delivery-item:last-child { padding-right:0; } #kn-app[data-screen="landing"] .kn-delivery-item strong { display:flex; align-items:center; gap:12px; height:80px; font-size:clamp(48px,5vw,76px); line-height:1; font-weight:500; letter-spacing:-.065em; color:#243c32; margin-bottom:20px; } #kn-app[data-screen="landing"] .kn-delivery-item .kn-delivery-arrow { font-size:.45em; font-weight:400; color:#809187; letter-spacing:0; } #kn-app[data-screen="landing"] .kn-delivery-item .kn-delivery-saju { font-size:clamp(42px,4.5vw,68px); } #kn-app[data-screen="landing"] .kn-delivery-item>span { font-size:15px; font-weight:500; color:#34493f; line-height:1.4; } #kn-app[data-screen="landing"] .kn-delivery-item small { font-size:12px; color:#728078; margin-top:7px; line-height:1.4; } #kn-app[data-screen="landing"] .kn-delivery-strip[data-reveal="ready"] .kn-delivery-item { opacity:0; transform:translateY(16px); transition:opacity .55s ease,transform .55s ease; transition-delay:calc(var(--kn-item-index,0) * 90ms); } #kn-app[data-screen="landing"] .kn-delivery-strip[data-reveal="shown"] .kn-delivery-item { opacity:1; transform:none; transition:opacity .55s ease,transform .55s ease; transition-delay:calc(var(--kn-item-index,0) * 90ms); } @media(prefers-reduced-motion:reduce) { #kn-app[data-screen="landing"] .kn-delivery-strip[data-reveal] .kn-delivery-item { opacity:1; transform:none; transition:none; } } #kn-app[data-screen="landing"] .kn-result-details { display:block; margin-top:54px; } #kn-app[data-screen="landing"] .kn-result-detail { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); column-gap:8vw; row-gap:14px; padding:var(--kn-detail-space) 0; border:0; border-bottom:1px solid #e4e9e5; border-radius:0; min-height:510px; align-content:center; } #kn-app[data-screen="landing"] .kn-result-detail h3 { grid-column:1; font-size:clamp(38px,4.4vw,72px); font-weight:600; line-height:1.08; letter-spacing:-.055em; max-width:540px; } #kn-app[data-screen="landing"] .kn-result-detail:first-child h3 { grid-column:1 / -1; max-width:none; margin-bottom:20px; } #kn-app[data-screen="landing"] .kn-result-detail p { font-size:17px; margin:0; } #kn-app[data-screen="landing"] .kn-result-detail .kn-sample-name { grid-column:1; grid-row:2 / span 4; font-size:clamp(82px,11vw,180px); font-weight:500; letter-spacing:-.025em; line-height:1.2; align-self:center; margin:0; } #kn-app[data-screen="landing"] .kn-name-typing-frame { display:inline-grid; white-space:nowrap; } #kn-app[data-screen="landing"] .kn-name-typing-frame::before { content:attr(data-name); visibility:hidden; grid-area:1 / 1; } #kn-app[data-screen="landing"] .kn-name-letters { position:relative; display:inline-block; grid-area:1 / 1; justify-self:start; white-space:nowrap; } #kn-app[data-screen="landing"] .kn-name-typing .kn-name-letters::after { content:""; position:absolute; left:100%; top:.16em; width:2px; height:.8em; margin-left:.035em; background:currentColor; animation:kn-name-cursor 600ms step-end infinite; } @keyframes kn-name-cursor { 0%,100% { opacity:1; } 50% { opacity:0; } } @media(prefers-reduced-motion:reduce) { #kn-app[data-screen="landing"] .kn-name-typing .kn-name-letters::after { display:none; } } #kn-app[data-screen="landing"] .kn-result-detail>p:not(.kn-sample-name) { grid-column:2; } #kn-app[data-screen="landing"] .kn-result-detail>p:nth-child(3) { grid-row:2; font-size:24px; } #kn-app[data-screen="landing"] .kn-result-detail>p:nth-child(4) { grid-row:3; font-size:26px; line-height:1.7; } #kn-app[data-screen="landing"] .kn-result-detail:first-child>p:last-child { grid-row:4; } #kn-app[data-screen="landing"] .kn-sample-seal { overflow:clip; } #kn-app[data-screen="landing"] .kn-sample-seal img { grid-column:2; grid-row:1 / span 2; max-width:480px; width:100%; margin:0; mix-blend-mode:multiply; } #kn-app[data-screen="landing"] .kn-sample-seal img.kn-seal-stamped { animation:kn-seal-impact 720ms both; transform-origin:50% 50%; } @keyframes kn-seal-impact { 0% { opacity:0; transform:translateY(-54px) scale(1.65) rotate(-12deg); filter:blur(5px); animation-timing-function:cubic-bezier(.7,0,1,.5); } 38% { opacity:1; transform:translateY(0) scale(.94) rotate(1deg); filter:blur(0); animation-timing-function:ease-out; } 48% { transform:translateY(-7px) scale(1.035) rotate(-1deg); } 58% { transform:translate(3px,2px) scale(.99) rotate(.6deg); } 68% { transform:translate(-2px,0) scale(1.01) rotate(-.4deg); } 82% { transform:translate(1px,0) scale(1) rotate(.2deg); } 100% { opacity:1; transform:translate(0,0) scale(1) rotate(0); filter:blur(0); } } @media(prefers-reduced-motion:reduce) { #kn-app[data-screen="landing"] .kn-sample-seal img.kn-seal-stamped { animation:none; } } #kn-app[data-screen="landing"] .kn-sample-seal>p:not(.kn-sample-name) { grid-column:1; grid-row:2; max-width:460px; margin-top:12px; } #kn-app[data-screen="landing"] .kn-sample-reading>p:not(.kn-sample-name) { grid-column:1; grid-row:auto; max-width:480px; } #kn-app[data-screen="landing"] .kn-sample-reading blockquote { grid-column:2; grid-row:1 / span 3; margin:0; border:0; padding:0; align-self:center; font-size:clamp(26px,2.8vw,46px); line-height:1.35; font-weight:600; letter-spacing:-.035em; color:#375a48; } #kn-app[data-screen="landing"] .kn-result-detail .kn-sample-note { font-size:12px; margin-top:18px; } #kn-app[data-screen="landing"] .kn-results-showcase>.kn-sample-note { max-width:720px; margin:24px 0; } #kn-app[data-screen="landing"] .kn-how { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr); gap:8vw; align-items:start; padding-bottom:var(--kn-section-space); } #kn-app[data-screen="landing"] .kn-process-grid li:last-child { min-height:0; padding-bottom:0; } #kn-app[data-screen="landing"] #kn-use { padding-top:var(--kn-section-space); } #kn-app[data-screen="landing"] .kn-how .kn-scene-intro { position:sticky; top:80px; } #kn-app[data-screen="landing"] .kn-how h2 { font-size:clamp(48px,5.4vw,92px); } #kn-app[data-screen="landing"] .kn-how .kn-section-lead { margin-left:0; max-width:500px; } #kn-app[data-screen="landing"] .kn-process-grid { display:block; margin:0; } #kn-app[data-screen="landing"] .kn-process-grid li { position:relative; min-height:0; padding:var(--kn-item-space) 0; border-top:1px solid #cdd6ce; } #kn-app[data-screen="landing"] .kn-process-step { display:flex; gap:18px; align-items:baseline; margin-bottom:28px; } #kn-app[data-screen="landing"] .kn-process-step b { font-size:clamp(68px,7vw,110px); line-height:1; color:#243c32; letter-spacing:-.07em; font-weight:500; } #kn-app[data-screen="landing"] .kn-process-step>span { font-size:12px; letter-spacing:.1em; } #kn-app[data-screen="landing"] .kn-process-grid h3 { font-size:clamp(30px,3vw,48px); line-height:1.08; letter-spacing:-.04em; } #kn-app[data-screen="landing"] .kn-process-grid p { font-size:16px; line-height:1.75; max-width:550px; } #kn-app[data-screen="landing"] .kn-input-example { padding:8px 28px; font-size:15px; margin-top:32px; } #kn-app[data-screen="landing"] .kn-input-example div { display:grid; grid-template-columns:minmax(90px,.75fr) minmax(0,1.6fr); align-items:baseline; gap:20px; margin:0; padding:20px 0; border-bottom:1px solid #e1e6e2; } #kn-app[data-screen="landing"] .kn-input-example dt { font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:#728078; } #kn-app[data-screen="landing"] .kn-input-example dd { text-align:left; font-size:18px; line-height:1.4; letter-spacing:-.02em; } #kn-app[data-screen="landing"] .kn-input-example div:first-child dd { font-size:26px; font-weight:500; letter-spacing:-.04em; } #kn-app[data-screen="landing"] .kn-input-example div:last-child dd { font-size:15px; } #kn-app[data-screen="landing"] .kn-input-example div:last-child { border-bottom:0; } #kn-app[data-screen="landing"] .kn-process-grid .kn-sample-note { font-size:12px; } #kn-app[data-screen="landing"] .kn-process-name { display:flex; flex-direction:column; align-items:flex-start; min-height:0; margin:32px 0 0; padding:28px; } #kn-app[data-screen="landing"] .kn-process-name>span { font-family:var(--kn-font-reading); font-size:clamp(72px,7vw,112px); font-weight:500; line-height:1.15; letter-spacing:-.04em; } #kn-app[data-screen="landing"] .kn-process-name small { font-size:12px; letter-spacing:.08em; margin:0 0 22px; color:#728078; } #kn-app[data-screen="landing"] .kn-name-options { width:100%; display:grid; gap:10px; } #kn-app[data-screen="landing"] .kn-name-option { position:relative; display:flex; align-items:center; gap:18px; padding:18px 20px; border:1px solid transparent; border-radius:12px; cursor:pointer; transition:background .3s,border-color .3s,box-shadow .3s; } #kn-app[data-screen="landing"] .kn-name-option input { position:absolute; width:1px; height:1px; opacity:0; } #kn-app[data-screen="landing"] .kn-name-option:has(input:checked) { background:linear-gradient(125deg,#ffffffb8,#d9edff80); border-color:#aecde8a0; box-shadow:inset 0 1px 0 #fff,0 7px 18px -12px #487da540; } #kn-app[data-screen="landing"] .kn-name-option:hover { background-color:#ffffff60; } #kn-app[data-screen="landing"] .kn-name-option:has(input:focus-visible) { outline:2px solid #608ab0; outline-offset:3px; } #kn-app[data-screen="landing"] .kn-choice-number { font-size:11px; color:#7b909f; letter-spacing:.08em; } #kn-app[data-screen="landing"] .kn-choice-text { display:flex; flex-direction:column; gap:7px; flex:1; } #kn-app[data-screen="landing"] .kn-choice-text strong { font-family:var(--kn-font-reading); font-size:clamp(32px,3.5vw,48px); font-weight:500; line-height:1.15; letter-spacing:-.04em; } #kn-app[data-screen="landing"] .kn-choice-text small { margin:0; font-size:12px; letter-spacing:.04em; } #kn-app[data-screen="landing"] .kn-choice-check { display:grid; place-items:center; width:24px; height:24px; border:1px solid #a8c1d480; border-radius:50%; font-size:13px; color:transparent; transition:color .3s,background .3s; } #kn-app[data-screen="landing"] .kn-name-option:has(input:checked) .kn-choice-check { background:#6289a9; border-color:#6289a9; color:white; } #kn-app[data-screen="landing"] .kn-choice-summary { width:100%; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; border-top:1px solid #bdd3e350; padding-top:20px; margin-top:20px; font-size:12px; color:#718390; } #kn-app[data-screen="landing"] .kn-choice-summary strong { display:flex; flex-direction:row; align-items:center; gap:8px; margin-left:auto; white-space:nowrap; text-align:right; font-weight:500; color:#344e60; } #kn-app[data-screen="landing"] .kn-choice-hanja { font-size:14px; letter-spacing:.03em; } #kn-app[data-screen="landing"] .kn-choice-gloss::before { content:"— "; color:#8b9eab; } @media(max-width:380px) { #kn-app[data-screen="landing"] .kn-choice-summary>span { display:none; } } @media(max-width:700px) { #kn-app[data-screen="landing"] .kn-name-option { padding:15px 12px; gap:14px; } #kn-app[data-screen="landing"] .kn-choice-text strong { font-size:36px; } } @media(prefers-reduced-motion:reduce) { #kn-app[data-screen="landing"] :is(.kn-name-option,.kn-choice-check) { transition:none; } } #kn-app[data-screen="landing"] .kn-process-meaning { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px 18px; width:100%; margin-top:28px; padding:18px 0 0; border-top:1px solid #dce4df90; font-size:12px; color:#637168; } #kn-app[data-screen="landing"] :is(.kn-input-example,.kn-process-name,.kn-package-card) { position:relative; overflow:hidden; isolation:isolate; border:1px solid #b6d3ec80; border-radius:20px; background:var(--kn-glass-surface); backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2); box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 #ffffffb0,0 16px 36px -20px #4179ac30,0 2px 6px #568bc009; } #kn-app[data-screen="landing"] :is(.kn-input-example,.kn-process-name,.kn-package-card)::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(120deg,#ffffff65 0%,transparent 35%,#ffffff70 40%,transparent 48%); box-shadow:inset 0 2px 1px #ffffffdb,inset 0 -1px 1px #8ebce02b; } #kn-app[data-screen="landing"] :is(.kn-input-example,.kn-process-name,.kn-package-card)::after { content:""; position:absolute; inset:-60% -90%; z-index:0; pointer-events:none; background:var(--kn-glass-light); transform:translateX(-45%); opacity:0; animation:kn-glass-shimmer 7s ease-in-out infinite; } #kn-app[data-screen="landing"] .kn-process-name::after { animation-delay:-3.5s; } #kn-app[data-screen="landing"] .kn-process-name { overflow:clip; } @keyframes kn-glass-shimmer { 0%,12% { transform:translateX(-45%); opacity:0; } 20% { opacity:.65; } 48% { opacity:.85; } 64%,100% { transform:translateX(45%); opacity:0; } } @media(prefers-reduced-motion:reduce) { #kn-app[data-screen="landing"] :is(.kn-input-example,.kn-process-name,.kn-package-card)::after { animation:none; opacity:0; } } #kn-app[data-screen="landing"] :is(.kn-input-example,.kn-process-name,.kn-package-card)>* { position:relative; z-index:1; } #kn-app[data-screen="landing"] .kn-process-pack { --kn-pack-unit:clamp(105px,12vw,160px); position:relative; height:380px; margin:20px 0 0; background:transparent; overflow:clip; isolation:isolate; } #kn-app[data-screen="landing"] .kn-pack-orbit { position:absolute; inset:-28px 0 28px; } #kn-app[data-screen="landing"] .kn-pack-item { --pack-x:0px; --pack-y:0px; --pack-scale:1; --pack-phase:0s; --pack-glint:0s; --kn-glass-shine:.65; position:absolute; width:var(--kn-pack-unit); top:50%; left:50%; transform:translate(calc(-50% + var(--pack-x)),calc(-50% + var(--pack-y))) scale(var(--pack-scale)); padding:8px; border:1px solid #b6d3ec80; border-radius:14px; overflow:hidden; background:var(--kn-glass-surface); backdrop-filter:blur(14px) saturate(1.25); -webkit-backdrop-filter:blur(14px) saturate(1.25); box-shadow:inset 1px 1px 0 #ffffffed,inset -1px -1px 0 #ffffff70,0 18px 30px -14px #4179ac30; animation:kn-pack-switch 20s linear var(--pack-phase) infinite; } #kn-app[data-screen="landing"] .kn-pack-item::before { content:""; position:absolute; inset:-60% -90%; z-index:1; pointer-events:none; background:var(--kn-glass-light); opacity:0; animation:kn-glass-shimmer 7s ease-in-out var(--pack-glint) infinite; } #kn-app[data-screen="landing"] .kn-pack-item:nth-child(2) { --pack-glint:-1.4s; } #kn-app[data-screen="landing"] .kn-pack-item:nth-child(3) { --pack-glint:-2.8s; } #kn-app[data-screen="landing"] .kn-pack-item:nth-child(4) { --pack-glint:-4.2s; } #kn-app[data-screen="landing"] .kn-pack-item:nth-child(5) { --pack-glint:-5.6s; } #kn-app[data-screen="landing"] .kn-pack-item::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:var(--kn-glass-shine); background:linear-gradient(125deg,#ffffff65 0%,#ffffff08 32%,transparent 40%,#ffffff40 43%,transparent 53%,#ffffff12 100%); box-shadow:inset 0 1px 0 #fff,inset 1px 0 0 #ffffffb0,inset 0 -1px 0 #ffffff70; } #kn-app[data-screen="landing"] .kn-process-pack[data-pack-motion="true"] .kn-pack-item { animation:none; } #kn-app[data-screen="landing"] .kn-pack-item img { display:block; width:100%; height:auto; border-radius:7px; } #kn-app[data-screen="landing"] .kn-pack-saju { --pack-phase:-8s; --pack-x:calc(var(--kn-pack-unit) * .47); --pack-y:-68px; --pack-scale:.8; min-height:0; padding:16px; } #kn-app[data-screen="landing"] .kn-pack-saju small { display:block; font-size:7px; letter-spacing:.08em; margin-bottom:10px; } #kn-app[data-screen="landing"] .kn-pack-saju strong { display:block; font-size:29px; line-height:1; letter-spacing:-.04em; } #kn-app[data-screen="landing"] .kn-pack-description { font-size:10px; line-height:1.5; letter-spacing:0; padding:10px 0 0; } #kn-app[data-screen="landing"] .kn-pack-lines i { display:block; height:3px; margin:7px 0; background:#d9e1d5; width:100%; } #kn-app[data-screen="landing"] .kn-pack-lines i:nth-child(even) { width:70%; } #kn-app[data-screen="landing"] .kn-pack-saju>span { display:block; font-size:8px; margin-top:14px; } #kn-app[data-screen="landing"] .kn-pack-card-one { --pack-y:60px; --pack-scale:1.08; z-index:5; } #kn-app[data-screen="landing"] .kn-pack-card-three { --pack-phase:-4s; --pack-x:calc(var(--kn-pack-unit) * .76); --pack-y:5px; --pack-scale:.94; z-index:4; } #kn-app[data-screen="landing"] .kn-pack-card-two { --pack-phase:-16s; --pack-x:calc(var(--kn-pack-unit) * -.76); --pack-y:5px; --pack-scale:.94; z-index:3; } #kn-app[data-screen="landing"] .kn-pack-seal { --pack-phase:-12s; --pack-x:calc(var(--kn-pack-unit) * -.47); --pack-y:-68px; --pack-scale:.8; width:var(--kn-pack-unit); padding:12px 12px 10px; } #kn-app[data-screen="landing"] .kn-pack-seal img { filter:none; mix-blend-mode:multiply; border-radius:0; transform:scale(1.5); transform-origin:center; } #kn-app[data-screen="landing"] .kn-pack-seal>span { display:block; font-size:6px; text-align:center; letter-spacing:.06em; margin-top:5px; } @keyframes kn-pack-switch { 0%,100% { transform:translate(-50%,calc(-50% + 46px)) scale(1.08); z-index:5; } 20% { transform:translate(calc(-50% + var(--kn-orbit-radius,100px) * .95),calc(-50% + 14px)) scale(.94); z-index:4; } 40% { transform:translate(calc(-50% + var(--kn-orbit-radius,100px) * .59),calc(-50% - 37px)) scale(.8); z-index:2; } 60% { transform:translate(calc(-50% - var(--kn-orbit-radius,100px) * .59),calc(-50% - 37px)) scale(.8); z-index:1; } 80% { transform:translate(calc(-50% - var(--kn-orbit-radius,100px) * .95),calc(-50% + 14px)) scale(.94); z-index:3; } } @media(prefers-reduced-motion:reduce) { #kn-app[data-screen="landing"] .kn-pack-item { animation:none; } #kn-app[data-screen="landing"] .kn-pack-item::before { animation:none; opacity:0; } } #kn-app[data-screen="landing"] .kn-use-list { display:block; margin:76px 0 0; } #kn-app[data-screen="landing"] .kn-use-list li { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:8vw; align-items:center; padding:var(--kn-item-space) 0; border:0; } #kn-app[data-screen="landing"] .kn-use-list li:nth-child(even) { grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); } #kn-app[data-screen="landing"] .kn-use-list li:nth-child(even) .kn-use-visual { order:2; } #kn-app[data-screen="landing"] .kn-use-list h3 { font-size:clamp(32px,3.8vw,60px); line-height:1.08; letter-spacing:-.05em; } #kn-app[data-screen="landing"] .kn-use-list p { font-size:17px; margin-top:22px; max-width:470px; } #kn-app[data-screen="landing"] .kn-use-example { border:0; border-top:1px solid #d9e0d8; border-radius:0; margin-top:30px; padding:22px 0 0; font-size:20px; } #kn-app[data-screen="landing"] .kn-use-example small { font-size:12px; margin-top:8px; } #kn-app[data-screen="landing"] .kn-use-visual { position:relative; aspect-ratio:1.12; overflow:clip; background:#f0f3ef; isolation:isolate; } #kn-app[data-screen="landing"] .kn-visual-greeting { background:#fff; } #kn-app[data-screen="landing"] .kn-visual-greeting>img { display:block; width:100%; height:100%; object-fit:contain; } #kn-app[data-screen="landing"] .kn-greeting-person { display:none; position:absolute; top:0; bottom:0; width:50%; } #kn-app[data-screen="landing"] .kn-greeting-visitor { left:0; --kn-walk-from:-110%; --kn-bubble-delay:2.05s; } #kn-app[data-screen="landing"] .kn-greeting-local { right:0; --kn-walk-from:110%; } #kn-app[data-screen="landing"] .kn-greeting-sprite { width:100%; height:100%; background:url('/assets/designs/greeting-character-sprites.webp') left center / 200% 100% no-repeat; transform-origin:50% 87%; } #kn-app[data-screen="landing"] .kn-greeting-local .kn-greeting-sprite { background-position:right center; } #kn-app[data-screen="landing"] .kn-greeting-bubble { position:absolute; top:0; padding:12px 18px; border:0; border-radius:24px; background:linear-gradient(165deg,#fff 20%,#f8f9fa 65%,#e5e9ed); color:#44535b; font-size:clamp(12px,1.3vw,18px); font-weight:500; white-space:nowrap; opacity:0; box-shadow:inset 0 2px 2px #fff,inset 0 -3px 4px #b1bdc52b; filter:drop-shadow(0 3px 2px #64798616) drop-shadow(0 10px 9px #64798614); } #kn-app[data-screen="landing"] .kn-greeting-bubble::after { content:""; position:absolute; bottom:-7px; left:48%; width:13px; height:13px; transform:rotate(45deg); border-radius:0 0 4px 0; background:linear-gradient(135deg,#f2f4f6,#e5e9ed); box-shadow:inset -2px -2px 2px #b1bdc51a; } @media(max-width:700px) { #kn-app[data-screen="landing"] .kn-greeting-person { top:22px; } #kn-app[data-screen="landing"] .kn-greeting-bubble { padding:11px 15px; } } #kn-app[data-screen="landing"] .kn-greeting-bubble-left { left:9%; } #kn-app[data-screen="landing"] .kn-greeting-bubble-right { right:5%; font-family:var(--kn-font-reading); } #kn-app[data-screen="landing"] .kn-visual-greeting[data-greeting-ready="true"] .kn-greeting-fallback { visibility:hidden; } #kn-app[data-screen="landing"] .kn-visual-greeting[data-greeting-ready="true"] .kn-greeting-person { display:block; transform:translateX(var(--kn-walk-from)); } #kn-app[data-screen="landing"] .kn-visual-greeting[data-greeting-ready="true"][data-greeted="true"] .kn-greeting-person { animation:kn-greeting-arrive 1.8s .1s cubic-bezier(.25,.55,.35,1) both; } #kn-app[data-screen="landing"] .kn-visual-greeting[data-greeting-ready="true"][data-greeted="true"] .kn-greeting-sprite { animation:kn-greeting-step .22s .1s 8 alternate ease-in-out; } #kn-app[data-screen="landing"] .kn-visual-greeting[data-greeting-ready="true"][data-greeted="true"] .kn-greeting-local .kn-greeting-sprite { animation-direction:alternate-reverse; } #kn-app[data-screen="landing"] .kn-visual-greeting[data-greeting-ready="true"][data-greeted="true"] .kn-greeting-bubble { animation:kn-greeting-speech .55s 2.05s cubic-bezier(.2,.8,.2,1.2) both; } #kn-app[data-screen="landing"] .kn-visual-greeting[data-greeting-ready="true"][data-greeted="true"] .kn-greeting-bubble-right { animation-delay:2.5s; } @keyframes kn-greeting-arrive { from { transform:translateX(var(--kn-walk-from)); } to { transform:translateX(0); } } @keyframes kn-greeting-step { from { transform:translateY(0) rotate(-1.5deg); } to { transform:translateY(-6px) rotate(1.5deg); } } @keyframes kn-greeting-speech { from { opacity:0; transform:translateY(14px) scale(.85); } to { opacity:1; transform:translateY(0) scale(1); } } @media(prefers-reduced-motion:reduce) { #kn-app[data-screen="landing"] .kn-visual-greeting[data-greeting-ready="true"] .kn-greeting-person { transform:none; animation:none; } #kn-app[data-screen="landing"] .kn-visual-greeting[data-greeting-ready="true"] :is(.kn-greeting-sprite,.kn-greeting-bubble) { animation:none; } #kn-app[data-screen="landing"] .kn-visual-greeting[data-greeting-ready="true"] .kn-greeting-bubble { opacity:1; transform:none; } } #kn-app[data-screen="landing"] .kn-visual-city>img { position:absolute; bottom:0; width:100%; height:auto; } #kn-app[data-screen="landing"] .kn-visual-city>span { position:absolute; left:8%; bottom:9%; font-size:clamp(32px,4.5vw,72px); letter-spacing:-.04em; font-weight:600; color:#fff; text-shadow:0 3px 20px #0009; } #kn-app[data-screen="landing"] .kn-visual-profile { display:flex; align-items:center; justify-content:center; background:#fff; } #kn-app[data-screen="landing"] .kn-profile-panel { position:relative; z-index:2; width:76%; min-height:76%; background:var(--kn-glass-surface); border:1px solid #b6d3ec80; border-radius:24px; backdrop-filter:blur(18px); display:flex; align-items:center; justify-content:center; flex-direction:column; padding:32px; box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 #ffffffb0,0 20px 36px -22px #4179ac45; } #kn-app[data-screen="landing"] .kn-profile-label { font-size:9px; letter-spacing:.14em; color:#7a919f; margin-bottom:20px; } #kn-app[data-screen="landing"] .kn-profile-avatar { width:clamp(76px,9vw,120px); aspect-ratio:1; border-radius:50%; background:#edf5fb url('/assets/designs/greeting-character-sprites.webp') 3% 24% / 220% auto no-repeat; box-shadow:inset 0 0 0 3px #ffffffb0; margin-bottom:22px; } #kn-app[data-screen="landing"] .kn-profile-name-stage { display:grid; grid-template-rows:32px 48px; width:100%; min-height:80px; place-items:center; } #kn-app[data-screen="landing"] .kn-profile-name-stage>span { white-space:nowrap; } #kn-app[data-screen="landing"] .kn-profile-original { grid-area:1 / 1; font-size:clamp(22px,2.5vw,36px); font-weight:500; letter-spacing:-.04em; color:#6d8493; transform:scale(.72); } #kn-app[data-screen="landing"] .kn-profile-original::after { content:" ↓"; opacity:var(--kn-profile-switch,1); } #kn-app[data-screen="landing"] .kn-profile-korean { grid-area:2 / 1; } #kn-app[data-screen="landing"] .kn-profile-korean { font-family:var(--kn-font-reading); font-size:clamp(32px,3.2vw,46px); font-weight:500; letter-spacing:-.04em; } #kn-app[data-screen="landing"] .kn-profile-typed { position:relative; } #kn-app[data-screen="landing"] .kn-profile-badge { margin-top:22px; font-size:10px; color:#52758e; letter-spacing:.02em; } #kn-app[data-screen="landing"] .kn-visual-profile[data-profile-motion="true"] .kn-profile-original { color:var(--kn-ink); opacity:calc(1 - .3 * var(--kn-profile-switch,0)); transform:translateY(calc(24px * (1 - var(--kn-profile-switch,0)))) scale(calc(1 - .28 * var(--kn-profile-switch,0))); } #kn-app[data-screen="landing"] .kn-visual-profile[data-profile-motion="true"] .kn-profile-korean { opacity:var(--kn-profile-switch,0); } #kn-app[data-screen="landing"] .kn-visual-profile[data-profile-motion="true"] :is(.kn-profile-roman,.kn-profile-badge) { opacity:var(--kn-profile-complete,0); transform:translateY(calc(5px * (1 - var(--kn-profile-complete,0)))); } #kn-app[data-screen="landing"] .kn-visual-profile[data-profile-typing="true"] .kn-profile-typed::after { content:""; position:absolute; left:100%; top:.15em; width:2px; height:.8em; margin-left:4px; background:#52758e; animation:kn-name-cursor 600ms step-end infinite; } #kn-app[data-screen="landing"] .kn-profile-panel img { width:100px; height:100px; border-radius:50%; object-fit:cover; object-position:50% 85%; margin-bottom:20px; } #kn-app[data-screen="landing"] .kn-profile-panel>span { font-size:36px; letter-spacing:-.04em; } #kn-app[data-screen="landing"] .kn-profile-panel small { font-size:13px; margin-top:10px; } #kn-app[data-screen="landing"] .kn-profile-name { position:absolute; left:-3%; bottom:-8%; font-size:clamp(100px,16vw,260px); line-height:1; letter-spacing:-.08em; color:#cbd6c4; font-weight:650; } #kn-app[data-screen="landing"] .kn-visual-letter { background:#fff; display:flex; align-items:center; justify-content:center; } #kn-app[data-screen="landing"] .kn-letter-paper { position:relative; width:75%; min-height:74%; padding:12%; background:linear-gradient(145deg,#fffdf8,#faf7ef); border:1px solid #e8e2d6; box-shadow:inset 0 0 28px #b6a88608,0 24px 42px -18px #38463d24,0 2px 5px #38463d08; transform:translateY(var(--kn-letter-jolt,0px)) rotate(var(--kn-letter-angle,0deg)); } #kn-app[data-screen="landing"] .kn-letter-paper::before { content:"Dear you,"; position:absolute; top:12%; left:14%; font-family:Georgia,serif; font-style:italic; font-size:clamp(17px,1.8vw,26px); color:#867b65; } #kn-app[data-screen="landing"] .kn-letter-paper::after { content:""; position:absolute; top:28%; left:14%; right:14%; height:24%; background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(33.333% - 1px),#b7aa8e30 calc(33.333% - 1px),#b7aa8e30 33.333%); pointer-events:none; } #kn-app[data-screen="landing"] .kn-letter-signature { position:absolute; left:14%; bottom:14%; z-index:1; font-size:clamp(20px,2.6vw,38px); line-height:1.35; letter-spacing:-.04em; } #kn-app[data-screen="landing"] .kn-letter-signature>span { display:block; width:max-content; max-width:100%; } #kn-app[data-screen="landing"] .kn-visual-letter[data-letter-motion="true"] .kn-letter-love { clip-path:inset(0 var(--kn-love-reveal,0%) 0 0); } #kn-app[data-screen="landing"] .kn-visual-letter[data-letter-motion="true"] .kn-letter-name { clip-path:inset(0 var(--kn-signature-reveal,0%) 0 0); } #kn-app[data-screen="landing"] .kn-visual-letter[data-letter-motion="true"] .kn-letter-stamp { opacity:var(--kn-stamp-opacity,1); transform:scale(var(--kn-stamp-scale,1)) rotate(var(--kn-stamp-tilt,0deg)); transform-origin:center; } #kn-app[data-screen="landing"] .kn-letter-paper i { font-style:normal; font-size:.65em; } #kn-app[data-screen="landing"] .kn-letter-paper img { position:absolute; z-index:1; right:3%; bottom:-1.5%; width:48%; height:auto; aspect-ratio:1; margin:0; clip-path:inset(1%); filter:none; mix-blend-mode:multiply; } #kn-app[data-screen="landing"] .kn-letter-photographic { padding:0; min-height:0; aspect-ratio:1327 / 1185; background:#f7f2e7 url('/assets/designs/letter-paper-photo.webp') center / 100% 100% no-repeat; border:0; box-shadow:0 22px 34px -20px #514c3d45,0 2px 4px #514c3d12; } #kn-app[data-screen="landing"] .kn-letter-photographic::before,#kn-app[data-screen="landing"] .kn-letter-photographic::after { content:none; } #kn-app[data-screen="landing"] .kn-letter-photographic .kn-letter-stamp { bottom:-8.5%; } #kn-app[data-screen="landing"] .kn-letter-photo-layer { position:absolute; inset:0; background:url('/assets/designs/letter-handwriting-photo.webp') center / 100% 100% no-repeat; pointer-events:none; } #kn-app[data-screen="landing"] .kn-letter-photo-dear { clip-path:inset(12% 60% 74% 10%); } #kn-app[data-screen="landing"] .kn-letter-photo-love { clip-path:inset(69% var(--kn-love-photo-right,60%) 21% 10%); } #kn-app[data-screen="landing"] .kn-letter-photo-name { clip-path:inset(80% var(--kn-name-photo-right,56%) 10% 10%); } #kn-app[data-screen="landing"] .kn-letter-fold-shell { position:relative; width:75%; aspect-ratio:1327 / 1185; perspective:1000px; transform:translateY(var(--kn-letter-jolt,0px)); } #kn-app[data-screen="landing"] .kn-letter-fold-shell .kn-letter-paper { position:absolute; inset:0; width:100%; height:100%; transform:none; clip-path:inset(50% 0 0); } #kn-app[data-screen="landing"] .kn-letter-fold-leaf { position:absolute; inset:0 0 50%; z-index:3; transform-origin:center bottom; transform:rotateX(var(--kn-letter-fold-angle,0deg)); transform-style:preserve-3d; } #kn-app[data-screen="landing"] .kn-letter-fold-leaf>span { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; box-shadow:0 2px 4px #514c3d18; } #kn-app[data-screen="landing"] .kn-letter-fold-front { background:url('/assets/designs/letter-handwriting-photo.webp') center top / 100% 200% no-repeat; } #kn-app[data-screen="landing"] .kn-letter-fold-back { background:url('/assets/designs/letter-paper-photo.webp') center bottom / 100% 200% no-repeat; transform:rotateX(180deg); } #kn-app[data-screen="landing"] .kn-letter-fold-shell::after { content:""; position:absolute; top:50%; left:0; right:0; height:1px; z-index:4; background:#8e806122; pointer-events:none; } #kn-app[data-screen="landing"] .kn-visual-phone { background:#fff; overflow:visible; aspect-ratio:1.12; } #kn-app[data-screen="landing"] .kn-phone { position:absolute; width:36%; max-width:230px; aspect-ratio:9 / 19.5; top:6%; left:20%; padding:5px; border:1px solid #85878b; border-radius:clamp(24px,3vw,40px); background:linear-gradient(105deg,#f2f2f0 0%,#797b80 9%,#d3d4d5 30%,#92949a 74%,#f2f1ed 95%,#6c6e73 100%); box-shadow:inset 1px 0 1px #fff,inset -1px 0 2px #393b40,2px 2px 0 #73757b,0 22px 34px -14px #18212d50; z-index:2; transform:rotate(-8deg); } #kn-app[data-screen="landing"] .kn-phone-screen { position:relative; width:100%; height:100%; border:3px solid #101114; border-radius:clamp(19px,2.6vw,34px); overflow:hidden; background:#101114; } #kn-app[data-screen="landing"] .kn-phone-screen::after { content:""; position:absolute; inset:0; background:linear-gradient(115deg,#ffffff18,transparent 45%,#ffffff04 70%,#ffffff12); box-shadow:inset 0 0 2px #ffffff60; pointer-events:none; } #kn-app[data-screen="landing"] .kn-phone img { width:100%; height:100%; object-fit:cover; display:block; } #kn-app[data-screen="landing"] .kn-phone-island { position:absolute; top:3%; left:32%; width:36%; height:4%; min-height:9px; border-radius:30px; background:#08090b; box-shadow:0 1px 1px #ffffff20; } #kn-app[data-screen="landing"] .kn-phone-island::after { content:""; position:absolute; right:12%; top:27%; height:46%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 35%,#344157,#131824 45%,#08090b 70%); } #kn-app[data-screen="landing"] .kn-phone-home { position:absolute; bottom:2%; left:34%; width:32%; height:3px; border-radius:8px; background:#fff; box-shadow:0 1px 2px #0004; } #kn-app[data-screen="landing"] .kn-phone-buttons { position:absolute; left:-3px; top:21%; width:2px; height:11%; border-radius:2px 0 0 2px; background:linear-gradient(to bottom,#d6d7d9,#74767c,#c7c8cb); box-shadow:0 40px 0 #94969b; } #kn-app[data-screen="landing"] .kn-phone-buttons::after { content:""; position:absolute; left:0; top:-22px; width:2px; height:12px; border-radius:2px; background:#a5a7ab; } #kn-app[data-screen="landing"] .kn-phone::after { content:""; position:absolute; right:-3px; top:29%; width:2px; height:15%; border-radius:0 2px 2px 0; background:linear-gradient(to bottom,#dedfe1,#797b82,#c7c8ca); } #kn-app[data-screen="landing"] .kn-visual-phone .kn-phone { left:3%; top:50%; width:38%; max-width:260px; transform:translateY(-50%); } #kn-app[data-screen="landing"] .kn-phone-card-set { position:absolute; inset:0; } #kn-app[data-screen="landing"] .kn-memory-card { position:absolute; top:50%; width:26%; height:auto; transform:translateY(-50%); box-shadow:0 16px 28px -12px #20362e35; } #kn-app[data-screen="landing"] .kn-memory-card-tradition { left:43%; z-index:1; } #kn-app[data-screen="landing"] .kn-memory-card-ink { left:58%; z-index:2; } #kn-app[data-screen="landing"] .kn-memory-card-seoul { left:73%; z-index:3; } #kn-app[data-screen="landing"] .kn-visual-phone[data-phone-motion="true"] .kn-memory-card-seoul { opacity:var(--kn-phone-source-opacity,1); } #kn-app[data-screen="landing"] .kn-phone-transfer { display:none; } #kn-app[data-screen="landing"] .kn-visual-phone[data-phone-motion="true"] .kn-phone-transfer { display:block; position:absolute; z-index:3; left:var(--kn-transfer-x); top:var(--kn-transfer-y); width:var(--kn-transfer-width); height:var(--kn-transfer-height); object-fit:cover; border-radius:var(--kn-transfer-radius); transform:rotate(var(--kn-transfer-angle)); opacity:var(--kn-transfer-opacity,0); pointer-events:none; box-shadow:0 8px 18px #18212d20; } #kn-app[data-screen="landing"] .kn-visual-phone[data-phone-motion="true"] .kn-phone-screen>img { opacity:var(--kn-phone-screen-on,1); } #kn-app[data-screen="landing"] .kn-visual-phone[data-phone-motion="true"] .kn-phone-home { opacity:var(--kn-phone-screen-on,1); } #kn-app[data-screen="landing"] .kn-visual-phone[data-phone-motion="true"] .kn-phone-screen::after { background:linear-gradient(115deg,transparent 25%,#ffffff38 48%,#ffffff05 56%,transparent 75%); transform:translateX(var(--kn-phone-shine-x,100%)); opacity:var(--kn-phone-shine-opacity,0); } #kn-app[data-screen="landing"] .kn-offer .kn-package-grid { gap:32px; margin:64px 0 28px; } #kn-app[data-screen="landing"] .kn-package-card { padding:48px; min-height:590px; border:1px solid #b6d3ec80; } #kn-app[data-screen="landing"] .kn-package-card:last-child { border-color:#91badd; background:linear-gradient(135deg,#edf7ffed 0%,#d3eaffbd 42%,#eef7ffb8 68%,#c6e3fbd1 100%); } #kn-app[data-screen="landing"] .kn-package-card:last-child::after { animation-delay:-3.5s; } #kn-app[data-screen="landing"] .kn-package-card h3 { font-size:32px; letter-spacing:-.04em; } #kn-app[data-screen="landing"] .kn-package-card .kn-price { font-size:clamp(64px,7vw,104px); line-height:1; letter-spacing:-.07em; margin:26px 0 34px; } #kn-app[data-screen="landing"] .kn-package-card .kn-price span { font-size:13px; display:block; letter-spacing:0; margin-top:14px; } #kn-app[data-screen="landing"] .kn-inclusions { font-size:16px; line-height:1.65; } #kn-app[data-screen="landing"] .kn-package-card .kn-primary { min-height:58px; background:#233e59; border-color:#233e59; color:#fff; border-radius:10px; box-shadow:inset 0 1px 0 #ffffff18,0 4px 10px #233e5912; transition:background 180ms ease,border-color 180ms ease; } #kn-app[data-screen="landing"] .kn-package-card .kn-primary:hover { background:#315572; border-color:#315572; } #kn-app[data-screen="landing"] .kn-package-card .kn-primary:focus-visible { outline:3px solid #91badd; outline-offset:4px; } #kn-app[data-screen="landing"] .kn-faq { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8vw; align-items:start; } #kn-app[data-screen="landing"] .kn-faq .kn-scene-intro { position:sticky; top:80px; } #kn-app[data-screen="landing"] .kn-faq h2 { font-size:clamp(46px,5vw,84px); } #kn-app[data-screen="landing"] .kn-faq details { padding:24px 0; } #kn-app[data-screen="landing"] .kn-faq summary { font-size:20px; line-height:1.4; } #kn-app[data-screen="landing"] .kn-faq details p { font-size:16px; line-height:1.7; } #kn-app[data-screen="landing"] .kn-closing { position:relative; overflow:clip; isolation:isolate; min-height:680px; padding-top:var(--kn-section-space); padding-bottom:var(--kn-section-space); background:#101211; color:#fff; border-bottom-color:#ffffff14; } #kn-app[data-screen="landing"] .kn-closing .kn-scene-intro { position:relative; z-index:2; } #kn-app[data-screen="landing"] .kn-closing h2 { font-size:clamp(58px,8.2vw,136px); color:#fff; } #kn-app[data-screen="landing"] .kn-closing .kn-eyebrow { color:#b9c5bd; } #kn-app[data-screen="landing"] .kn-closing .kn-section-lead { margin:36px auto 0; color:#c2c9c4; } #kn-app[data-screen="landing"] .kn-closing .kn-primary { position:relative; z-index:2; max-width:380px; margin:36px auto 18px; min-height:60px; background:#fff; border-color:#fff; color:#18261f; } #kn-app[data-screen="landing"] .kn-closing .kn-primary:hover { background:#e8ede9; border-color:#e8ede9; } #kn-app[data-screen="landing"] .kn-closing .kn-primary:focus-visible { outline:2px solid #fff; outline-offset:5px; } #kn-app[data-screen="landing"] .kn-closing .kn-muted { color:#a9b3ac; } #kn-app[data-screen="landing"] .kn-closing .kn-inline-link { color:#e4eae6; } #kn-app[data-screen="landing"] .kn-closing>p,#kn-app[data-screen="landing"] .kn-closing>a { position:relative; z-index:2; } #kn-app[data-screen="landing"] .kn-closing-art { position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.14; } #kn-app[data-screen="landing"] .kn-closing-art img { position:absolute; width:clamp(220px,24vw,430px); height:auto; top:120px; left:-5%; transform:rotate(-16deg); } #kn-app[data-screen="landing"] .kn-closing-art img:last-child { left:auto; right:-5%; top:280px; transform:rotate(16deg); } /* Native scrolling is retained. Only visible scenes receive these small offsets. */ #kn-app[data-screen="landing"][data-landing-motion="true"] .kn-block:not(.kn-how):not(.kn-faq)>.kn-scene-intro { transform:translateY(var(--kn-title-y,0px)); } #kn-app[data-screen="landing"][data-landing-motion="true"] .kn-use-visual { transform:translateY(var(--kn-visual-y,0px)); } #kn-app[data-screen="landing"][data-landing-motion="true"] .kn-process-name { transform:translateY(var(--kn-visual-y,0px)); } #kn-app[data-screen="landing"][data-landing-motion="true"] .kn-result-detail { opacity:var(--kn-scene-opacity,1); } @media(min-width:1800px){ #kn-app[data-screen="landing"] .kn-block h2 { font-size:clamp(118px,6.5vw,156px); } #kn-app[data-screen="landing"] .kn-how h2,#kn-app[data-screen="landing"] .kn-faq h2 { font-size:100px; } } @media(max-width:1000px){ #kn-app[data-screen="landing"] .kn-how { gap:5vw; } #kn-app[data-screen="landing"] .kn-how h2 { font-size:clamp(42px,5.8vw,64px); } #kn-app[data-screen="landing"] .kn-result-detail { gap:28px; } #kn-app[data-screen="landing"] .kn-package-card { padding:30px; } } @media(max-width:700px){ #kn-app[data-screen="landing"] { --kn-gutter:24px; } #kn-app[data-screen="landing"] .kn-block { padding:var(--kn-section-space) var(--kn-gutter); } #kn-app[data-screen="landing"] .kn-block h2 { font-size:clamp(38px,8.5vw,60px); line-height:1.06; letter-spacing:-.055em; text-wrap:initial; } #kn-app[data-screen="landing"] .kn-block .kn-eyebrow { font-size:10px; margin-bottom:22px; } #kn-app[data-screen="landing"] .kn-section-lead { font-size:16px; margin:24px 0 0; } #kn-app[data-screen="landing"][data-landing-motion="true"] .kn-cards-scene { height:auto; min-height:0; margin:32px calc(-1 * var(--kn-gutter)) 42px; } #kn-app[data-screen="landing"][data-landing-motion="true"] .kn-cards-scene-stage { position:relative; height:auto; min-height:0; padding:0 var(--kn-gutter); } #kn-app[data-screen="landing"] .kn-card-gallery[data-enhanced="true"] { margin:0 calc(-1 * var(--kn-gutter)); } #kn-app[data-screen="landing"] .kn-card-gallery[data-enhanced="true"] .kn-result-cards { height:calc(clamp(190px,62vw,300px) * 1.777 + 90px); perspective:850px; } #kn-app[data-screen="landing"] .kn-card-gallery[data-enhanced="true"] figure { width:clamp(190px,62vw,300px); top:47%; } #kn-app[data-screen="landing"] .kn-delivery-strip { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; padding:8px 0; } #kn-app[data-screen="landing"] .kn-delivery-item { padding:24px 16px; } #kn-app[data-screen="landing"] .kn-delivery-item:nth-child(odd) { border-left:0; padding-left:0; } #kn-app[data-screen="landing"] .kn-delivery-item:nth-child(even) { padding-right:0; } #kn-app[data-screen="landing"] .kn-delivery-item:nth-child(n+3) { border-top:1px solid #d9e0d8; } #kn-app[data-screen="landing"] .kn-delivery-item strong { height:58px; font-size:56px; margin-bottom:14px; gap:9px; } #kn-app[data-screen="landing"] .kn-delivery-item .kn-delivery-saju { font-size:48px; } #kn-app[data-screen="landing"] .kn-delivery-item>span { font-size:14px; } #kn-app[data-screen="landing"] .kn-delivery-item small { font-size:11px; } #kn-app[data-screen="landing"] .kn-result-details { margin-top:26px; } #kn-app[data-screen="landing"] .kn-result-detail { display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding:var(--kn-detail-space) 0; min-height:0; } #kn-app[data-screen="landing"] .kn-result-detail .kn-sample-name { align-self:flex-start; font-size:clamp(72px,20vw,128px); } #kn-app[data-screen="landing"] .kn-result-detail h3 { font-size:40px; } #kn-app[data-screen="landing"] .kn-result-detail p { font-size:16px; } #kn-app[data-screen="landing"] .kn-result-detail>p:nth-child(3) { font-size:19px; } #kn-app[data-screen="landing"] .kn-result-detail>p:nth-child(4) { font-size:22px; } #kn-app[data-screen="landing"] .kn-sample-seal img { width:min(100%,340px); align-self:center; margin:0; } #kn-app[data-screen="landing"] .kn-sample-reading blockquote { font-size:28px; margin:18px 0; } #kn-app[data-screen="landing"] .kn-how,#kn-app[data-screen="landing"] .kn-faq { display:block; } #kn-app[data-screen="landing"] .kn-how { padding-bottom:var(--kn-section-space); } #kn-app[data-screen="landing"] .kn-how .kn-scene-intro,#kn-app[data-screen="landing"] .kn-faq .kn-scene-intro { position:relative; top:auto; } #kn-app[data-screen="landing"] .kn-process-grid { margin-top:44px; } #kn-app[data-screen="landing"] .kn-process-grid li { min-height:0; padding:var(--kn-item-space) 0; } #kn-app[data-screen="landing"] .kn-process-step b { font-size:72px; } #kn-app[data-screen="landing"] .kn-process-grid h3 { font-size:34px; } #kn-app[data-screen="landing"] .kn-input-example { padding:6px 20px; max-width:none; } #kn-app[data-screen="landing"] .kn-input-example div { gap:14px; padding:17px 0; } #kn-app[data-screen="landing"] .kn-input-example dd { font-size:16px; } #kn-app[data-screen="landing"] .kn-input-example div:first-child dd { font-size:23px; } #kn-app[data-screen="landing"] .kn-input-example div:last-child dd { font-size:14px; } #kn-app[data-screen="landing"] .kn-process-name { min-height:0; margin-top:28px; padding:24px 20px; } #kn-app[data-screen="landing"] .kn-process-name>span { font-size:clamp(72px,21vw,88px); } #kn-app[data-screen="landing"] .kn-process-meaning { font-size:11px; margin-top:24px; } #kn-app[data-screen="landing"] .kn-process-pack { --kn-pack-unit:clamp(100px,29vw,128px); height:350px; margin-top:16px; } #kn-app[data-screen="landing"] .kn-pack-saju { padding:16px; } #kn-app[data-screen="landing"] .kn-use-list { margin-top:36px; } #kn-app[data-screen="landing"] .kn-use-list li,#kn-app[data-screen="landing"] .kn-use-list li:nth-child(even) { display:flex; flex-direction:column; gap:32px; padding:var(--kn-item-space) 0; align-items:stretch; } #kn-app[data-screen="landing"] .kn-use-list li:nth-child(even) .kn-use-visual { order:0; } #kn-app[data-screen="landing"] .kn-use-example { border-top:0; margin-top:20px; padding-top:0; } #kn-app[data-screen="landing"] .kn-use-list li+li { border-top:1px solid #d9e0d8; } #kn-app[data-screen="landing"] .kn-use-list h3 { font-size:36px; } #kn-app[data-screen="landing"] .kn-use-list p { font-size:16px; } #kn-app[data-screen="landing"] .kn-profile-panel { padding:22px; } #kn-app[data-screen="landing"] .kn-profile-panel img { width:75px; height:75px; margin-bottom:14px; } #kn-app[data-screen="landing"] .kn-profile-panel>span { font-size:28px; } #kn-app[data-screen="landing"] .kn-letter-paper img { width:48%; height:auto; margin:0; } #kn-app[data-screen="landing"] .kn-phone { padding:3px; } #kn-app[data-screen="landing"] .kn-phone-screen { border-width:2px; } #kn-app[data-screen="landing"] .kn-offer .kn-package-grid { grid-template-columns:1fr; margin-top:36px; gap:24px; } #kn-app[data-screen="landing"] .kn-package-card { padding:28px; min-height:0; } #kn-app[data-screen="landing"] .kn-package-card .kn-price { font-size:72px; } #kn-app[data-screen="landing"] .kn-package-card .kn-primary { margin-top:28px; } #kn-app[data-screen="landing"] .kn-faq-list { margin-top:36px; } #kn-app[data-screen="landing"] .kn-faq summary { font-size:18px; } #kn-app[data-screen="landing"] .kn-closing { min-height:600px; padding-top:var(--kn-section-space); padding-bottom:var(--kn-section-space); } #kn-app[data-screen="landing"] .kn-closing h2 { font-size:clamp(42px,10vw,70px); } #kn-app[data-screen="landing"] .kn-closing-art { opacity:.08; } #kn-app[data-screen="landing"] .kn-closing-art img { width:220px; left:-35%; top:50px; } #kn-app[data-screen="landing"] .kn-closing-art img:last-child { right:-35%; top:330px; } } @media(prefers-reduced-motion:reduce){ #kn-app[data-screen="landing"][data-landing-motion="true"] .kn-cards-scene { height:auto; min-height:0; } #kn-app[data-screen="landing"][data-landing-motion="true"] .kn-cards-scene-stage { position:relative; height:auto; min-height:0; } #kn-app[data-screen="landing"] .kn-block>.kn-scene-intro,#kn-app[data-screen="landing"] .kn-use-visual { transform:none!important; } #kn-app[data-screen="landing"] .kn-result-detail { opacity:1!important; } } #kn-app[data-screen="landing"] .kn-use-list .kn-greeting-scene { display:block; } #kn-app[data-screen="landing"] .kn-greeting-stage { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:8vw; align-items:center; width:100%; } #kn-app[data-screen="landing"] .kn-greeting-scene[data-greeting-scroll="true"] { height:calc(var(--kn-greeting-stage-height,600px) + 70svh); padding:0; } #kn-app[data-screen="landing"] .kn-greeting-scene[data-greeting-scroll="true"] .kn-greeting-stage { position:sticky; top:24px; height:auto; padding:24px 0; } #kn-app[data-screen="landing"] .kn-greeting-stage .kn-visual-greeting { transform:none; } #kn-app[data-screen="landing"] .kn-visual-greeting[data-greeting-ready="true"] .kn-greeting-person { animation:none; transform:translateX(calc(var(--kn-walk-from) * (1 - var(--kn-walk-progress,0)))); } #kn-app[data-screen="landing"] .kn-visual-greeting[data-greeting-ready="true"] .kn-greeting-sprite { animation:none; transform:translateY(var(--kn-step-y,0px)) rotate(var(--kn-step-tilt,0deg)); } #kn-app[data-screen="landing"] .kn-visual-greeting[data-greeting-ready="true"] .kn-greeting-bubble { animation:none; --kn-speech:var(--kn-left-speech,0); opacity:var(--kn-speech); transform:translateY(calc(14px * (1 - var(--kn-speech)))) scale(calc(.85 + .15 * var(--kn-speech))); } #kn-app[data-screen="landing"] .kn-visual-greeting[data-greeting-ready="true"] .kn-greeting-bubble-right { --kn-speech:var(--kn-right-speech,0); } @media(max-width:700px) { #kn-app[data-screen="landing"] .kn-greeting-stage { display:flex; flex-direction:column; justify-content:center; gap:24px; } #kn-app[data-screen="landing"] .kn-greeting-stage .kn-visual-greeting { width:min(100%,calc(50svh * 1.12)); flex-shrink:0; } #kn-app[data-screen="landing"] .kn-greeting-stage .kn-use-copy { width:100%; } } /* Shared spacing rhythm: section boundaries, related details, repeated items. */ @media(max-width:700px) { #kn-app[data-screen="landing"] { --kn-section-space:72px; --kn-detail-space:56px; --kn-item-space:48px; } #kn-app[data-screen="landing"] .kn-section-lead { margin-top:24px; } } /* Full-width editorial footer, aligned with the landing page gutter. */ #kn-app[data-screen="landing"] .kn-site-footer { padding:80px var(--kn-gutter) 28px; background:#fff; color:#263b31; } #kn-app[data-screen="landing"] .kn-footer-top { grid-template-columns:minmax(0,1.8fr) minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); padding-bottom:56px; } #kn-app[data-screen="landing"] .kn-footer-brand button { font-size:clamp(44px,5.5vw,92px); line-height:1; font-weight:650; letter-spacing:-.065em; white-space:nowrap; } #kn-app[data-screen="landing"] .kn-footer-brand button span { color:inherit; } #kn-app[data-screen="landing"] .kn-footer-brand p { font-size:17px; line-height:1.55; margin:24px 0 0; color:#718077; } #kn-app[data-screen="landing"] .kn-site-footer h2 { font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#7a877f; margin:0 0 12px; } #kn-app[data-screen="landing"] .kn-footer-policy-links { display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:0; border:0; } #kn-app[data-screen="landing"] .kn-site-footer a { text-decoration:none; } #kn-app[data-screen="landing"] .kn-site-footer a:hover { text-decoration:underline; } #kn-app[data-screen="landing"] .kn-footer-nav button:hover { text-decoration:underline; text-underline-offset:4px; } #kn-app[data-screen="landing"] .kn-footer-draft { background:none; color:#7a877f; font-size:11px; padding:18px 0; border-top:1px solid #e0e6e1; border-bottom:1px solid #e0e6e1; margin:0; } #kn-app[data-screen="landing"] .kn-business-info { padding:32px 0 40px; } #kn-app[data-screen="landing"] .kn-business-info dl { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 40px; margin-top:24px; } #kn-app[data-screen="landing"] .kn-business-info dl>div:nth-child(4) { grid-column:span 2; } #kn-app[data-screen="landing"] .kn-business-info dt { font-size:10px; color:#8a958e; } #kn-app[data-screen="landing"] .kn-business-info dd { font-size:12px; color:#647269; margin-top:6px; } #kn-app[data-screen="landing"] .kn-footer-bottom { justify-content:space-between; gap:16px 28px; padding-top:24px; border-color:#e0e6e1; color:#7a877f; } @media(max-width:1000px) and (min-width:701px) { #kn-app[data-screen="landing"] .kn-footer-top { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr); gap:24px; } #kn-app[data-screen="landing"] .kn-footer-brand button { font-size:clamp(38px,5vw,55px); } #kn-app[data-screen="landing"] .kn-footer-nav a { overflow-wrap:anywhere; } } @media(max-width:700px) { #kn-app[data-screen="landing"] .kn-site-footer { padding:56px var(--kn-gutter) 28px; } #kn-app[data-screen="landing"] .kn-footer-top { grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 24px; padding-bottom:36px; } #kn-app[data-screen="landing"] .kn-footer-brand { grid-column:1 / -1; } #kn-app[data-screen="landing"] .kn-footer-brand button { font-size:clamp(42px,11vw,64px); } #kn-app[data-screen="landing"] .kn-footer-brand p { margin-top:18px; font-size:15px; } #kn-app[data-screen="landing"] :is(.kn-footer-nav,.kn-footer-policy-links) { font-size:12px; gap:12px; } #kn-app[data-screen="landing"] .kn-footer-nav button { font-size:12px; } #kn-app[data-screen="landing"] .kn-footer-nav a { overflow-wrap:anywhere; } #kn-app[data-screen="landing"] .kn-business-info dl { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 24px; } #kn-app[data-screen="landing"] .kn-business-info { padding-bottom:32px; } #kn-app[data-screen="landing"] .kn-footer-bottom { gap:8px; } } /* A continuous, non-overlapping row of finished deliverables. */ #kn-app[data-screen="landing"] .kn-process-pack{--kn-pack-unit:clamp(180px,18vw,240px);height:auto;margin-top:28px;padding:16px 0 30px;overflow:hidden} #kn-app[data-screen="landing"] .kn-pack-orbit{position:relative;inset:auto;display:flex;align-items:center;gap:22px;width:max-content;will-change:transform} #kn-app[data-screen="landing"] .kn-pack-item{position:relative;top:auto;left:auto;flex:0 0 var(--kn-pack-unit);width:var(--kn-pack-unit);aspect-ratio:941/1672;box-sizing:border-box;transform:none;animation:none;padding:9px;border-radius:14px;box-shadow:0 10px 22px -14px #244a5b55} #kn-app[data-screen="landing"] .kn-pack-item::before,#kn-app[data-screen="landing"] .kn-pack-item::after{display:none} #kn-app[data-screen="landing"] .kn-pack-card img{height:100%;object-fit:cover} #kn-app[data-screen="landing"] .kn-pack-saju{display:flex;flex-direction:column;justify-content:center;padding:24px;background:#f6fafc} #kn-app[data-screen="landing"] .kn-pack-saju small{font-size:10px;line-height:1.6} #kn-app[data-screen="landing"] .kn-pack-saju strong{font-size:42px} #kn-app[data-screen="landing"] .kn-pack-description{font-size:13px;margin-top:12px} #kn-app[data-screen="landing"] .kn-pack-seal{display:flex;flex-direction:column;justify-content:center;padding:18px;background:#fff} #kn-app[data-screen="landing"] .kn-pack-seal img{transform:none;mix-blend-mode:multiply} #kn-app[data-screen="landing"] .kn-pack-seal>span{font-size:9px;margin-top:20px} @media(max-width:700px){#kn-app[data-screen="landing"] .kn-process-pack{--kn-pack-unit:clamp(200px,65vw,280px)}#kn-app[data-screen="landing"] .kn-pack-orbit{gap:18px}} @media(prefers-reduced-motion:reduce){#kn-app[data-screen="landing"] .kn-process-pack{overflow-x:auto}#kn-app[data-screen="landing"] .kn-pack-orbit{will-change:auto}#kn-app[data-screen="landing"] [data-pack-copy]{display:none}}