/* v43 · section fixes + one typographic scale for the whole site */ /* ══ Type scale ══════════════════════════════════════════════ T0 Display Korean statements (wall, insight) clamp 48–84 / 750 T1 En slogan Poppins section slogans clamp 44–76 / 500 T2 Ko title Korean main title of a section clamp 28–40 / 700 T3 Item title cards, rows, list items clamp 22–32 / 700 T4 Lead sub-slogan / one-line explanation 18 / 400 T5 Body descriptions 16 / 400 T6 Label section index, tags, kickers 13 / 600 Poppins T7 Caption sources, notes 13 / 400 ═══════════════════════════════════════════════════════════ */ :root{--t0:clamp(44px,5.4vw,84px);--t1:clamp(40px,5vw,76px);--t2:clamp(26px,2.5vw,38px);--t3:clamp(21px,2vw,30px); --t4:18px;--t5:16px;--t6:13px;--t7:13px;--ink1:#fff;--ink2:rgba(255,255,255,.74);--ink3:rgba(255,255,255,.5)} /* T6 labels — one family, one size */ #app .section-index,#app .tag,#app .editorial-label,#app .f2-head .tag{font:600 var(--t6)/1.5 var(--en),var(--kr) !important;letter-spacing:.02em !important;color:var(--ink3)} #app .section-index{color:var(--ink2)} /* T1 English slogan + T2 Korean main title (the real message — no longer 22px) */ #app .hl h2{font-size:var(--t1) !important;line-height:1.02 !important;letter-spacing:-.06em !important;font-weight:500 !important} #app .hl .kc{max-width:30em} #app .hl .kc b{display:block;font-size:var(--t2) !important;font-weight:700 !important;line-height:1.3 !important;letter-spacing:-.045em !important;color:var(--ink1) !important;margin-bottom:12px !important} #app .hl .kc p{font-size:var(--t4) !important;line-height:1.65 !important;font-weight:400 !important;color:var(--ink2) !important;letter-spacing:-.025em !important} #app .kh2,#app .transform-heading h3{font-size:var(--t2) !important;font-weight:700 !important;line-height:1.3 !important;letter-spacing:-.045em !important} #app .transform-heading p{font-size:var(--t4) !important;color:var(--ink2)} /* T0 display statements */ #app .wall-copy h2, /* T0 display statements */ #app .wall-copy h1{font-size:var(--t0) !important;line-height:1.28 !important} #app .story-message p{font-size:clamp(48px,6vw,92px) !important} /* T3 item titles */ #app .situation-card h3,#app #services .card h3,#app .val h4{font-size:var(--t3) !important;line-height:1.4 !important;letter-spacing:-.045em !important;font-weight:700 !important} #app .situation-card h3{font-size:clamp(24px,2.4vw,34px) !important} #app .to-copy{font-size:clamp(22px,2.1vw,32px) !important} /* T4 lead · T5 body */ #app .lead,#app .wall-copy .k,#app .story-foot{font-size:var(--t4) !important;line-height:1.65 !important;color:var(--ink2) !important;font-weight:400 !important} #app #services .card p,#app .val p,#app .crew p,#app .hrow .c,#app .nums span:not([data-count]){font-size:var(--t5) !important;line-height:1.65 !important} #app .cap{font-size:var(--t7) !important;font-weight:400 !important;color:var(--ink3) !important;line-height:1.6 !important} @media (max-width:820px){ :root{--t0:clamp(34px,9vw,48px);--t1:clamp(34px,9.6vw,46px);--t2:clamp(22px,6vw,28px);--t3:20px;--t4:16px;--t5:15px;--t6:12px;--t7:12px} #app .story-message p{font-size:clamp(38px,10vw,56px) !important} } /* ══ 1. Problem: 데이터 · 광고 · 시스템 on white, 하나의 벽 reversed in key colour ══ */ .wall-copy h2 mark, 하나의 벽 reversed in key colour ══ */ .wall-copy h1 mark{padding:0 .12em;margin:0 .02em} .wall-copy h2 mark.wm-w, .wall-copy h1 mark.wm-w{color:#0b0b0d} .wall-copy h2 mark.wm-w::before, .wall-copy h1 mark.wm-w::before{background:#fff !important} .wall-copy h2 mark.wm-w:nth-of-type(2)::before, .wall-copy h1 mark.wm-w:nth-of-type(2)::before{transition-delay:.12s} .wall-copy h2 mark.wm-w:nth-of-type(3)::before, .wall-copy h1 mark.wm-w:nth-of-type(3)::before{transition-delay:.24s} .wall-copy h2 mark.key-mark, .wall-copy h1 mark.key-mark{color:#fff} .wall-copy h2 mark.key-mark::before, .wall-copy h1 mark.key-mark::before{background:#fd4533 !important} .wall-legend{display:none !important} /* ══ 2. Our edge: TO BE clearly louder than AS IS ══ */ .transform-labels>span{color:rgba(255,255,255,.38) !important;font-weight:500} .transform-labels>span small{color:rgba(255,255,255,.32) !important} .transform-labels>strong{color:#fd4533 !important} .transform-labels>strong small{color:rgba(255,255,255,.7) !important} .from-copy{color:rgba(255,255,255,.36) !important;font-size:15px !important;text-decoration-color:rgba(255,255,255,.28) !important} .transform-arrow{color:#fd4533 !important} .flip-slot{padding:0 0 0 26px;border-radius:2px;transition:background .6s ease,box-shadow .6s ease} .transform-row.is-transformed .flip-slot{background:linear-gradient(90deg,rgba(253,69,51,.2),rgba(253,69,51,.06) 55%,transparent 92%);box-shadow:inset 3px 0 0 #fd4533} .transform-row.is-transformed::after{display:none} .to-copy{text-shadow:none !important} /* ══ 3. Your start: numbers inside the card, no bar, no hint, key-colour CTA ══ */ .sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .deck-autobar,.deck-hint{display:none !important} .deck-controls.sr-only{margin:0 !important} .deck-nav{display:inline-flex;align-items:center;gap:10px;font:500 14px/1 var(--en);color:rgba(255,255,255,.55)} .deck-nav small{font:500 12px/1 var(--kr);color:rgba(255,255,255,.45);margin-right:4px} .deck-nav .deck-num b{font-size:22px;font-weight:600;color:#fff;letter-spacing:-.03em} .deck-nav button{all:unset;cursor:pointer;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);color:#fff;font-size:14px;transition:background .25s,border-color .25s} .deck-nav button:hover,.deck-nav button:focus-visible{background:#fd4533;border-color:#fd4533} .deck-nav button:focus-visible{outline:2px solid #fff;outline-offset:2px} .situation-card .btn-fire{background:#fd4533 !important;color:#fff !important;border-color:#fd4533 !important;box-shadow:0 10px 30px -10px rgba(253,69,51,.7)} .situation-card .btn-fire:hover{background:#ff5a47 !important} /* ══ 4. Services: no outlined watermark word behind the cards ══ */ #services .card.glass::before{display:none !important;content:none !important} /* About / brand statements on the same scale */ #app .quit{font-size:var(--t1) !important;line-height:1.02 !important;letter-spacing:-.06em !important} #about .fill{font-size:var(--t2) !important;line-height:1.45 !important} #app .story3 p{font-size:15px !important;line-height:1.65 !important;color:var(--ink2) !important} /* Our edge: the closing caption repeated the headline's sub-copy word for word */ #app .transform-caption{display:none !important} /* v44 · footer company information */ .ft .ft-info p{margin:0;font-size:13px;line-height:1.85;color:rgba(255,255,255,.62)} .ft .ft-info p:first-of-type{margin-top:18px;color:rgba(255,255,255,.85);font-weight:500} .ft .ft-info i{font-style:normal;margin:0 10px;color:rgba(255,255,255,.22)} .ft .ft-info a{color:inherit;text-decoration:none} .ft .ft-info a:hover{color:#fd4533} @media (max-width:820px){.ft .ft-info p{font-size:12px}.ft .ft-info i{margin:0 6px}} .ft .copy,.ft .copy span{text-transform:none !important} .ft .ft-info a{white-space:nowrap} /* v46 · bolder English needs a little more air between letters */ #app .hl h2,#app .quit{letter-spacing:-.042em !important} .hero h1,.hero-copy h1{letter-spacing:-.04em !important} #app .hl h2 .mask{word-spacing:.04em} /* v47 · hero intro: no grey glow block behind the tagline and numbers */ #heroIntro::after,#heroIntro .section-orb,#heroIntro .section-orb::after{display:none !important;background:none !important} #heroIntro{background:transparent !important} #app>#heroIntro.sec.hero-intro{background:linear-gradient(180deg,#17171a 0%,#101012 30%,#0a0a0c 65%,#050506 100%) !important} /* v49 · Services cards: no doubled underlines */ #services .card .feat>div:last-child{border-bottom:0 !important} #services .card .ba{border-bottom:0 !important} /* v50 · Services cards: no texture/pattern — glassmorphism only */ #app #services .card.glass{ background:linear-gradient(155deg,rgba(255,255,255,.085) 0%,rgba(255,255,255,.03) 42%,rgba(255,255,255,.015) 100%) !important; background-color:transparent !important; backdrop-filter:blur(24px) saturate(140%) !important;-webkit-backdrop-filter:blur(24px) saturate(140%) !important; border:1px solid rgba(255,255,255,.11) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 70px -40px rgba(0,0,0,.9) !important} #app #services .card.glass .sheen::after{display:none !important;background:none !important} /* v51 · Services: bright white cards, service name as the hero of each card */ #app #services .card.glass{ background:#f6f5f2 !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important; border:1px solid rgba(0,0,0,.06) !important; box-shadow:0 40px 90px -40px rgba(0,0,0,.85),0 2px 0 rgba(255,255,255,.6) inset !important;color:#1a1a1d !important} #app #services .card.glass::after,#app #services .card.glass::before,#app #services .card .glowc,#app #services .card .sheen{display:none !important} /* service name */ #app #services .card .top .no{color:#fd4533 !important;font-size:20px !important} #app #services .card .top .en2{color:#0b0b0d !important;font-size:clamp(30px,2.9vw,44px) !important;font-weight:800 !important;letter-spacing:-.035em !important;line-height:1.05 !important;display:block} #app #services .card .top .cat{color:#fd4533 !important;font-size:14px !important;font-weight:600 !important;margin-top:8px;display:block} #app #services .card .motion-icon{color:#fd4533 !important} /* copy */ #app #services .card h3,#app #services .card h3 *{color:#1a1a1d !important;-webkit-text-fill-color:#1a1a1d !important;background:none !important} #app #services .card h3{font-size:clamp(21px,1.8vw,26px) !important} #app #services .card p.s{color:#55555b !important} #app #services .card .feat>div{border-color:rgba(0,0,0,.09) !important} #app #services .card .feat b{color:#151517 !important} #app #services .card .feat span{color:#55555b !important} #app #services .card .doc{border-color:rgba(0,0,0,.12) !important} #app #services .card .doc small{color:#7a7a80 !important} #app #services .card .doc b{color:#151517 !important} #app #services .card .doc .ic{border-color:#151517 !important;color:#151517 !important} #app #services .card .doc .ic::before{background:#151517 !important;box-shadow:0 7px 0 #151517,0 14px 0 #151517 !important} /* AS IS → TO BE */ #app #services .card .ba-h .t,#app #services .card .ba-h .t em,#app #services .card .ba-h small,#app #services .card .ba .as,#app #services .card .ba .tb{color:#7a7a80 !important} #app #services .card .ba-h .t .to{color:#151517 !important} #app #services .card .ba .n{color:#2a2a2e !important} #app #services .card .ba .as b{color:#9a9aa0 !important;text-decoration-color:#9a9aa0 !important} #app #services .card .ba .tb>b{color:#0b0b0d !important} #app #services .card .ba .bar{background:rgba(0,0,0,.08) !important} #app #services .card .ba .bar .a{background:rgba(0,0,0,.14) !important} /* price + actions */ #app #services .card .price .sub{color:#55555b !important} #app #services .card .price p.p{color:#0b0b0d !important;font-size:30px !important;font-weight:800 !important;letter-spacing:-.03em} #app #services .card .price p.p small{font-size:15px !important;color:#fd4533 !important;margin-left:2px} #app #services .card .acts .btn-white{background:#0b0b0d !important;color:#fff !important;border-color:#0b0b0d !important} #app #services .card .acts .btn-white *{color:#fff !important} #app #services .card .acts .btn-line{background:transparent !important;color:#0b0b0d !important;border-color:rgba(0,0,0,.25) !important} #app #services .card .acts .btn-line:hover{background:#fd4533 !important;border-color:#fd4533 !important;color:#fff !important} #app #services .card .chips2 span,#app #services .card .chips span{color:#3a3a3f !important;background:rgba(0,0,0,.04) !important;border-color:rgba(0,0,0,.14) !important} /* v52 · roadmap chart: no outer frame — only the three stage dividers stay */ .curve-v19 .gz rect{stroke:none !important} .curve-v19 .gz-div{stroke:rgba(255,255,255,.07);stroke-width:1;fill:none;vector-effect:non-scaling-stroke} /* v53 · Process: number only, flush left; no boxed highlight on the step list */ #app .pstep .step-heading .motion-icon{display:none !important} #app .pstep .step-heading{justify-content:flex-start !important;gap:0 !important;padding-left:0 !important;margin-left:0 !important} #app .pstep .step-heading .big{margin-left:-.05em !important;padding-left:0 !important} #app .rail .rnode,#app .rail .rnode:hover,#app .rail .rnode:focus-visible,#app .rail .rnode.on{background:none !important;border-color:transparent !important;box-shadow:none !important} #app .rail .rnode::before,#app .rail .rnode::after{background:none !important;border-color:transparent !important;box-shadow:none !important} #app .rail .rnode:focus-visible{outline:2px solid #fd4533;outline-offset:4px} /* v54 · section labels: number instead of the red line (01 Problem, 02 Insight …) */ #app{counter-reset:secno} #app .section-index{counter-increment:secno} #app .section-index::before{content:counter(secno,decimal-leading-zero) !important;width:auto !important;height:auto !important; background:none !important;box-shadow:none !important;transform:none !important; font:700 13px/1 var(--en) !important;letter-spacing:.02em;color:#fd4533 !important;flex:none} /* v55 · block stack: cards fall onto empty background — no stage photo, no rounded box, no reset */ #app .physics-block{background:none !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;padding-left:0 !important;padding-right:0 !important} #app .physics-block::before,#app .physics-block::after{display:none !important} #app .physics-reset{display:none !important} #app .physics-tag.t-line{border-color:rgba(255,255,255,.28) !important;border-width:1px !important} #app .physics-heading{padding-left:0 !important;padding-right:0 !important;margin-left:0 !important} /* v56 · one continuous background: no per-section top glow, no seam lines, no Insight blob */ #app>.sec::after,#app>.sec:nth-of-type(even)::after,#app>.sec:nth-of-type(odd)::after{display:none !important;content:none !important;background:none !important} #app>.sec::before{display:none !important} #app>.story-pin{background:transparent !important;border-block:0 !important;border:0 !important} #app>.grow,#app>.grow .grow-in{background:transparent !important;border:0 !important;box-shadow:none !important} #app .section-orb,#app .section-orb::before,#app .section-orb::after{display:none !important} /* v57 · Insight: no orange progress line; sub-slogan sits right under the main slogan */ #app .story-track{display:none !important} #app .story-stage .story-foot{bottom:auto !important;top:calc(50% + clamp(48px,6vw,92px)*1.5 + 18px) !important;left:0;right:0;margin:0 auto;padding:0 var(--pad)} @media (max-width:820px){#app .story-stage .story-foot{top:calc(50% + clamp(38px,10vw,56px)*1.65 + 14px) !important}} /* v59 · one content width for every section: same left/right edge as 01 Problem · 02 Insight (page padding), no centred 1440px cap */ #app .wrap,.ft .wrap{max-width:none !important;margin-left:0 !important;margin-right:0 !important} /* v60 · Values + Promises merged: one row, four columns — value · standard · promise */ #app .vp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.2vw,36px);margin-top:28px} #app .vp-item{position:relative;padding-top:26px;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;gap:12px} #app .vp-item::before{content:'';position:absolute;left:0;top:-1px;height:2px;width:0;background:#fd4533;transition:width .6s cubic-bezier(.2,.7,.1,1)} #app .vp-item:hover::before{width:100%} #app .vp-n{font:700 13px/1 var(--en);color:#fd4533;letter-spacing:.02em} #app .vp-item h4{font-size:var(--t3) !important;font-weight:700;letter-spacing:-.045em;line-height:1.3;margin:2px 0 0;color:#fff} #app .vp-std{font-size:var(--t5) !important;line-height:1.65;color:var(--ink2);margin:0} #app .vp-pr{margin:auto 0 0;padding-top:16px;border-top:1px dashed rgba(255,255,255,.12);font-size:15px;line-height:1.6;color:rgba(255,255,255,.9)} #app .vp-pr em{display:inline-block;font:600 11px/1 var(--kr);font-style:normal;color:#fd4533;border:1px solid rgba(253,69,51,.5);border-radius:999px;padding:4px 8px;margin:0 8px 0 0;vertical-align:2px} @media (max-width:1100px){#app .vp{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}} @media (max-width:620px){#app .vp{grid-template-columns:1fr;row-gap:28px}} /* v61 · pricing: "견적이 달라지는 것 · 계약 조건" is a footnote, not a box */ #app .pvar{background:none !important;border:0 !important;box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;border-radius:0 !important; padding:0 !important;margin-top:22px !important;font-size:13px !important;line-height:1.75 !important;color:var(--ink3) !important;font-weight:400 !important} #app .pvar::before,#app .pvar::after{display:none !important} #app .pvar b{font-weight:600 !important;color:var(--ink2) !important;margin-right:8px;font-size:13px !important} /* v62 · floating dock: one glass capsule, three equal round buttons, labels as hover tooltips */ .fdock{gap:6px !important;padding:6px !important;align-items:center !important;border-radius:999px; background:rgba(16,16,19,.55);border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%); box-shadow:0 18px 40px -18px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06)} .fdock .fd-btn,.fdock .fd-ai{position:relative;width:44px !important;min-width:44px !important;height:44px !important;padding:0 !important;gap:0 !important;border-radius:50% !important; background:transparent !important;border:0 !important;box-shadow:none !important;color:#e9e9ec;transform:none !important;transition:background .25s,color .25s} .fdock .fd-btn:hover,.fdock .fd-btn[aria-expanded="true"]{background:rgba(255,255,255,.1) !important;color:#fff} .fdock .fd-ai{background:#fd4533 !important;color:#fff !important} .fdock .fd-ai:hover{background:#ff5a47 !important} .fdock .fd-ai small{font:700 13px/1 var(--en) !important;letter-spacing:.02em !important;opacity:1 !important} .fdock .fd-ai>span[aria-hidden]{display:none !important} .fdock .fd-btn svg{width:19px !important;height:19px !important} .fdock .fd-top{font-size:17px !important} .fdock .fd-docs{display:flex} /* tooltip labels */ .fdock .fd-label{position:absolute !important;right:calc(100% + 14px);top:50%;transform:translate(6px,-50%);white-space:nowrap; font:500 12px/1 var(--kr) !important;color:#fff;background:rgba(16,16,19,.92);border:1px solid rgba(255,255,255,.12);padding:8px 11px;border-radius:8px; opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;display:block !important} .fdock .fd-btn:hover .fd-label,.fdock .fd-ai:hover .fd-label,.fdock .fd-btn:focus-visible .fd-label,.fdock .fd-ai:focus-visible .fd-label{opacity:1;transform:translate(0,-50%)} .fdock .fd-btn[aria-expanded="true"] .fd-label{opacity:0} .fdock .fd-top::after{content:'맨 위로';position:absolute;right:calc(100% + 14px);top:50%;transform:translate(6px,-50%);white-space:nowrap;font:500 12px/1 var(--kr);color:#fff; background:rgba(16,16,19,.92);border:1px solid rgba(255,255,255,.12);padding:8px 11px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s} .fdock .fd-top:hover::after,.fdock .fd-top:focus-visible::after{opacity:1;transform:translate(0,-50%)} .fdock .fd-menu{right:calc(100% + 16px) !important;bottom:-6px !important} @media (max-width:820px){.fdock{padding:5px !important;gap:4px !important}.fdock .fd-btn,.fdock .fd-ai{width:40px !important;min-width:40px !important;height:40px !important}.fdock .fd-label,.fdock .fd-top::after{display:none !important}} /* v63 · Services: bigger service name, one-line copy, all AS IS → TO BE rows, key-colour TO BE number */ #app #services .card .top .en2{font-size:clamp(38px,4.1vw,64px) !important;line-height:1 !important;letter-spacing:-.04em !important} #app #services .card .top .cat{font-size:15px !important;margin-top:12px !important} #app #services .card .top{align-items:flex-start} #app #services .card .feat>div{padding:14px 0 !important} #app #services .card .feat b{font-size:17px !important} #app #services .card .ba-h .t,#app #services .card .ba-h small{font-size:12px !important} #app #services .card .ba{padding:16px 0 !important} #app #services .card .ba .n{font-size:15px !important;margin-bottom:8px} #app #services .card .ba .tb>b{color:#fd4533 !important;font-weight:800 !important} #app #services .card .ba .tb>b>small{color:#151517 !important;font-size:14px !important;font-weight:700 !important;margin-left:4px} #app #services .card .ba .tb>b>small{color:#151517 !important} #app #services .card .ba .tb:not(.txt)>b{font-size:52px !important} #app #services .card .ba .tb.txt>b{font-size:30px !important} /* v64 · Service cards, refined: clear header, numbered features, calm comparison grid, aligned footer */ #app #services .stack{gap:28px} #app #services .card{padding:clamp(28px,3vw,48px) !important;border-radius:26px !important;transition:transform .5s cubic-bezier(.2,.7,.1,1),box-shadow .5s !important} #app #services .card:hover{transform:translateY(-4px) !important;box-shadow:0 50px 100px -40px rgba(0,0,0,.9) !important} /* header: icon | number+name stacked, one clear block */ #app #services .card .top{display:grid !important;grid-template-columns:auto 1fr;column-gap:18px;row-gap:6px;align-items:center;margin-bottom:26px} #app #services .card .top>svg,#app #services .card .top>.motion-icon{grid-row:1 / span 2;width:56px;height:56px} #app #services .card .top>.no{display:inline-flex;align-items:center;justify-content:center;width:auto;height:auto;padding:5px 11px;border-radius:999px;background:#151517;color:#fff !important;font:700 12px/1 var(--en) !important;letter-spacing:.06em;justify-self:start} #app #services .card .top>span:last-child{display:flex;flex-direction:column;gap:8px} #app #services .card .top .en2{font-size:clamp(34px,3.6vw,56px) !important;font-weight:800 !important;letter-spacing:-.04em !important;line-height:1.02 !important} #app #services .card .top .cat{margin-top:0 !important;font-size:14px !important;letter-spacing:.01em} /* left column rhythm */ #app #services .card h3{margin-top:0 !important;font-size:clamp(22px,2vw,28px) !important;line-height:1.35 !important;letter-spacing:-.04em !important} #app #services .card p.s{font-size:15px !important;line-height:1.7 !important;margin:12px 0 26px !important} #app #services .card .feat{counter-reset:f;border-top:1px solid rgba(0,0,0,.1)} #app #services .card .feat>div{display:flex !important;align-items:center;gap:14px;padding:16px 0 !important;border-bottom:1px solid rgba(0,0,0,.08) !important;counter-increment:f} #app #services .card .feat>div::before{content:counter(f,decimal-leading-zero);font:700 12px/1 var(--en);color:#fd4533;min-width:22px} #app #services .card .feat b{font-size:16px !important;font-weight:700 !important;color:#151517 !important} #app #services .card .doc{margin-top:26px !important;padding:16px 18px !important;border-radius:16px;background:#fff;border:1px solid rgba(0,0,0,.08) !important;box-shadow:0 10px 24px -18px rgba(0,0,0,.5)} #app #services .card .doc .ic{width:40px !important;height:40px !important} /* right column: comparison grid */ #app #services .card .col2{padding-left:clamp(20px,3vw,48px);border-left:1px solid rgba(0,0,0,.08)} #app #services .card .ba-h{margin-bottom:6px} #app #services .card .ba{display:grid !important;grid-template-columns:1fr;row-gap:6px;padding:18px 0 !important;border-bottom:1px solid rgba(0,0,0,.08)} #app #services .card .ba .n{margin:0 !important;font-size:14px !important;font-weight:600 !important;color:#2a2a2e !important} #app #services .card .ba .v{display:grid !important;grid-template-columns:1fr auto 1fr;align-items:end;gap:10px} #app #services .card .ba .as{text-align:left} #app #services .card .ba .as b{font-size:22px !important} #app #services .card .ba .ar2{align-self:center;justify-self:center} #app #services .card .ba .tb{text-align:right} #app #services .card .ba .tb>b{font-size:44px !important;line-height:1 !important;display:inline-flex;align-items:baseline;justify-content:flex-end;gap:2px} #app #services .card .ba .tb:not(.txt)>b{font-size:44px !important} #app #services .card .ba .tb.txt>b{font-size:26px !important} #app #services .card .ba .bar{margin-top:4px} /* footer: price left, actions right, one baseline */ #app #services .card .price{display:flex !important;justify-content:space-between;align-items:flex-end;gap:20px;margin-top:26px;padding-top:24px;border-top:1px solid rgba(0,0,0,.1)} #app #services .card .price>div:first-child{display:flex;flex-direction:column;gap:4px} #app #services .card .price .acts{display:flex;gap:10px} #app #services .card .price .acts .btn{height:50px;padding:0 22px} @media (max-width:1100px){#app #services .card .col2{padding-left:0;border-left:0;margin-top:28px}} @media (max-width:620px){#app #services .card .ba .v{grid-template-columns:1fr auto 1fr}#app #services .card .ba .tb>b{font-size:34px !important}#app #services .card .price{flex-direction:column;align-items:stretch}#app #services .card .price .acts .btn{flex:1;justify-content:center}} /* v64 · TO BE: label above, number right-aligned under it, unit on the baseline */ #app #services .card .ba .tb{display:flex !important;flex-direction:column !important;align-items:flex-end !important;gap:2px} #app #services .card .ba .tb>b{align-items:baseline} #app #services .card .ba .tb>b>small{font-size:15px !important;line-height:1 !important;margin:0 0 0 4px !important} /* v65 · Our Edge TO BE: no background tint, no left line — emphasis is the key colour alone */ #app .transform-row.is-transformed .flip-slot,#app .flip-slot{background:none !important;box-shadow:none !important;border:0 !important;padding-left:0 !important} #app .transform-row::after,#app .transform-row.is-transformed::after{display:none !important;background:none !important} #app .transform-row .to-copy{color:#fd4533 !important;text-shadow:none !important} /* v66 · Planning Formula: no container box, no card chrome — pure typography on the page background */ #app .f2{background:none !important;border:0 !important;border-radius:0 !important;padding:0 !important;box-shadow:none !important;margin-top:96px !important} #app .f2-head{padding-bottom:28px;margin-bottom:34px !important} #app .f2-head .tag{color:#fd4533 !important} #app .f2-hint{font-size:var(--t4) !important;color:var(--ink2) !important} #app .f2-grid{grid-template-columns:minmax(0,1.1fr) 170px minmax(0,1fr) !important;align-items:center;column-gap:clamp(10px,2vw,32px)} #app .f2-stack{gap:0 !important} #app .f2-in,#app .f2-in:nth-child(odd),#app .f2-in:nth-child(even){margin:0 !important;background:none !important;border:0 !important;box-shadow:none !important;border-radius:0 !important; padding:18px 0 !important;grid-template-columns:30px minmax(150px,auto) minmax(0,1fr) !important;gap:14px !important} #app .f2-in b{font-size:clamp(28px,2.6vw,40px) !important;font-weight:800 !important;letter-spacing:-.04em !important;line-height:1} #app .f2-op{font-size:26px !important;color:#fd4533 !important} #app .f2-l{font-size:var(--t5) !important;color:var(--ink2) !important} #app .f2-in.hl{background:none !important;border:0 !important} /* connectors: lighter, so the numbers lead */ #app .f2-beam path{stroke:rgba(253,69,51,.38) !important;stroke-width:1.2 !important} /* AI core: calm glow, thinner ring */ #app .f2-core{box-shadow:0 0 0 6px rgba(253,69,51,.08),0 0 36px rgba(253,69,51,.28) !important} #app .f2-ring{border-width:1px !important;border-color:rgba(253,69,51,.35) !important} /* result: the single filled element, glow toned down */ #app .f2-res{box-shadow:0 24px 60px -34px rgba(253,69,51,.5) !important;border-radius:18px !important} @media (max-width:820px){#app .f2-grid{grid-template-columns:1fr !important}#app .f2-in,#app .f2-in:nth-child(n){grid-template-columns:22px 88px minmax(0,1fr) !important;padding:12px 0 !important}#app .f2-in b{font-size:22px !important}} /* v67 · FAQ — stacked cards that fill with the key colour when opened (reference: plan-et.co.kr) */ #app .faq{display:flex !important;flex-direction:column;gap:14px !important;border:0 !important;margin-top:56px} #app .faq details,#app .faq details.glass{position:relative;isolation:isolate;overflow:hidden;padding:0 !important;margin:0 !important;border:0 !important;border-radius:18px !important; background:rgba(255,255,255,.055) !important;backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%); box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important; translate:calc(var(--pull-x,0)*1px) calc(var(--pull-y,0)*1px); transition:background-color .38s,box-shadow .38s,opacity .7s calc(var(--i,0)*70ms),transform .9s cubic-bezier(.2,.7,.1,1) calc(var(--i,0)*70ms) !important} #app .faq details::before,#app .faq details::after,#app .faq details>.sheen{display:none !important} #app .faq details.is-expanded{background:#fd4533 !important;box-shadow:0 30px 70px -36px rgba(253,69,51,.6) !important} #app .faq summary{display:grid !important;grid-template-columns:48px minmax(0,1fr) 40px !important;align-items:center;gap:6px;padding:28px clamp(22px,2.6vw,40px) !important;cursor:pointer; font-size:clamp(18px,1.6vw,22px) !important;font-weight:700 !important;letter-spacing:-.04em !important;color:rgba(255,255,255,.92) !important;transition:color .35s} #app .faq summary .n{font:700 13px/1 var(--en) !important;color:#fd4533 !important;letter-spacing:.04em;transition:color .35s} #app .faq details.is-expanded summary,#app .faq details.is-expanded summary .n{color:#fff !important} /* plus → minus: the vertical bar shrinks away while the icon turns with a spring */ #app .faq summary::after{content:'' !important;justify-self:end;width:36px !important;height:36px !important;border:0 !important;border-radius:50% !important;font-size:0 !important;transform:translate(var(--ic-x,0px),var(--ic-y,0px)) rotate(0) !important; background:linear-gradient(#fff,#fff) center/14px 2px no-repeat,linear-gradient(#fff,#fff) center/2px 14px no-repeat,rgba(253,69,51,.9) !important; transition:background-size .45s cubic-bezier(.34,1.56,.64,1),background-color .35s,transform .5s cubic-bezier(.34,1.56,.64,1) !important} #app .faq details.is-expanded summary::after{background:linear-gradient(#fd4533,#fd4533) center/14px 2px no-repeat,linear-gradient(#fd4533,#fd4533) center/2px 0 no-repeat,#fff !important;transform:translate(var(--ic-x,0px),var(--ic-y,0px)) rotate(180deg) !important} #app .faq details p{margin:-4px 0 0 !important;padding:0 clamp(22px,2.6vw,40px) 30px calc(clamp(22px,2.6vw,40px) + 54px) !important;max-width:none !important; font-size:17px !important;line-height:1.75 !important;color:rgba(255,255,255,.9) !important} @media (hover:hover){ #app .faq details:not(.is-expanded):hover{background:rgba(255,255,255,.09) !important;box-shadow:0 22px 50px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.1) !important} #app .faq details:not(.is-expanded):hover summary{color:#fd4533 !important} } #app .faq summary:focus-visible{outline:2px solid #fff;outline-offset:-4px;border-radius:18px} @media (max-width:620px){#app .faq summary{grid-template-columns:34px minmax(0,1fr) 34px !important;padding:20px 18px !important;font-size:16px !important}#app .faq details p{padding:0 18px 22px 52px !important;font-size:15px !important}#app .faq summary::after{width:30px !important;height:30px !important}} @media (prefers-reduced-motion:reduce){#app .faq details{translate:none !important}} /* v68 · intro strip now leads into Services (not the dark wall): fade out to the page background */ #app>#heroIntro.sec.hero-intro{background:linear-gradient(180deg,#17171a 0%,rgba(23,23,26,0) 100%) !important} /* v69 · Insight: market numbers as a quiet footnote row under the sub-slogan */ #app .story-stats{position:absolute;left:0;right:0;bottom:clamp(40px,7vh,80px);display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(28px,5vw,80px);padding:0 var(--pad);z-index:2} #app .story-stats>div{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:150px} #app .story-stats b{font:700 clamp(26px,2.4vw,36px)/1 var(--en);color:#fff;letter-spacing:-.03em} #app .story-stats b small{font-size:.55em;color:#fd4533;margin-left:2px} #app .story-stats span{font-size:13px;color:var(--ink3)} #app .story-stats p{flex-basis:100%;text-align:center;margin:0;font-size:11px;color:rgba(255,255,255,.3)} @media (max-width:820px){#app .story-stats{position:static;margin-top:36px;gap:22px}#app .story-stats>div{min-width:0}} #app .story-stats{bottom:auto !important;top:calc(50% + clamp(48px,6vw,92px)*1.5 + 120px) !important;row-gap:10px} #app .story-stats>div{gap:4px} #app .story-stats b{font-size:clamp(24px,2vw,30px) !important} #app .story-stats span{font-size:12px} #app .story-stats p{margin-top:4px} #app .story-stage .story-message{padding-bottom:calc(100px + 12vh) !important} #app .story-stage .story-foot{top:calc(50% - 6vh + clamp(48px,6vw,92px)*1.5 + 18px) !important} #app .story-stats{top:calc(50% - 6vh + clamp(48px,6vw,92px)*1.5 + 120px) !important} @media (max-width:820px){#app .story-stage .story-message{padding-bottom:30px !important}#app .story-stats{top:auto !important}} @media (max-width:820px){ #app .story-stage .story-message{padding-bottom:90px !important} #app .story-stage .story-foot{top:calc(50% + clamp(38px,10vw,56px)*1.65 + 14px) !important} #app .story-stats{position:absolute !important;top:calc(50% + clamp(38px,10vw,56px)*1.65 + 104px) !important;margin:0 !important;gap:14px 18px !important} #app .story-stats>div{min-width:0;flex:1 1 28%} #app .story-stats span{font-size:11px;text-align:center} }