/* studiomoai.app — 「활자 케이스」 타이포·spacing·radius = GDS(지마켓) 원문 규율 / 색 = 저작(GDS 색 미참조) 값 진본 = PLAN.md · 제품 진실 = PRODUCT.md ── 색의 공리: 온도 이원제 ────────────────────────────────────── 인쇄된 것은 «따뜻하고», 새겨진·구조적인 것은 «차갑다». 잉크 축(웜) = 텍스트 · 활자 타일 · 스탬프 금속 축(쿨) = 괘선 · 파인 바닥 · 인덱스 · footprint 두 축은 섞지 않는다. 웜 괘선도, 쿨 본문도 없다. 따뜻한 색은 전진하고 차가운 색은 후퇴하므로 «콘텐츠가 앞서고 구조가 물러나는» 위계가 굵기가 아니라 «온도» 로 인코딩된다 — 그래서 제목을 굵게 하지 않아도 위계가 선다(GDS 의 Regular 제목 규율과 정확히 맞물린다). ⛔ 이 블록 밖에 hex 리터럴을 쓰지 마라(감사 = 정의 블록 밖 hex 수 0). */ :root { --ground:#FAF9F7; /* 지면 · 채워진 칸 = 종이가 깔린 칸 (웜) */ --well:#F1F2F5; /* 파인 바닥 · 빈 칸 · 명판 = 맨 금속 (쿨) */ --ink:#221E1A; /* 제목 · 본문 (웜) — 고정 로고의 near-black 이 이 값 */ --ink-soft:#5E5850; /* 보조 문장 (웜) — 의미 있는 텍스트의 «바닥» */ --metal-line:#D9DCE2; /* 공유 1px 괘선 (쿨) */ --metal-mark:#838996; /* 인덱스 · footprint = 새겨진 표기 (쿨) — 3:1 하한 준수 */ --app-ink:#4F46E5; /* TripPair 잉크 — 제품 사실(출하된 앱의 브랜드색) */ --app-fill:#4F46E5; --app-wash:#EEECFA; /* 잉크가 스민 종이 */ --app-on:#FAF9F7; --s-xxxs:2px; --s-xxs:4px; --s-xs:8px; --s-s:12px; --s-m:16px; --s-l:20px; --s-xl:24px; --s-xxl:32px; --s-xxxl:40px; --t-hero:clamp(32px, 5.6vw, 52px); --t-sub:clamp(26px, 4.2vw, 38px); --t-xxxl:24px; --t-xxl:22px; --t-xl:20px; --t-l:18px; --t-m:16px; --t-s:14px; --t-xs:12px; --display:"IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; --body:"Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; --mono:"IBM Plex Mono", ui-monospace, "SF Mono", monospace; --page:1040px; --ease:cubic-bezier(.2,0,0,1); color-scheme:light; } /* 다크 = «밤의 케이스». 바닥이 종이에서 금속으로 바뀌고 글자가 종이색이 된다. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground:#17191D; --well:#111318; --ink:#F2F0EB; --ink-soft:#B5AFA6; --metal-line:#2E3238; --metal-mark:#6E7681; --app-ink:#8F8BFA; --app-fill:#5A52E8; --app-wash:#1E1E35; --app-on:#F2F0EB; color-scheme:dark; } } :root[data-theme="dark"] { --ground:#17191D; --well:#111318; --ink:#F2F0EB; --ink-soft:#B5AFA6; --metal-line:#2E3238; --metal-mark:#6E7681; --app-ink:#8F8BFA; --app-fill:#5A52E8; --app-wash:#1E1E35; --app-on:#F2F0EB; color-scheme:dark; } /* ── 바탕 ───────────────────────────────────────────────────────── */ *,*::before,*::after { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; } body { margin:0; background:var(--ground); color:var(--ink); font-family:var(--body); font-size:var(--t-s); line-height:1.7; letter-spacing:-.003em; -webkit-font-smoothing:antialiased; } ::selection { background:var(--ink); color:var(--ground); } :focus-visible { outline:2px solid var(--ink); outline-offset:2px; border-radius:2px; } img { max-width:100%; display:block; } p, dd, li { margin:0; word-break:keep-all; } a { color:inherit; } /* 제목: 큰 자리는 400, 작은 자리는 500. GDS Heading 은 «굵지 않다» — 위계는 크기와 온도가 만든다. weight 는 400/500/700 셋뿐. */ h1,h2,h3,h4 { font-family:var(--display); font-weight:400; margin:0; letter-spacing:-.022em; word-break:keep-all; text-wrap:balance; } h3,h4 { font-weight:500; } .num { font-variant-numeric:tabular-nums lining-nums; } .mono { font-family:var(--mono); letter-spacing:.02em; } /* ── 페이지 · GDS 여백 16 / 24 / 40 ─────────────────────────────── */ .page { width:100%; max-width:var(--page); margin:0 auto; padding:0 var(--s-m) var(--s-xxl); } @media (min-width:768px){ .page{ padding-left:var(--s-xl); padding-right:var(--s-xl);} } @media (min-width:1120px){ .page{ padding-left:var(--s-xxxl); padding-right:var(--s-xxxl);} } /* 라벨 레일 = 활자 서랍 전면의 라벨 홀더 */ .rail { display:flex; align-items:center; justify-content:space-between; gap:var(--s-m); min-height:56px; padding:var(--s-l) 0; } .rail-brand { display:flex; align-items:center; gap:var(--s-s); text-decoration:none; } .rail-brand > svg { width:28px; height:28px; flex:0 0 28px; color:var(--ink); } .rail-word { font-family:var(--display); font-weight:500; font-size:var(--t-m); letter-spacing:-.02em; } .rail-nav { display:flex; gap:var(--s-m); font-size:var(--t-xs); font-weight:500; } .rail-nav a { color:var(--ink-soft); text-decoration:none; } .rail-nav a:hover { color:var(--ink); } .rail-nav a[aria-current="page"] { color:var(--ink); } /* ── 케이스 = «하나의 면을 1px 공유 괘선으로 분할» ──────────────── 칸 사이 1px gap 으로 --metal-line 이 비쳐 «공유» 괘선이 된다. 칸마다 테두리를 그리면 겹쳐 2px 가 되고 트레이 환영이 깨진다. ⛔ 금지. 그림자도 전면 금지 — 깊이는 오직 «채움»(종이 vs 금속)이 말한다. */ .case { display:grid; gap:1px; background:var(--metal-line); border:1px solid var(--metal-line); border-radius:8px; overflow:hidden; grid-template-columns:repeat(2,minmax(0,1fr)); } @media (min-width:820px){ .case{ grid-template-columns:repeat(12,minmax(0,1fr)); } } /* 🔴 기본값을 «전폭» 으로 둔다. 12열 격자에서 클래스를 안 주면 span 1(≈80px)로 쪼그라들어 칸이 통째로 깨진다 — 좁히는 것은 아래 .c-* 가 «명시적으로» 한다. */ .cell { grid-column:1/-1; background:var(--ground); padding:var(--s-l); position:relative; min-width:0; } @media (min-width:768px){ .cell{ padding:var(--s-xl); } } .cell--well { background:var(--well); padding:var(--s-m); } .c-declare { grid-column:1/-1; } .c-app { grid-column:1/-1; display:flex; flex-direction:column; gap:var(--s-m); } /* 스튜디오 칸이 빠져 앱 칸이 유일해졌다 — 1/9 로 두면 오른쪽 4열이 빈 채 남는다. */ @media (min-width:820px){ .c-app { grid-column:1/-1; } } /* 인덱스 — 상세 「기능」 칸 6개를 세는 자리(장식 · aria-hidden). 랜딩에서는 셀 대상이 없어 쓰지 않는다. */ .idx { position:absolute; top:var(--s-m); right:var(--s-m); font-family:var(--mono); font-size:var(--t-xs); color:var(--metal-mark); letter-spacing:.04em; } /* 활자 타일 — 고정 로고의 구축법(44 · r14)이 모든 활자의 템플릿. ⛔ r14 는 이 타일 «전용» 으로 봉인한다. UI 표면으로 새어 나가지 않는다. */ .sort { display:block; width:44px; height:44px; border-radius:14px; overflow:hidden; flex:0 0 44px; transition:transform .15s var(--ease); } .sort img { width:100%; height:100%; object-fit:cover; } /* ── 선언 칸 ────────────────────────────────────────────────────── */ .declare { display:flex; gap:var(--s-xl); align-items:flex-start; justify-content:space-between; } .declare h1 { font-size:var(--t-hero); line-height:1.18; letter-spacing:-.034em; max-width:14em; } .declare p { margin-top:var(--s-m); max-width:36em; color:var(--ink-soft); font-size:var(--t-m); } .declare > svg { width:72px; height:72px; flex:0 0 72px; color:var(--ink); } @media (max-width:819px){ .declare > svg { display:none; } } /* ── 앱 칸 ──────────────────────────────────────────────────────── */ .c-app { text-decoration:none; color:inherit; transition:background .15s var(--ease); } .c-app:hover { background:var(--well); } .c-app:hover .sort { transform:translateY(-2px); } .c-app:hover .idx { color:var(--ink-soft); } .app-head { display:flex; align-items:center; gap:var(--s-s); } .app-name { font-size:var(--t-xl); letter-spacing:-.02em; } .app-ko { font-size:var(--t-xs); color:var(--ink-soft); } .app-line { font-size:var(--t-m); max-width:26em; } .app-foot { display:flex; align-items:center; gap:var(--s-s); flex-wrap:wrap; margin-top:auto; } .app-go { font-size:var(--t-s); font-weight:500; color:var(--app-ink); } /* 상태 스탬프 — ⛔ 기울이지 않는다(기울인 스탬프는 키치다). */ .stamp { display:inline-block; padding:3px var(--s-xs); border:1px solid var(--metal-line); border-radius:4px; font-size:var(--t-xs); font-weight:500; color:var(--ink-soft); line-height:1.5; } /* 만드는 방식 — 3칸 */ .c-way { grid-column:1/-1; } @media (min-width:600px){ .c-way{ grid-column:span 1; } } @media (min-width:820px){ .c-way{ grid-column:span 4; } } .c-way h3 { font-size:var(--t-l); } .c-way p { margin-top:var(--s-xs); font-size:var(--t-s); color:var(--ink-soft); } /* ── 섹션 리듬 — GDS: 템플릿 상하 24 · Heading↔그룹 16 ──────────── */ .tpl { padding:var(--s-xl) 0; } .tpl-head { display:flex; align-items:baseline; gap:var(--s-s); margin-bottom:var(--s-m); } .tpl-head h2 { font-size:var(--t-xl); } .tpl-head span { font-size:var(--t-xs); color:var(--ink-soft); } .note { margin-top:var(--s-s); font-size:var(--t-xs); color:var(--ink-soft); } /* 섹션 라벨(새겨진 표기 축) — 인라인 스타일 대신 이 클래스를 쓴다. */ .tpl-label { font-family:var(--body); font-weight:500; font-size:var(--t-xs); color:var(--metal-mark); margin:0 0 var(--s-s); } .app-ko { display:block; } /* ── 푸터 = 사업 실체를 녹여 넣은 fine print ───────────────────── 참조 시안(hood.am 밀도)의 구조를 우리 토큰과 GDS 스케일로 옮겼다. 구분자는 «면» 이 아니라 오른쪽 1px 괘선 — 케이스와 같은 금속 축이다. */ .fine { margin-top:var(--s-xxl); padding-top:var(--s-l); border-top:1px solid var(--metal-line); display:grid; gap:var(--s-xs); font-size:var(--t-xs); line-height:1.7; color:var(--ink-soft); } .fine-line { display:flex; flex-wrap:wrap; align-items:baseline; } .fine-line > * { padding-right:var(--s-s); margin-right:var(--s-s); border-right:1px solid var(--metal-line); } .fine-line > *:last-child { padding-right:0; margin-right:0; border-right:0; } /* 링크는 «보이는 리듬은 그대로» 두고 히트 영역만 넓힌다(음수 마진 상쇄). */ .fine-line a { display:inline-block; padding:var(--s-xxs) var(--s-s) var(--s-xxs) 0; margin:calc(var(--s-xxs) * -1) var(--s-s) calc(var(--s-xxs) * -1) 0; text-decoration:underline; text-decoration-color:var(--metal-line); text-underline-offset:3px; transition:text-decoration-color .16s var(--ease); } .fine-line a:hover { text-decoration-color:var(--ink); } /* 터치에서는 히트 영역을 44 로 넓힌다. 음수 마진이 시각 리듬을 되돌리므로 두 줄의 히트가 겹치지 않도록 gap 도 함께 벌린다(24 - 12 - 12 = 0 겹침). */ @media (max-width:599px){ .fine { gap:var(--s-xl); } .fine-line a { padding-top:var(--s-s); padding-bottom:var(--s-s); margin-top:calc(var(--s-s) * -1); margin-bottom:calc(var(--s-s) * -1); } } /* 각인된 마크. 11px 은 GDS 가 «예외 케이스에 한정» 으로 허용한 값이고 저작권 표기가 정확히 그 예외다. 색은 --ink-soft 를 유지해 AA 를 지킨다 (위계는 밝기가 아니라 «크기와 자간» 이 만든다). */ .fine-mark { margin-top:var(--s-xxs); font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.22em; color:var(--ink-soft); } /* 잉크 밑줄 — 링크는 «색» 이 아니라 «그어진 선» 이 어포던스를 진다. 셸에는 액센트가 없다: 색이 있는 자리는 «칸 안» 뿐이다. */ .ln { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; text-decoration-color:var(--metal-line); transition:text-decoration-color .16s var(--ease); } .ln:hover { text-decoration-color:var(--ink); } /* ── 상세: 잉크가 스민 종이 ─────────────────────────────────────── */ .c-hero { grid-column:1/-1; background:var(--app-wash); } .c-hero h1 { font-size:var(--t-sub); line-height:1.22; margin-top:var(--s-m); } .c-hero .app-ko { margin-top:var(--s-xxs); } .c-hero p { margin-top:var(--s-s); max-width:30em; color:var(--ink-soft); font-size:var(--t-m); } .hero-sort { width:72px; height:72px; border-radius:22px; } .hero-foot { display:flex; flex-wrap:wrap; gap:var(--s-s); align-items:center; margin-top:var(--s-l); } .btn { display:inline-flex; align-items:center; min-height:44px; padding:0 var(--s-l); border-radius:8px; font-family:var(--display); font-weight:500; font-size:var(--t-s); text-decoration:none; border:1px solid transparent; } .btn--ink { background:var(--app-fill); color:var(--app-on); } .btn--quiet { border-color:var(--metal-line); color:var(--ink); } /* 숫자 견본 */ .c-fig { grid-column:span 1; } @media (min-width:820px){ .c-fig{ grid-column:span 3; } } .c-fig b { display:block; font-family:var(--display); font-weight:400; font-size:var(--t-xxxl); line-height:1.3; letter-spacing:-.02em; } .c-fig span { display:block; margin-top:var(--s-xxs); font-size:var(--t-xs); color:var(--ink-soft); } .c-feat { grid-column:1/-1; } @media (min-width:600px){ .c-feat{ grid-column:span 1; } } @media (min-width:820px){ .c-feat{ grid-column:span 4; } } .c-feat h3 { font-size:var(--t-l); } .c-feat p { margin-top:var(--s-xs); font-size:var(--t-s); color:var(--ink-soft); } /* ── 모션: 한 페이지에 «한 순간» ───────────────────────────────── */ .case .cell { animation:settle .45s var(--ease) both; } .case .cell:nth-child(2){ animation-delay:.05s; } .case .cell:nth-child(3){ animation-delay:.10s; } .case .cell:nth-child(4){ animation-delay:.15s; } .case .cell:nth-child(5){ animation-delay:.20s; } .case .cell:nth-child(6){ animation-delay:.25s; } @keyframes settle { from { opacity:0; transform:translateY(6px); } } @media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } .c-app:hover .sort { transform:none; } } /* ── 앱 랜딩 전용 (시안 · 아직 배포하지 않는다) ─────────────────── hood.am/routineday 형태의 «앱 전용 랜딩» 을 우리 케이스 문법으로 옮긴 것. ⛔ 배지·후기·통계는 없다(출시 전이라 전부 거짓이 된다). */ .c-pitch { grid-column:1/-1; } .pitch { display:grid; gap:var(--s-xl); align-items:center; } @media (min-width:820px){ .pitch { grid-template-columns:1fr auto; gap:var(--s-xxxl); } .pitch--flip{ grid-template-columns:auto 1fr; } .pitch--flip .pitch-body { order:2; } } .pitch h3 { font-size:var(--t-xxl); line-height:1.4; } .pitch p { margin-top:var(--s-s); font-size:var(--t-m); color:var(--ink-soft); max-width:30em; } .pitch ul { margin:var(--s-m) 0 0; padding:0; list-style:none; display:grid; gap:var(--s-xs); } .pitch li { font-size:var(--t-s); color:var(--ink-soft); padding-left:var(--s-s); position:relative; } .pitch li::before { content:""; position:absolute; left:0; top:.72em; width:4px; height:4px; border-radius:50%; background:var(--metal-mark); } /* 화면 «자리» — 🔴 시안 전용 표식이다. 실제 캡처로 교체하기 «전» 에는 배포 금지. 빈 칸(footprint)과 달리 이건 «비어 있음» 이 아니라 «아직 안 넣음» 을 말한다. */ .shots { display:flex; flex-wrap:wrap; gap:var(--s-m); } .shot { flex:1 1 90px; max-width:300px; aspect-ratio:9/19.5; border:1px dashed var(--metal-mark); border-radius:8px; background:var(--well); display:grid; place-items:center; text-align:center; padding:var(--s-s); font-family:var(--mono); font-size:var(--t-xs); color:var(--metal-mark); line-height:1.6; } /* 폭은 «칸이 정한다» — 3장이 케이스 폭을 채우도록 자라고 300 에서 멈춘다. */ /* ⚠️ .pitch 안의 자리는 flex 가 아니라 «grid» 자식이라 flex-basis 가 안 먹는다. 폭을 명시하지 않으면 내용 폭(≈105px)으로 쪼그라든다. */ .pitch .shot { flex:0 0 auto; width:220px; }