/* 색은 여기 변수만 바꾸면 사이트 전체에 반영됩니다 (Figma "Color" 변수와 같은 이름) */
:root {
  --bg: #FFFFFF;
  --surface: #F3F3F1;
  --text: #221E1F;
  --text-sub: #6B6768;
  --accent: #8DFF33;
  --gray: #4A4747;
  --line: #E2E0DE;
  --placeholder: #D9D9D6;
  --pad: 60px;
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.wrap { padding-left: var(--pad); padding-right: var(--pad); }

/* 언어 전환: html lang 값에 따라 한쪽만 보임 */
html[lang="en"] .ko, html[lang="ko"] .en { display: none !important; }
.lang { display: flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 600; margin-left: 8px; }
.lang button { padding: 4px 6px; color: var(--text-sub); transition: color .2s; }
.lang button:hover { color: var(--text); }
html[lang="en"] .lang [data-set="en"], html[lang="ko"] .lang [data-set="ko"] { color: var(--text); background: var(--accent); }
.lang i { width: 1px; height: 12px; background: var(--line); }

/* 회색 이미지 자리 */
.ph { background: var(--placeholder); color: var(--text-sub); display: flex; align-items: center; justify-content: center; font-size: 15px; width: 100%; height: 100%; }
.ph.soft { background: var(--surface); }

/* 버튼: Halo처럼 각진 검정 버튼 */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 20px 36px; background: var(--text); color: var(--bg); font-weight: 500; transition: background .25s, color .25s, transform .25s; }
.btn:hover { background: var(--accent); color: var(--text); }
.btn.accent { background: var(--accent); color: var(--text); }
.btn.accent:hover { background: var(--bg); }
.btn.block { width: 100%; }

/* NAV */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 16px var(--pad); transition: background .3s, padding .3s, box-shadow .3s; }
.nav.scrolled { background: rgba(255,255,255,.92); backdrop-filter: blur(10px); padding-top: 10px; padding-bottom: 10px; box-shadow: 0 1px 0 var(--line); }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 22px; letter-spacing: -.5px; }
.brand img { width: 28px; height: 28px; border-radius: 4px; }
.loc { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.loc i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(141,255,51,.7); } 70% { box-shadow: 0 0 0 10px rgba(141,255,51,0); } 100% { box-shadow: 0 0 0 0 rgba(141,255,51,0); } }
.menu { display: flex; gap: 28px; font-size: 14px; font-weight: 500; }
.menu a { position: relative; }
.menu a::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1.5px; background: var(--text); transform: scaleX(0); transform-origin: right; transition: transform .3s; }
.menu a:hover::after { transform: scaleX(1); transform-origin: left; }

/* HERO */
.hero { display: flex; justify-content: space-between; align-items: flex-end; padding-top: 200px; padding-bottom: 120px; gap: 40px; }
.hero-title { font-size: clamp(80px, 13.9vw, 200px); line-height: .8; letter-spacing: -.04em; font-weight: 600; }
.hero-title .line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero-title .line > span { display: inline-block; transform: translateY(105%); animation: rise 1s cubic-bezier(.2,.8,.2,1) forwards; }
.hero-title .line:nth-child(2) > span { animation-delay: .12s; }
.hero-title .pct { animation-delay: .25s !important; }
@keyframes rise { to { transform: translateY(0); } }
.hero-side { text-align: right; display: flex; flex-direction: column; gap: 16px; align-items: flex-end; padding-bottom: 6px; }
.hero-side .sub { color: var(--text-sub); }
.hero-side .spec { font-size: 32px; line-height: 1.12; font-weight: 600; letter-spacing: -1px; }
.scroll { font-weight: 500; }
.scroll:hover { text-decoration: underline; }

/* ROLLING IMAGES: 같은 줄을 두 번 이어 붙여 끊김 없이 흐르게 함 */
.roll { overflow: hidden; margin-bottom: 100px; }
.track { display: flex; gap: 24px; width: max-content; animation: roll 40s linear infinite; }
.roll:hover .track { animation-play-state: paused; }
.roll-item { width: 450px; height: 550px; flex: none; overflow: hidden; transition: transform .5s; }
.roll-item:hover { transform: scale(.97); }
.roll-item img, .card-img img, .work-full img, .work-pair img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes roll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 12px)); } }

/* 공통 섹션 머리 */
section.wrap { padding-top: 100px; padding-bottom: 100px; }
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 80px; }
.title { font-size: clamp(56px, 7vw, 100px); line-height: .84; letter-spacing: -.04em; font-weight: 600; }
.head-side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 24px; color: var(--text-sub); }

/* ABOUT */
.about .row { display: grid; grid-template-columns: 462px 1fr; margin-bottom: 100px; }
.label { font-weight: 500; line-height: 1.4; }
.about-main { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.statement { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.33; letter-spacing: -.03em; font-weight: 700; }
.about .body { color: var(--text-sub); max-width: 564px; line-height: 1.65; }
.stats { display: grid; grid-template-columns: 362px 100px 330px 330px; align-items: center; }
.stat-img { height: 236px; grid-column: 1; }
.stats .stat:nth-of-type(2) { grid-column: 3; }
.stat { display: flex; flex-direction: column; gap: 16px; }
.stat strong { font-size: 100px; line-height: 1; letter-spacing: -.04em; font-weight: 600; }
.stat span { color: var(--text-sub); }

/* WORKS */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px 24px; }
.card { display: flex; flex-direction: column; gap: 16px; cursor: none; }
.card-top, .card-bot { display: flex; justify-content: space-between; }
.card-top b { font-size: 20px; font-weight: 600; }
.card-img { overflow: hidden; aspect-ratio: 648 / 600; }
.card-img > * { transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.card:hover .card-img > *, .post:hover .card-img > * { transform: scale(1.06); }
.empty { color: var(--text-sub); padding: 40px 0; }

/* 작업 목록 페이지 */
.works-page { padding-top: 200px !important; }
.page-title { font-size: clamp(64px, 9vw, 130px); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: -32px 0 48px; }
.chip { padding: 10px 18px; background: var(--surface); font-size: 14px; font-weight: 500; transition: background .25s; }
.chip:hover { background: var(--line); }
.chip.on { background: var(--text); color: var(--bg); }
.load-more { display: flex; justify-content: center; margin-top: 80px; }
.load-more .btn[hidden] { display: none; }

/* 작업 상세 페이지 */
.work-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; padding-top: 200px !important; padding-bottom: 60px !important; }
.work-title { font-size: clamp(56px, 7vw, 100px); line-height: .9; letter-spacing: -.04em; font-weight: 600; text-transform: uppercase; }
.work-meta { display: flex; gap: 40px; }
.work-meta dt { font-weight: 600; font-size: 18px; }
.work-meta dd { color: var(--text-sub); font-size: 14px; }
.work-body { display: flex; flex-direction: column; gap: 100px; padding-top: 0 !important; }
.work-full { aspect-ratio: 1320 / 820; overflow: hidden; }
.work-full.hero-img { aspect-ratio: 1320 / 760; }
.work-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.work-pair > * { aspect-ratio: 648 / 600; }
.work-text { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.work-text h2 { font-size: 24px; font-weight: 600; }
.work-text p { color: var(--text-sub); line-height: 1.7; }
.work-next { display: flex; justify-content: flex-end; margin-top: -40px; }

/* SERVICES / FAQ 펼침 목록 */
.acc { border-bottom: 1px solid var(--line); }
.acc-item { border-top: 1px solid var(--line); }
.acc-head { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 28px 0; text-align: left; font-size: 24px; font-weight: 600; }
.faq .acc-head { font-size: 22px; font-weight: 700; }
.circ { position: relative; width: 32px; height: 32px; border: 1.5px solid var(--text); border-radius: 50%; flex: none; transition: background .3s, transform .4s; }
.circ::before, .circ::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--text); transform: translate(-50%,-50%); transition: transform .4s; }
.circ::after { transform: translate(-50%,-50%) rotate(90deg); }
.acc-item.open .circ { background: var(--accent); border-color: var(--accent); }
.acc-item.open .circ::after { transform: translate(-50%,-50%) rotate(0); }
.circ.arrow::before { width: 1.5px; height: 12px; }
.circ.arrow::after { width: 7px; height: 7px; background: none; border-left: 1.5px solid var(--text); border-top: 1.5px solid var(--text); transform: translate(-50%,-80%) rotate(45deg); }
.acc-item.open .circ.arrow { transform: rotate(180deg); }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s ease; }
.acc-body > * { overflow: hidden; }
.acc-item.open .acc-body { grid-template-rows: 1fr; }
.svc-open { display: grid; grid-template-columns: 220px 1fr auto; gap: 24px; align-items: start; }
.acc-item.open .svc-open { padding-bottom: 30px; }
.svc-thumb { height: 130px; }
.svc-open p { color: var(--text-sub); max-width: 420px; }
.tags { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.tags em { font-style: normal; font-size: 14px; background: var(--surface); padding: 6px 12px; }
.answer { color: var(--text-sub); max-width: 720px; }
.acc-item.open .answer { padding-bottom: 32px; }

/* PARTNERS */
.logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.logos .ph { height: 300px; transition: background .3s; }
.logos .ph:hover { background: var(--accent); color: var(--text); }

/* AWARDS */
.rows { border-bottom: 1px solid var(--line); }
.rows li { display: grid; grid-template-columns: 400px 380px 1fr auto; align-items: center; padding: 48px 0; border-top: 1px solid var(--line); transition: padding .3s; }
.rows li:hover { padding-left: 16px; padding-right: 16px; background: var(--surface); }
.rows b { font-size: 20px; font-weight: 600; }
.rows span { font-size: 15px; color: var(--text-sub); }

/* PLANS */
.plan-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.plan { background: var(--surface); padding: 40px; display: flex; flex-direction: column; gap: 28px; transition: transform .35s; }
.plan:hover { transform: translateY(-6px); }
.plan.dark { background: var(--text); color: var(--bg); }
.plan p { color: var(--text-sub); }
.plan.dark p { color: var(--placeholder); }
.plan-name { font-size: 20px; font-weight: 600; }
.plan .price { font-size: 56px; letter-spacing: -2px; font-weight: 600; color: inherit !important; }
.plan .price.quote-price { font-size: 44px; letter-spacing: -1.5px; }
.plan .price small { font-size: 18px; font-weight: 400; margin-left: 6px; letter-spacing: 0; opacity: .7; }
.plan ul { display: flex; flex-direction: column; gap: 12px; }
.plan li::before { content: "•"; margin-right: 10px; }
.plan.dark .btn.accent:hover { background: var(--bg); }

/* REVIEWS */
.rev-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rev { height: 480px; padding: 32px; display: flex; flex-direction: column; justify-content: space-between; }
.rev.soft { background: var(--surface); }
.rev.photo { background: var(--gray); color: var(--bg); justify-content: flex-end; gap: 16px; }
.score { font-size: 48px; font-weight: 600; letter-spacing: -2px; }
.stars { font-size: 24px; letter-spacing: 2px; }
.quote { font-size: 20px; font-weight: 500; line-height: 1.5; }
.qmark { font-size: 64px; line-height: .75; font-weight: 600; margin-bottom: 16px; }
.ph-note { font-size: 13px; color: var(--placeholder); }
.who { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text-sub); }
.rev.photo .who { color: var(--placeholder); }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--placeholder); }

/* BLOG */
.blog-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.post { display: flex; flex-direction: column; gap: 16px; }
.post .card-img { aspect-ratio: 648 / 440; }
.post b { font-size: 20px; }
.post .card-bot span { color: var(--text-sub); }

/* FOOTER */
.footer { background: var(--text); color: var(--bg); padding: 60px 0; }
.foot-big { display: flex; align-items: center; gap: 28px; font-size: clamp(56px, 10.4vw, 150px); font-weight: 600; letter-spacing: -.04em; line-height: 1; margin-bottom: 100px; }
.foot-big img { width: .87em; height: .87em; }
.foot-mid { display: flex; justify-content: space-between; gap: 40px; margin-bottom: 100px; }
.foot-info { display: flex; flex-direction: column; gap: 20px; }
.foot-info .mail { font-size: 22px; font-weight: 600; border-bottom: 1.5px solid var(--accent); transition: color .2s; }
.foot-info .mail:hover { color: var(--accent); }
.foot-form { width: 560px; display: flex; flex-direction: column; gap: 16px; }
.foot-form p { color: var(--placeholder); font-size: 15px; }
.foot-form input { font: inherit; padding: 18px 20px; border: 0; outline: none; }
.foot-bot { display: flex; gap: 120px; align-items: flex-end; }
.foot-bot ul { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.foot-bot li { cursor: pointer; width: fit-content; }
.foot-bot li:hover { color: var(--accent); }
.copy { margin-left: auto; font-size: 14px; color: var(--placeholder); }

/* 스크롤하면 떠오르는 효과 */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* 작업 카드 위 라임 원형 커서 */
.cursor { position: fixed; left: 0; top: 0; z-index: 100; width: 96px; height: 96px; border-radius: 50%; background: var(--accent); color: var(--text); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; pointer-events: none; transform: translate(-50%,-50%) scale(0); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.cursor.show { transform: translate(-50%,-50%) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .track { animation: none; }
  .reveal { opacity: 1; transform: none; }
  .hero-title .line > span { transform: none; animation: none; }
}

/* 모바일 */
@media (max-width: 900px) {
  :root { --pad: 20px; }
  .loc { display: none; }
  .menu { gap: 16px; }
  .hero { flex-direction: column; align-items: flex-start; padding-top: 140px; padding-bottom: 60px; }
  .hero-side { align-items: flex-start; text-align: left; }
  .hero-side .spec { font-size: 24px; }
  .roll-item { width: 260px; height: 320px; }
  .work-head { flex-direction: column; align-items: flex-start; padding-top: 130px !important; }
  .work-meta { gap: 24px; }
  .work-body { gap: 48px; }
  .work-pair, .work-text { grid-template-columns: 1fr; }
  .work-text { gap: 12px; }
  .works-page { padding-top: 130px !important; }
  .filters { margin-top: 0; }
  .head { flex-direction: column; align-items: flex-start; margin-bottom: 48px; }
  .head-side { align-items: flex-start; text-align: left; }
  .about .row { grid-template-columns: 1fr; gap: 24px; margin-bottom: 60px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 24px; }
  .stat-img { grid-column: 1 / -1; }
  .stats .stat:nth-of-type(2) { grid-column: auto; }
  .stat strong { font-size: 64px; }
  .grid, .plan-row, .blog-row, .rev-row, .logos { grid-template-columns: 1fr; }
  .logos .ph { height: 180px; }
  .rows li { grid-template-columns: 1fr auto; gap: 8px; padding: 28px 0; }
  .rows li span { grid-column: 1 / -1; }
  .svc-open { grid-template-columns: 1fr; }
  .tags { justify-content: flex-start; }
  .rev { height: auto; min-height: 320px; }
  .foot-mid { flex-direction: column; }
  .foot-form { width: 100%; }
  .foot-bot { flex-wrap: wrap; gap: 40px; }
  .copy { margin-left: 0; width: 100%; }
  .cursor { display: none; }
}