/* Emotionography company homepage — "Spine"
Brand CI is fixed (brand direction, 2026-03): purple #9880FF, deep navy #1A1A2E,
warm cream #FAF7F2, soft stone #F5F3F0, mist violet #E8DFF5, soft lavender #C4B5FD,
Gotham + Nanum Gothic. No yellow anywhere, including hover and focus.
Scoped to the company home only; /professional/ keeps assets/styles.css untouched. */
@font-face{font-family:"Gotham";src:url("/assets/fonts/gotham-book.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Gotham";src:url("/assets/fonts/gotham-medium.woff2") format("woff2");font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:"Nanum Gothic";src:url("/assets/fonts/nanum-gothic-regular.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Nanum Gothic";src:url("/assets/fonts/nanum-gothic-bold.woff2") format("woff2");font-style:normal;font-weight:700;font-display:swap}
:root{
--purple:#9880ff; --purple-deep:#6344e0;
--navy:#262633; /* 어두운 면·괘선·버튼. 순검정 대신 진회색 */
--ink:#33333f; /* 제목 */
--charcoal:#52525d; /* 본문 */
--cream:#faf7f2; --stone:#f5f3f0; --mist:#e8dff5; --lavender:#c4b5fd;
--hair:rgba(26,26,46,.12);
--sans:"Gotham","Nanum Gothic",system-ui,-apple-system,sans-serif;
--rail:clamp(3.5rem,11vw,10rem);
/* one vertical rhythm for the whole page */
--gap-label:.75rem; /* 라벨 → 제목 (붙어 있어야 한 덩어리로 읽힘) */
--gap-lead:1.75rem; /* 제목 → 본문 */
--gap-block:3.1rem; /* 본문 → 목록·그리드 */
--gap-item:5.75rem; /* 단계 사이 */
--pad-section:clamp(6rem,8.5vw,9.5rem); /* vh 금지: 창 높이에 여백이 따라 움직인다 */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--charcoal);font-family:var(--sans);
line-height:1.78;letter-spacing:-.008em;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:600;color:var(--ink);letter-spacing:-.022em;line-height:1.16}
/* 큰 제목은 크기가 위계를 만든다. 굵기까지 얹으면 글자가 먹덩어리가 된다 */
h1,h2{font-weight:400}
:lang(ko) h1,:lang(ko) h2,:lang(ko) h3{letter-spacing:-.028em;line-height:1.32;word-break:keep-all}
:lang(ko) h3{font-weight:700}
p{margin:0}
:lang(ko) p,:lang(ko) li{word-break:keep-all}
p{text-wrap:pretty} /* 마지막 줄에 한 단어만 남는 것을 막는다 */
html[lang="en"] h1,html[lang="en"] h2{text-wrap:balance} /* 영문은
없이 균형 배분 */
:lang(ko) h2{text-wrap:pretty} /* 마지막 줄에 서술어만 남는 것을 막는다 */
ul{margin:0;padding:0;list-style:none}
figure{margin:0}
.skip-link{position:fixed;top:-90px;left:18px;z-index:300;padding:11px 16px;
background:var(--navy);color:var(--cream);text-decoration:none;border-radius:4px}
.skip-link:focus{top:18px}
/* ---------- the spine ---------- */
.page{position:relative}
.spine{position:absolute;top:0;bottom:0;left:calc(var(--rail) / 2);width:120px;
transform:translateX(-50%);pointer-events:none;z-index:0}
.spine svg{position:sticky;top:0;width:120px;height:100vh;overflow:visible}
.spine path{fill:none;stroke:var(--purple);stroke-width:7;stroke-linecap:round;opacity:.9}
.spine .track{stroke:var(--purple);opacity:.16}
.spine .draw{stroke-dasharray:1;stroke-dashoffset:1;pathLength:1;
animation:trace linear both;animation-timeline:scroll(root block)}
@keyframes trace{to{stroke-dashoffset:0}}
@supports not (animation-timeline:scroll()){.spine .draw{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.spine .draw{animation:none;stroke-dashoffset:0}}
.shell{position:relative;z-index:1;padding-left:var(--rail);width:min(1120px,100%);margin-inline:auto}
.inner{width:min(900px,calc(100% - 5vw));margin-left:0;margin-right:auto;padding-right:2vw}
/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:30;background:rgba(250,247,242,.94);
backdrop-filter:blur(14px);border-bottom:1px solid var(--hair)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:2rem;
padding:1.25rem 0;padding-left:var(--rail);width:min(1120px,100%);margin-inline:auto}
.brand{display:inline-flex;align-items:center;gap:.6rem;font-size:1.05rem;font-weight:600;
letter-spacing:-.04em;color:var(--purple-deep);text-decoration:none}
.brand img{width:26px;height:auto}
.nav-toggle{display:none;padding:8px 0 8px 18px;border:0;background:transparent;color:inherit;
font-family:inherit;font-size:.82rem;font-weight:600}
.nav-links{display:flex;align-items:center;gap:1.8rem;font-size:.82rem;padding-right:5vw}
.nav-links > a{text-decoration:none;transition:color .25s}
.nav-links > a:hover,.nav-links > a:focus-visible{color:var(--purple-deep)}
.language-switch{display:inline-flex;align-items:center;gap:.42rem;font-size:.72rem;
letter-spacing:.09em;color:rgba(45,45,63,.6)}
.language-switch a{text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:.1rem}
.language-switch a:hover,.language-switch a:focus-visible{color:var(--purple-deep);border-color:var(--purple)}
.language-switch strong{font-weight:600;color:var(--navy)}
/* ---------- hero ---------- */
.hero{padding:clamp(4.5rem,8vw,8.5rem) 0 clamp(3.5rem,4.5vw,5rem)}
.hero h1{font-size:clamp(2.2rem,5.2vw,4.4rem);max-width:22ch}
/* 16ch is tuned for Hangul; Latin needs a wider measure at the same size */
html[lang="en"] .hero h1{max-width:23ch}
html[lang="en"] .stage h2,html[lang="en"] .band h2,html[lang="en"] .founder h2{max-width:26ch}
html[lang="en"] .contact h2{max-width:22ch}
html[lang="en"] #serve h2{text-wrap:initial;max-width:none}
.hero .lead{margin-top:2.9rem;max-width:37rem;font-size:1.05rem;line-height:1.88}
.actions{display:flex;flex-wrap:wrap;gap:1rem 2.2rem;align-items:center;margin-top:var(--gap-block)}
.button{display:inline-flex;align-items:center;gap:.65rem;background:var(--purple);color:#fff;
padding:1rem 1.9rem;border-radius:999px;font-size:.9rem;font-weight:600;text-decoration:none;
transition:background .3s,transform .35s cubic-bezier(.16,1,.3,1)}
.button:hover,.button:focus-visible{background:var(--purple-deep);transform:translateY(-2px)}
.button svg{width:15px;height:15px;flex:none}
.text-link{font-size:.9rem;text-decoration:none;border-bottom:1px solid var(--hair);
padding-bottom:.22rem;transition:border-color .25s,color .25s}
.text-link:hover,.text-link:focus-visible{color:var(--purple-deep);border-color:var(--purple)}
/* ── 영문 본문 조판 ────────────────────────────────────────────
한글과 라틴은 같은 값을 공유할 수 없다. 행간과 측정폭을 따로 잡는다. */
html[lang="en"] .hero .lead,
html[lang="en"] .stage p,
html[lang="en"] .band > .inner > p,
html[lang="en"] .founder .p,
html[lang="en"] .contact p,
html[lang="en"] .standards p,
html[lang="en"] .audience li,
html[lang="en"] .credentials dd,
html[lang="en"] .consent,
html[lang="en"] .consent-note{line-height:1.62}
html[lang="en"] .hero .lead,
html[lang="en"] .stage p,
html[lang="en"] .band > .inner > p,
html[lang="en"] .contact p{max-width:40rem}
html[lang="en"] .founder .p{max-width:48ch}
/* ---------- stages knotted onto the line ---------- */
#work{padding:var(--pad-section) 0}
.stage{position:relative;margin-top:var(--gap-item)}
.stage:first-child{margin-top:0}
.stage h2{font-size:clamp(1.5rem,2.9vw,2.3rem);max-width:28ch}
.stage .step{display:block;margin-bottom:var(--gap-label);font-size:.74rem;letter-spacing:.16em;
color:var(--purple-deep);font-weight:600}
.stage p{margin-top:2.3rem;max-width:37rem;font-size:1.01rem;line-height:1.88}
/* ---------- bands ---------- */
.band{padding:var(--pad-section) 0}
.band h2{font-size:clamp(1.75rem,3.4vw,2.8rem);max-width:24ch}
.band > .inner > p{margin-top:2.3rem;max-width:37rem;font-size:1rem;line-height:1.88}
.band.stone{background:var(--stone);margin-left:calc(var(--rail) * -1);padding-left:var(--rail)}
.band.mist{background:var(--mist);margin-left:calc(var(--rail) * -1);padding-left:var(--rail)}
.band.dark{background:var(--navy);color:rgba(255,255,255,.74);
margin-left:calc(var(--rail) * -1);padding-left:var(--rail)}
.band.dark h2,.band.dark h3{color:#fff}
.audience{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(2rem,5vw,4rem);margin-top:var(--gap-block);max-width:56rem}
.audience > div{padding-top:1.3rem;border-top:2px solid var(--navy)}
.audience h3{font-size:1.3rem;margin-bottom:1.3rem}
.audience li{padding:1.15rem 0;border-bottom:1px solid rgba(26,26,46,.13);font-size:.96rem}
.audience li span{display:block;margin-top:.28rem;font-size:.72rem;letter-spacing:.13em;
color:var(--purple-deep);font-weight:600}
/* brand rows: the name is a link, the descriptor stays plain */
.audience li > a{font-weight:700;color:var(--navy);text-decoration:none;
border-bottom:1px solid rgba(26,26,46,.28);padding-bottom:.08rem}
.audience li > a:hover,.audience li > a:focus-visible{color:var(--purple-deep);border-color:var(--purple)}
.audience li > a span{display:inline;font-size:.8em;letter-spacing:0;color:inherit}
#brands .audience li{padding:1.45rem 0}
#brands .audience li span:not(a span){letter-spacing:0;font-size:.86rem;font-weight:400;
line-height:1.72;margin-top:.4rem;max-width:34ch;color:var(--charcoal);text-transform:none}
.partners{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(1.6rem,4vw,3rem);margin-top:var(--gap-block);max-width:56rem}
.partners > div{padding-top:1.3rem;border-top:2px solid var(--navy)}
.partners h3{font-size:1.2rem;margin-bottom:.8rem}
.partners p{font-size:.95rem;line-height:1.8}
.list-note{margin-top:1.6rem;font-size:.92rem}
.list-note a{text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:.15rem;
color:var(--purple-deep);font-weight:600}
.list-note a:hover,.list-note a:focus-visible{border-color:var(--purple)}
.standards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:0 clamp(2rem,5vw,4rem);margin-top:var(--gap-block);max-width:56rem}
.standards > div{padding:2.2rem 0;border-top:1px solid rgba(255,255,255,.17)}
.standards h3{font-size:1.2rem;color:var(--lavender)}
.standards p{margin-top:.95rem;font-size:.95rem;line-height:1.82}
/* ---------- founder ---------- */
.founder{padding:var(--pad-section) 0}
.founder-grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
gap:clamp(2rem,5vw,4.5rem);align-items:start;max-width:64rem}
.portrait img{width:100%;border-radius:999px;filter:saturate(.93)}
.portrait figcaption{margin-top:1rem;font-size:.8rem;color:rgba(45,45,63,.72);text-align:center}
.founder h2{font-size:clamp(1.75rem,3.4vw,2.8rem);max-width:26ch}
.founder .p{margin-top:var(--gap-lead);font-size:1rem;line-height:1.88;max-width:42ch}
.founder .p + .p{margin-top:1.45rem}
.credentials{margin-top:var(--gap-block);border-top:1px solid rgba(26,26,46,.2)}
.credentials div{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1.3rem;
padding:1.15rem 0;border-bottom:1px solid var(--hair)}
.credentials dt{font-size:.75rem;letter-spacing:.02em;color:var(--purple-deep);
font-weight:600;padding-top:.3rem}
.credentials dd{margin:0;font-size:.95rem;line-height:1.7}
.credentials dd span{display:block}
.credentials dd span + span{margin-top:.5rem}
/* ---------- close ---------- */
.contact{background:var(--purple);color:#242430;margin-left:calc(var(--rail) * -1);
padding:var(--pad-section) 0 var(--pad-section) var(--rail)}
.contact h2{color:#242430;font-size:clamp(1.7rem,3.4vw,2.8rem);max-width:24ch}
.contact p{margin-top:2rem;max-width:37rem;color:#242430;font-size:1rem;line-height:1.88}
.contact .button{margin-top:2.2rem;background:var(--navy);color:var(--cream)}
.contact .button:hover,.contact .button:focus-visible{background:#0f0f1e;color:#fff}
/* ---------- inquiry form ---------- */
.direct{margin-top:var(--gap-block);font-size:1.05rem;font-weight:600;color:var(--navy)}
.direct a{text-decoration:none;border-bottom:2px solid rgba(26,26,46,.35);padding-bottom:.12rem}
.direct a:hover,.direct a:focus-visible{border-color:var(--navy)}
.inquiry{margin-top:var(--gap-block);max-width:44rem;display:grid;gap:1.15rem}
.field{display:grid;gap:.45rem}
.field label{font-size:.83rem;font-weight:600;color:var(--navy)}
.field .req{color:var(--navy);opacity:.7}
.field input,.field select,.field textarea{
font:inherit;font-size:.95rem;color:var(--navy);background:#fff;
border:1px solid transparent;border-radius:8px;padding:.78rem .95rem;width:100%}
.field textarea{min-height:9rem;resize:vertical;line-height:1.7}
.field input::placeholder,.field textarea::placeholder{color:rgba(45,45,63,.45)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
outline:2px solid var(--navy);outline-offset:2px}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem}
.consent{display:flex;align-items:flex-start;gap:.65rem;font-size:.87rem;line-height:1.7;
color:var(--navy)}
.consent input{width:1.05rem;height:1.05rem;margin-top:.32rem;flex:none;accent-color:var(--navy)}
.consent-note{margin-top:.5rem;font-size:.82rem;line-height:1.75;color:var(--navy)}
.inquiry .button{justify-self:start;margin-top:.3rem}
.inquiry button[type="submit"]{border:0;cursor:pointer}
.inquiry button[disabled]{opacity:.6;cursor:progress}
.form-status{font-size:.9rem;line-height:1.75;padding:.85rem 1rem;border-radius:8px;
background:rgba(255,255,255,.72);color:var(--navy)}
.form-status[hidden]{display:none}
.form-status.error{background:#fff;color:#8c1d18}
.form-status.done{background:#fff;color:var(--navy);font-weight:600}
/* ---------- footer ---------- */
.site-footer{background:var(--navy);color:rgba(255,255,255,.6);padding:3.4rem 0;
font-size:.83rem;margin-left:calc(var(--rail) * -1);padding-left:var(--rail)}
.footer-brand{display:flex;align-items:center;gap:.62rem;color:var(--purple);font-weight:600;
font-size:1rem;letter-spacing:-.04em;text-decoration:none;margin-bottom:1.8rem}
.footer-brand img{width:26px;height:auto}
.legal{display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;
line-height:1.9;max-width:64rem}
:focus-visible{outline:2px solid var(--purple-deep);outline-offset:3px;border-radius:2px}
.band.dark :focus-visible,.site-footer :focus-visible{outline-color:#fff}
.contact :focus-visible{outline-color:var(--navy)}
@media (max-width:520px){
/* 히어로의
구간이 한 줄에 들어가는 크기까지 낮춘다 */
.hero h1{font-size:1.82rem}
}
@media (max-width:820px){
:root{--rail:2.4rem}
.spine,.spine svg{width:60px}
.spine path{stroke-width:5}
.founder-grid,.standards,.audience,.partners{grid-template-columns:minmax(0,1fr)}
.partners{gap:2rem}
.standards{gap:0}
.audience{gap:2.4rem}
.credentials div{grid-template-columns:minmax(0,1fr);gap:.3rem}
.portrait{max-width:13rem}
.portrait figcaption{text-align:left}
.field-row{grid-template-columns:minmax(0,1fr)}
.nav{flex-wrap:wrap;padding-right:5vw}
.nav-toggle{display:block;margin-left:auto}
.nav-links{display:none;width:100%;flex-direction:column;align-items:flex-start;
gap:.2rem;padding:.6rem 0 1rem}
.nav-links.open{display:flex}
.nav-links > a,.nav-links .language-switch{padding:.6rem 0;width:100%}
}