/* H.AI Studio — clickable redesign prototype, desktop + mobile */
:root{--ink:#191919;--muted:#686868;--red:#bd2026;--red-deep:#a71820;--line:#e9e8e6;--paper:#fff;--soft:#f8f8f7;--radius:20px;--shadow:0 16px 55px rgba(20,20,20,.055);--wrap:1160px}
*{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:98px}body{margin:0;background:var(--paper);font-family:'Manrope','Pretendard','Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;font-size:16px} a{text-decoration:none;color:inherit}button,input,textarea,select{font:inherit}button{cursor:pointer}img{max-width:100%;height:auto}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #d95454;outline-offset:3px} [hidden]{display:none!important}
.container{width:min(var(--wrap),calc(100% - 88px));margin:auto}.eyebrow{font-size:12px;letter-spacing:.21em;font-weight:800;color:var(--red);text-transform:uppercase}.muted{color:var(--muted)}.red{color:var(--red)}
.site-header{height:94px;border-bottom:1px solid #efeeed;background:rgba(255,255,255,.965);position:sticky;top:0;z-index:30;backdrop-filter:blur(12px)}.nav-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:32px}.brand{display:flex;align-items:center;gap:13px;flex:none;min-width:140px}.brand img{height:72px;width:auto;object-fit:contain}.brand-name{font-size:18px;font-weight:850;letter-spacing:-.04em}.top-nav{display:flex;align-items:center;justify-content:flex-end;gap:27px;flex:1}.top-nav a{font-weight:650;font-size:14px;color:#373737;transition:color .2s;white-space:nowrap;position:relative}.top-nav a:hover,.top-nav a.active{color:var(--red)}.top-nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:-13px;height:2px;background:var(--red)}.lang-buttons{display:flex;align-items:center;flex:none;gap:2px;padding:3px;border:1px solid #eae8e6;border-radius:12px;background:#fafafa}.lang-buttons button{border:0;background:transparent;border-radius:9px;color:#8b8b8b;font-size:11px;font-weight:850;padding:8px 9px}.lang-buttons button.active{background:#202020;color:white}.menu-button{display:none;border:1px solid var(--line);background:white;border-radius:10px;padding:10px;align-items:center;justify-content:center;flex:none}.menu-button svg{width:21px;height:21px}
.hero{min-height:674px;display:flex;align-items:center;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:#eee}.hero-grid{display:grid;grid-template-columns:1.14fr .86fr;gap:54px;align-items:center;padding:70px 0 75px}.hero-copy{position:relative;z-index:1}.hero h1{font-weight:850;letter-spacing:-.075em;font-size:clamp(50px,5.5vw,78px);line-height:1.25;margin:22px 0 28px;word-break:keep-all}.hero-sub{font-size:20px;line-height:1.75;letter-spacing:-.033em;color:#545454;font-weight:500;margin:0 0 37px}.hero-buttons{display:flex;gap:12px;flex-wrap:wrap}.btn{border:1px solid #dedbd8;padding:14px 24px;display:inline-flex;align-items:center;gap:13px;justify-content:center;border-radius:11px;background:#fff;font-weight:750;font-size:14px;transition:transform .22s,background .2s,border-color .2s;white-space:nowrap}.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--ink);border-color:var(--ink);color:#fff}.btn-primary:hover{background:var(--red);border-color:var(--red)}.btn-outline{border-color:var(--red);color:var(--red)}.btn-outline:hover{background:#fff7f7}.arrow{display:inline-block;transition:transform .2s}.btn:hover .arrow{transform:translateX(3px)}.hero-art{display:flex;justify-content:center;align-items:center;position:relative}.hero-art img{width:min(100%,328px);max-height:392px;object-fit:contain;filter:drop-shadow(0 9px 16px rgba(0,0,0,.018))}.hero-side-note{position:absolute;bottom:5px;right:20px;letter-spacing:.18em;color:#adadad;font-size:10px;font-weight:700}.anchor-tabs{background:#fff;box-shadow:0 10px 35px rgba(15,15,15,.03)}.anchor-inner{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}.anchor-inner>a{padding:21px 10px;text-align:center;font-size:12px;font-weight:800;letter-spacing:.03em;border-right:1px solid var(--line);transition:color .2s}.anchor-inner>a:last-child{border-right:0}.anchor-inner>a:hover{color:var(--red)}
.section{padding:105px 0}.section-top{margin-bottom:52px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}.section h2{font-size:clamp(32px,3.3vw,48px);letter-spacing:-.055em;line-height:1.33;margin:14px 0 0;word-break:keep-all}.section-summary{color:#686868;line-height:1.85;font-size:15px;max-width:450px;margin:0}.services{border-top:1px solid var(--ink)}.service{border-bottom:1px solid #e7e6e4}.service-toggle{display:grid;grid-template-columns:72px 1fr minmax(250px,410px) 44px;align-items:center;gap:16px;text-align:left;width:100%;border:0;background:transparent;padding:27px 12px 27px 0;color:inherit}.service-num{font-size:12px;color:#b1b1b1;letter-spacing:.1em}.service-title{font-size:25px;font-weight:760;letter-spacing:-.045em}.service-short{font-size:14px;color:#777;line-height:1.65}.service-plus{width:38px;height:38px;border:1px solid #dedede;border-radius:50%;display:grid;place-items:center;font-size:26px;font-weight:300;transition:transform .25s,background .25s;line-height:1}.service-toggle[aria-expanded="true"] .service-plus{transform:rotate(45deg);background:#f9e9e9;color:var(--red);border-color:#f1dada}.service-detail{padding:0 65px 30px 88px;color:#696969;line-height:1.9;max-width:860px;font-size:14px}.service-detail strong{color:#222}
.examples{background:var(--soft)}.examples-grid{display:grid;grid-template-columns:330px 1fr;gap:22px}.example-nav{display:flex;flex-direction:column;gap:10px}.example-nav button{text-align:left;border:1px solid var(--line);background:white;padding:22px 22px;border-radius:13px;color:#222;font-weight:740;font-size:16px;display:flex;justify-content:space-between;gap:15px;align-items:center;transition:border-color .25s,background .25s}.example-nav button.active{border-color:#dfb2b5;background:#fff9f9;color:var(--red);box-shadow:0 4px 18px rgba(175,24,32,.035)}.example-nav small{display:block;font-size:12px;font-weight:450;color:#8d8d8d;margin-top:7px}.example-pane{background:#fff;border:1px solid #e9e8e6;border-radius:18px;padding:30px 34px;box-shadow:var(--shadow);min-height:400px}.example-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.example-head strong{font-size:18px}.demo-label{border:1px solid #eee0e0;background:#fff7f7;color:#ad3333;border-radius:30px;padding:6px 11px;font-size:11px;font-weight:750}.mini-table{width:100%;border-collapse:collapse;font-size:13px}.mini-table th{background:#fafafa;text-align:left;font-size:11px;color:#999;font-weight:650}.mini-table td,.mini-table th{padding:15px 13px;border-bottom:1px solid #f0f0f0}.mini-table td:last-child{color:var(--red);font-weight:750}.example-foot{font-size:12px;color:#969696;margin:22px 0 0}.bar-row{display:grid;grid-template-columns:65px 1fr 60px;align-items:center;gap:15px;font-size:12px;color:#666;margin-bottom:21px}.bar-track{height:13px;background:#f0f0ef;border-radius:5px;overflow:hidden}.bar-fill{display:block;height:100%;background:#242424;border-radius:5px;transition:width .3s}.bar-row:nth-child(3) .bar-fill{background:var(--red)}.bar-val{text-align:right;font-weight:780;color:#262626}.calc-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:22px}.calc-fields label{font-size:12px;color:#7a7a7a;display:block}.calc-fields input{display:block;margin-top:9px;width:100%;background:#fff;border:1px solid #dedede;border-radius:9px;padding:13px 14px;font-weight:730;color:#242424}.calc-output{border-radius:12px;padding:22px 24px;background:#f8f8f7;display:flex;align-items:center;justify-content:space-between;gap:12px}.calc-output strong{font-size:28px;letter-spacing:-.045em}.calc-output span{font-size:13px;color:#6c6c6c}
.process{background:#181818;color:#fff}.process .eyebrow{color:#e7999d}.process .section-summary{color:#b4b4b4}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}.step{padding:26px 22px 30px 0;border-top:1px solid #777}.step .index{font-size:12px;color:#c75a60;letter-spacing:.1em;font-weight:800}.step h3{font-size:21px;letter-spacing:-.035em;margin:24px 0 14px}.step p{font-size:13px;color:#bdbdbd;line-height:1.85;margin:0}
.studio-panel{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:90px}.studio-panel .quote{font-size:30px;font-weight:750;letter-spacing:-.045em;line-height:1.65;margin:25px 0}.founder-card{padding:38px 40px;background:#f8f8f7;border-radius:17px}.founder-card .name{font-size:28px;font-weight:770;letter-spacing:-.045em}.founder-card .job{font-size:14px;color:var(--red);font-weight:730;margin:7px 0 24px}.founder-card p{font-size:14px;color:#646464;line-height:1.9}.text-link{color:var(--red);font-size:13px;font-weight:790;text-decoration:underline;text-underline-offset:5px}.contact-section{padding-bottom:125px}.contact-band{border-radius:24px;background:#f8f7f5;display:flex;align-items:center;justify-content:space-between;gap:35px;padding:62px 70px}.contact-band h2{font-size:38px;margin:0 0 16px;letter-spacing:-.055em}.contact-band p{margin:0;color:#686868;font-size:15px;line-height:1.8}.site-footer{border-top:1px solid #e9e9e9;padding:32px 0 45px}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}.footer-inner p{font-size:12px;color:#999;margin:0}.footer-brand{font-weight:790;font-size:14px;color:#666}
.footer-contact{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right;min-width:0}.footer-contact .footer-domain{font-size:12px;color:#999}.footer-email{font-size:12px;color:#555;overflow-wrap:anywhere;transition:color .2s}.footer-email:hover{color:var(--red)}

.greeting-page{padding:76px 0 120px;min-height:calc(100vh - 160px)}.breadcrumb{font-size:12px;letter-spacing:.08em;color:#9b9b9b;margin-bottom:39px}.breadcrumb span{color:var(--red)}.greeting-header h1{font-size:clamp(44px,4vw,60px);letter-spacing:-.06em;margin:10px 0 12px}.greeting-header .intro{font-size:14px;color:#909090;margin:0}.greeting-rule{width:42px;height:3px;background:var(--red);margin:25px 0 42px}.greeting-grid{display:grid;grid-template-columns:minmax(0,640px) minmax(0,1fr);gap:30px;align-items:start}.letter{font-size:16px;line-height:2.05;color:#343434;letter-spacing:-.018em}.letter p{margin:0 0 24px;word-break:keep-all}.letter .blessing{color:#202020;font-size:18px;font-weight:730;border-left:3px solid var(--red);padding:0 0 0 20px;line-height:1.95;margin-bottom:37px}.letter .signature{margin-top:42px;padding-top:8px;font-size:15px;color:#414141;line-height:1.95}.letter .signature strong{color:#242424}.glider-column{position:sticky;top:130px;padding-top:8px;min-width:0}.glider-image{width:100%;max-width:575px;display:block;margin:0 auto;object-fit:contain;background:transparent;animation:float 5.4s ease-in-out infinite}.glider-caption{font-size:11px;color:#989898;letter-spacing:.1em;text-align:center;margin-top:-6px}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
/* contact preview: no external backend or fake delivery confirmation */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.58);display:grid;place-items:center;z-index:100;padding:20px}.modal{width:min(530px,100%);background:#fff;border-radius:18px;padding:31px;position:relative;box-shadow:0 25px 90px rgba(0,0,0,.2);max-height:95vh;overflow:auto}.modal h2{font-size:27px;margin:0 0 8px;letter-spacing:-.04em}.modal p{font-size:13px;line-height:1.7;color:#888;margin:0 0 20px}.modal-close{position:absolute;right:19px;top:17px;border:0;background:#f3f3f3;border-radius:50%;width:33px;height:33px;font-size:20px}.form-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-fields label{display:block;font-size:12px;color:#555;font-weight:730;margin-bottom:12px}.form-fields input,.form-fields textarea,.form-fields select{display:block;width:100%;margin-top:7px;border:1px solid #e4e4e4;border-radius:8px;padding:11px 13px;color:#333;background:#fff;font-size:13px}.form-fields .full{grid-column:1/-1}.form-fields textarea{min-height:100px;resize:vertical}.modal .btn{margin-top:12px;width:100%}.form-note{background:#faf4f4;color:#9b4e4e;border-radius:8px;padding:11px 13px;margin-top:16px;font-size:12px;line-height:1.65}.form-note:empty{display:none}
@media(max-width:1020px){.container{width:min(var(--wrap),calc(100% - 48px))}.top-nav{gap:15px}.top-nav a{font-size:13px}.brand-name{display:none}.hero-grid{gap:18px}.hero h1{font-size:60px}.examples-grid{grid-template-columns:260px 1fr}.service-toggle{grid-template-columns:52px 1fr minmax(180px,260px) 38px}.studio-panel{gap:40px}.contact-band{padding:46px}}
@media(max-width:760px){html{scroll-padding-top:75px}.container{width:calc(100% - 40px)}.site-header{height:75px}.brand{min-width:0}.brand img{height:59px}.menu-button{display:flex;margin-left:auto}.lang-buttons{margin-left:auto}.top-nav{display:none;position:absolute;left:0;right:0;top:75px;flex-direction:column;align-items:stretch;gap:0;background:white;border-bottom:1px solid var(--line);padding:7px 20px 18px;box-shadow:0 18px 35px rgba(0,0,0,.065)}.top-nav.open{display:flex}.top-nav a{font-size:15px;padding:14px 3px;border-bottom:1px solid #f3f3f3}.top-nav a.active:after{display:none}.lang-buttons{order:1}.menu-button{order:2;margin-left:0}.hero{min-height:0}.hero-grid{display:flex;flex-direction:column;align-items:stretch;padding:59px 0 56px;gap:38px}.hero h1{font-size:clamp(42px,9.1vw,59px);margin:15px 0 17px;letter-spacing:-.07em;line-height:1.31}.hero-sub{font-size:16px;margin-bottom:28px}.hero-art{min-height:250px}.hero-art img{width:min(57.6%,248px);max-height:272px}.hero-side-note{right:0}.btn{font-size:13px;padding:13px 18px}.anchor-inner>a{font-size:11px;padding:17px 5px}.section{padding:73px 0}.section-top{display:block;margin-bottom:33px}.section h2{font-size:33px}.section-summary{margin-top:18px}.service-toggle{grid-template-columns:39px 1fr 30px;gap:5px;padding:24px 0}.service-num{font-size:11px}.service-title{font-size:21px}.service-short{display:none}.service-plus{width:30px;height:30px;font-size:21px}.service-detail{padding:0 10px 24px 40px;font-size:13px}.examples-grid{display:block}.example-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:13px}.example-nav button{font-size:12px;padding:13px 9px;display:block;text-align:center;border-radius:9px}.example-nav button>span{display:none}.example-nav small{display:none}.example-pane{padding:23px 16px;min-height:350px}.example-head strong{font-size:15px}.mini-table td,.mini-table th{padding:12px 5px;font-size:11px}.steps{grid-template-columns:repeat(2,1fr);gap:22px}.step h3{font-size:19px}.studio-panel{grid-template-columns:1fr;gap:20px}.studio-panel .quote{font-size:26px}.founder-card{padding:25px 28px}.contact-band{padding:35px 25px;display:block}.contact-band h2{font-size:29px}.contact-band .btn{margin-top:27px}.site-footer{padding:25px 0}.footer-inner{display:block}.footer-inner p{margin-top:10px}.greeting-page{padding:43px 0 80px}.breadcrumb{margin-bottom:28px}.greeting-header h1{font-size:40px}.greeting-rule{margin-bottom:14px}.greeting-grid{display:flex;flex-direction:column;gap:26px}.glider-column{order:0;position:static;align-self:center;width:100%;padding:0}.glider-image{max-width:430px}.glider-caption{font-size:10px;margin-top:-8px}.letter{order:1;font-size:14px;line-height:2.06}.letter p{margin-bottom:22px}.letter .blessing{font-size:16px;margin-bottom:28px}.letter .signature{font-size:14px}.form-fields{grid-template-columns:1fr}.modal{padding:26px 20px}}
@media(max-width:390px){.container{width:calc(100% - 30px)}.hero h1{font-size:39px}.hero-buttons{gap:8px}.btn{padding:12px 14px}.anchor-inner>a{font-size:10px}.glider-caption{margin-top:-22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.glider-image{animation:none}*{transition:none!important}}

@media(max-width:760px){.footer-contact{margin-top:18px;align-items:flex-end;text-align:right}.footer-email{font-size:12px}}