/* FigCraft v0.1의 브랜드·간격을 반응형 문서 흐름으로 구현한다. */
:root { --ink:#202828; --muted:#61706c; --coral:#c33832; --cream:#faf8f3; --line:#dde2dc; --peach:#ffe5dd; --blue:#2a5df3; --blue-text:#244dbd; --blue-pale:#ebf1ff; --purple-text:#605087; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:"Apple SD Gothic Neo","Noto Sans KR",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; line-height:1.5; }
a { color:inherit; text-decoration:none; text-underline-offset:4px; }
a:hover { text-decoration:underline; }
img { display:block; max-width:100%; height:auto; }
h1,h2,h3,p,ul,dl,dd { margin:0; }
h1,h2,h3 { font-weight:700; word-break:keep-all; overflow-wrap:break-word; }
button,a { -webkit-tap-highlight-color:transparent; }
a:focus-visible { outline:3px solid var(--blue); outline-offset:5px; border-radius:4px; }
.contact a:focus-visible { outline-color:#ff9996; }
.container { width:min(1280px,calc(100% - 160px)); margin-inline:auto; }
.section-anchor { scroll-margin-top:24px; }
.skip-link { position:absolute; z-index:10; top:8px; left:16px; padding:12px 20px; color:#fff; background:var(--ink); transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
#main:focus { outline:none; }
.eyebrow,.art-label { font-size:12px; font-weight:700; line-height:18px; color:var(--coral); }
.button { display:inline-flex; gap:9px; min-height:54px; align-items:center; justify-content:center; padding:14px 25px; border:1px solid transparent; border-radius:999px; color:#fff; background:var(--ink); font-size:16px; font-weight:700; line-height:24px; white-space:nowrap; transition:background-color .15s ease,box-shadow .15s ease; }
.button:hover { text-decoration:none; background:#35433f; }
.button-outline { border-color:var(--line); background:#fff; color:var(--ink); }
.button-outline:hover { background:#f0f3ee; }
.button-blue { background:var(--blue); }
.button-blue:hover { background:#224bc4; }
.site-header { height:96px; display:flex; align-items:center; border-bottom:1px solid var(--line); gap:40px; }
.brand { display:inline-flex; align-items:center; flex-shrink:0; min-height:44px; }
.primary-nav { display:flex; align-items:center; gap:40px; margin-left:auto; font-size:16px; font-weight:600; }
.primary-nav a { display:inline-flex; align-items:center; min-height:44px; }
.nav-contact { min-width:126px; }
.mobile-label,.mobile-tool-note,.mobile-break { display:none; }
.hero { display:grid; grid-template-columns:minmax(0,1fr) 530px; column-gap:50px; padding-top:54px; }
.hero h1 { margin-top:36px; font-size:64px; line-height:1.25; letter-spacing:-.6px; }
.hero-description { margin-top:38px; font-size:21px; line-height:34px; word-break:keep-all; }
.hero-cta { min-width:243px; margin-top:48px; }
.hero-summary { margin-top:36px; font-size:16px; line-height:28px; color:var(--muted); }
.hero-description,.about-description,.service-description { color:var(--muted); }
.hero-art { position:relative; isolation:isolate; overflow:hidden; margin-top:8px; height:550px; padding:26px 28px; border-radius:28px; background:var(--peach); }
.hero-art > .art-label,.perspectives-caption { color:#ad2b26; }
.hero-art::before,.hero-art::after { content:""; position:absolute; z-index:-1; width:270px; height:270px; border-radius:50%; background:#ffd0c5; right:-37px; top:-75px; }
.hero-art::after { width:300px; height:300px; background:#ffd3c9; left:-120px; top:292px; }
.question-card { background:#fff; border-radius:16px; }
.hero-art .question-card { margin-top:18px; padding:16px 18px 13px; height:117px; }
.pill { display:inline-flex; align-items:center; height:30px; padding:0 12px; background:var(--cream); color:var(--muted); border-radius:999px; font-size:12px; font-weight:600; }
.question-card p { font-size:22px; font-weight:700; line-height:29px; }
.hero-art .question-card p { margin-top:8px; }
.people { display:flex; justify-content:space-between; padding-right:36px; margin-top:25px; }
.people i { display:block; position:relative; width:42px; height:42px; border-radius:50%; background:#2557c0; }
.people i:nth-child(2) { background:#7d5af9; }.people i:nth-child(3) { background:#ff4aa1; }.people i:nth-child(4) { background:#ffc100; }.people i:nth-child(5) { background:#00a873; }
.people i::before { content:""; position:absolute; width:14px; height:14px; border-radius:50%; background:white; top:8px; left:14px; }
.people i::after { content:""; position:absolute; width:20px; height:9px; border-radius:5px; background:white; top:26px; left:11px; }
.perspectives-caption { margin-top:18px; font-size:15px; font-weight:600; color:#ad2b26; }
.do-tools { border-top:1px solid #e5bcb3; margin-top:27px; padding-top:19px; }
.do-tools .art-label { color:var(--blue-text); }
.tool-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:18px; }
.tool-tiles div { background:#fff; border-radius:13px; padding:12px 16px; height:112px; display:flex; flex-direction:column; justify-content:space-between; }
.tool-tiles b { font-size:26px; line-height:38px; color:var(--blue); }
.tool-tiles span { color:var(--muted); font-size:14px; font-weight:600; padding-bottom:5px; }
.hero-baseline { display:grid; grid-template-columns:minmax(0,1fr) 530px; column-gap:50px; grid-column:1/-1; border-top:1px solid var(--line); margin-top:54px; padding:17px 0 21px; font-size:13px; font-weight:700; color:var(--coral); }
.hero-baseline span:last-child { color:var(--blue-text); }
.about { background:#fff; padding:64px 0 65px; }
.about-grid { display:grid; grid-template-columns:1fr 600px; gap:80px; }
.about h2 { margin-top:24px; font-size:38px; line-height:50px; }
.about-description { padding-top:46px; font-size:19px; line-height:33px; word-break:keep-all; }
.services { padding-top:68px; padding-bottom:96px; }
.services h2 { margin-top:20px; margin-bottom:50px; font-size:42px; line-height:55px; }
.service-card { display:grid; grid-template-columns:minmax(0,1fr) 490px; gap:60px; border-radius:24px; background:#fff; padding:36px 40px 36px; min-height:570px; }
.service-card + .service-card { margin-top:32px; }
.service-copy { min-width:0; }
.manyperson-logo { width:198px; height:51px; object-fit:contain; }
.onul-logo { display:flex; align-items:center; gap:11px; height:51px; font-size:27px; font-weight:700; }
.product-category { margin-top:39px; color:var(--purple-text); }
.onul .product-category { color:var(--blue-text); }
.service-card h3 { font-size:37px; line-height:49px; margin-top:21px; letter-spacing:-.25px; }
.service-description { margin-top:24px; font-size:18px; line-height:29px; word-break:keep-all; }
.service-tags { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:12px; margin-top:25px; }
.service-tags li { font-size:12px; line-height:20px; background:#f0f3ee; border-radius:999px; color:var(--muted); padding:5px 12px; }
.onul .service-tags li { background:var(--blue-pale); color:var(--blue-text); }
.service-cta { margin-top:30px; min-width:257px; }
.service-note { margin-top:24px; font-size:13px; line-height:20px; color:var(--muted); }
.service-art { border-radius:24px; min-height:494px; padding:24px; position:relative; }
.many-art { background:#f2f0fc; }
.many-art .art-label { font-size:11px; color:var(--purple-text); }
.many-art .question-card { border-radius:12px; padding:17px 18px; margin-top:21px; }
.many-art .question-card p { font-size:19px; line-height:26px; }
.many-art .pill { margin-top:20px; background:#e4def7; color:var(--purple-text); }
.perspective-rows { display:grid; gap:29px; margin-top:27px; }
.perspective-rows > div { display:flex; align-items:center; gap:15px; min-height:36px; font-size:14px; }
.perspective-rows i { width:36px; height:36px; border-radius:50%; background:#7d5af9; margin-right:0; }
.perspective-rows div:nth-child(2) i { background:#2557c0; }.perspective-rows div:nth-child(3) i { background:#ff4aa1; }
.perspective-rows b { width:53px; font-size:15px; }.perspective-rows span { color:var(--muted); }
.art-note { position:absolute; bottom:26px; font-size:11px; color:var(--muted); }
.onul-art { background:var(--blue-pale); }
.onul-art .art-label { font-size:11px; color:var(--blue-text); }
.search-example { padding:18px; background:#fff; border-radius:10px; font-size:16px; color:var(--muted); margin-top:20px; }
.tool-rows { display:grid; gap:13px; margin-top:23px; }
.tool-rows > div { display:flex; align-items:center; gap:24px; background:#fff; border-radius:12px; min-height:72px; padding:10px 17px; }
.tool-rows > div > b { font-size:24px; color:var(--blue); width:32px; }
.tool-rows strong { font-size:17px; display:block; }.tool-rows span { display:block; font-size:13px; color:var(--muted); margin-top:3px; }
.onul-art .art-note { font-size:13px; color:var(--blue-text); font-weight:600; }
.mobile-perspectives,.mobile-tools { display:none; }
.contact { background:var(--ink); color:#fff; padding:64px 0 49px; }
.contact-grid { display:grid; grid-template-columns:minmax(0,1fr) 560px; gap:0 160px; }
.contact .eyebrow { color:#ff9996; }
.contact h2 { font-size:46px; line-height:60px; margin-top:26px; }
.contact-copy > p:not(.eyebrow) { color:#cdd6d2; font-size:18px; line-height:30px; margin-top:34px; }
.contact-email { display:inline-flex; gap:10px; align-items:center; min-height:44px; font-size:29px; font-weight:600; margin-top:32px; }
.contact-phone { display:block; font-size:19px; line-height:29px; width:fit-content; padding:8px 0; margin-top:12px; }
.company .eyebrow { color:#cdd6d2; }
.company h3 { font-size:25px; line-height:36px; margin-top:26px; }
.company dl { display:grid; gap:35px; margin-top:28px; }
.company dl > div { display:grid; grid-template-columns:140px 1fr; gap:30px; align-items:baseline; }
.company dt { font-size:14px; color:#aabab3; }.company dd { font-size:17px; line-height:27px; }.company address { font-style:normal; }
.service-contacts { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1fr) 560px; gap:160px; border-top:1px solid #43514c; margin-top:42px; padding-top:13px; font-size:14px; color:#cdd6d2; }
.service-contacts a { display:inline-block; padding:10px 0; }
.site-footer { display:grid; grid-template-columns:minmax(0,1fr) 560px; gap:160px; padding-top:32px; padding-bottom:30px; }
.copyright { color:var(--muted); font-size:13px; margin-top:23px; }
.footer-information { font-size:14px; color:var(--muted); }
.closure-link { display:inline-flex; align-items:center; min-height:44px; }.closure-email { display:flex; gap:8px; align-items:center; min-height:44px; width:fit-content; color:var(--ink); font-size:16px; font-weight:600; }
.footer-information p { font-size:12px; margin-top:12px; line-height:19px; }
@media (max-width:1279px) {
 .container { width:calc(100% - 80px); }.site-header { gap:26px; }.primary-nav { gap:28px; }
 .hero { grid-template-columns:minmax(0,1fr) minmax(340px,.85fr); gap:35px; }.hero h1 { font-size:clamp(40px,4.4vw,56px); }.hero-description { font-size:19px; }.hero-baseline { grid-template-columns:1fr .85fr; gap:35px; margin-top:15px; }
 .about-grid { grid-template-columns:1fr 1fr; gap:50px; }.about h2 { font-size:34px; }.about-description { font-size:18px; }
 .service-card { grid-template-columns:1fr minmax(330px,.85fr); gap:32px; padding:32px; }.service-card h3 { font-size:31px; line-height:43px; }.service-description { font-size:17px; }.desktop-break { display:none; }
 .contact-grid,.service-contacts,.site-footer { grid-template-columns:1fr 1fr; gap:0 60px; }.company dl > div { grid-template-columns:120px 1fr; gap:20px; }
}
@media (max-width:899px) {
 .container { width:calc(100% - 48px); max-width:640px; }
 .site-header { max-width:none; height:80px; justify-content:space-between; gap:20px; }.site-header .brand img { width:144px; }.primary-nav,.desktop-label { display:none; }.mobile-label,.mobile-break { display:inline; }.nav-contact { min-width:88px; padding:14px 16px; }
 .hero { display:flex; flex-direction:column; gap:0; padding-top:32px; padding-bottom:31px; }.hero h1 { font-size:33px; line-height:45px; letter-spacing:0; margin-top:25px; }.hero-description { font-size:18px; line-height:29px; margin-top:27px; max-width:342px; }.hero-cta { width:100%; margin-top:34px; }.hero-summary,.hero-baseline { display:none; }
 .hero-art { width:100%; height:530px; margin-top:36px; padding:26px 28px; }.hero-art .question-card p { font-size:18px; line-height:25px; }.people { padding-right:18px; }.people i { width:36px; height:36px; }.people i::before { width:10px; height:10px; left:13px; }.people i::after { width:16px; left:10px; top:22px; }.perspectives-caption { margin-top:23px; }.do-tools { margin-top:27px; }
 .about { padding:38px 0 35px; }.about-grid { display:block; }.about h2 { font-size:29px; line-height:41px; margin-top:24px; }.about-description { padding:0; font-size:17px; line-height:28px; margin-top:29px; max-width:340px; }.desktop-about-ending { display:none; }
 .services { padding-top:40px; padding-bottom:46px; }.services h2 { font-size:32px; line-height:43px; margin-top:18px; margin-bottom:40px; }.services h2 span { display:block; }
 .service-card { display:block; min-height:0; padding:29px 24px 31px; }.service-card + .service-card { margin-top:24px; }.service-art,.service-tags { display:none; }.manyperson-logo { width:184px; height:47px; }.onul-logo { height:47px; font-size:25px; gap:10px; }.onul-logo img { width:39px; }
 .product-category { margin-top:24px; }.service-card h3 { font-size:27px; line-height:37px; letter-spacing:0; margin-top:21px; }.service-description { font-size:16px; line-height:26px; margin-top:22px; word-break:normal; overflow-wrap:break-word; }
 .mobile-perspectives { display:block; background:#f2f0fc; border-radius:16px; margin-top:27px; padding:18px; height:153px; }.mobile-perspectives p { font-size:13px; line-height:19px; font-weight:700; color:var(--purple-text); }.mobile-perspectives > div { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px; }.mobile-perspectives span { font-size:14px; font-weight:600; }.mobile-perspectives i { display:block; height:32px; width:32px; border-radius:50%; background:#7d5af9; margin-bottom:12px; }.mobile-perspectives span:nth-child(2) i { background:#2557c0; }.mobile-perspectives span:nth-child(3) i { background:#ff4aa1; }
 .mobile-tools { display:grid; gap:21px; background:var(--blue-pale); border-radius:16px; margin-top:27px; padding:22px 20px; min-height:191px; color:var(--blue-text); font-size:17px; font-weight:600; }.mobile-tools b { display:inline-block; width:30px; }
 .service-cta { width:100%; min-width:0; margin-top:32px; padding-inline:12px; }.service-note { margin-top:25px; font-size:12px; line-height:20px; }.desktop-tool-note { display:none; }.mobile-tool-note { display:inline; }
 .contact { padding:40px 0 43px; }.contact-grid { display:block; }.contact h2 { font-size:36px; line-height:48px; margin-top:23px; }.contact-copy > p:not(.eyebrow) { margin-top:27px; font-size:16px; line-height:27px; }.contact-email { font-size:25px; margin-top:27px; }.contact-phone { font-size:18px; margin-top:4px; }
 .company { border-top:1px solid #43514c; margin-top:28px; padding-top:28px; }.company .eyebrow { display:none; }.company h3 { font-size:23px; margin:0; }.company dl { gap:2px; margin-top:20px; }.company dl > div { display:flex; gap:5px; align-items:baseline; }.company dt,.company dd { font-size:15px; line-height:29px; color:#cdd6d2; }.company dl > div:last-child { display:block; }.company dl > div:last-child dt { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 .service-contacts { display:block; border:0; padding:0; margin-top:24px; font-size:14px; }.service-contacts a { padding:6px 0; }
 .site-footer { display:block; padding-top:23px; padding-bottom:30px; }.site-footer .brand img { width:144px; }.copyright { font-size:12px; margin-top:8px; }.footer-information { margin-top:15px; }.closure-link { font-size:13px; }.footer-information p { margin-top:14px; max-width:300px; }
}
@media (max-width:359px) { .hero h1 { font-size:28px; line-height:40px; }.service-card { padding-inline:20px; }.service-card h3 { font-size:24px; line-height:34px; }.hero-art { padding-inline:20px; }.tool-tiles div { padding-inline:12px; }.contact-email { font-size:23px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.button { transition:none; } }