/* ==========================================================================
   company.css — 기업소개(company/index.html) 전용 (2026-09-21 개편)
   - 읽는 순서: css/style.css → css/lo-common.css(색 토큰·머리 메뉴) → 이 파일
   - 클래스는 모두 co- 로 시작한다(style.css 와 겹치지 않게)
   - 색은 lo-common.css 토큰만 쓴다 → 다크모드는 body.dark-mode 로 저절로 따라감
   ========================================================================== */

:root { --co-deep: #16294A; }
body.dark-mode { --co-deep: #0E1A2E; }

body { background: var(--bg); color: var(--ink); }

/* 글자 끊기 — style.css 가 body 에 hyphens:auto 와 (한국어) text-align:justify 를 건다. 이 구역에서만 되돌림.
   ja·zh 는 keep-all 이면 문장이 통째로 한 단어가 되므로 예외 */
#lo-company { padding-top: 72px; text-align: start; overflow-wrap: normal; -webkit-hyphens: manual; hyphens: manual; word-break: keep-all; line-height: 1.62; }
html[lang="ja-JP"] #lo-company, html[lang="zh-CN"] #lo-company { word-break: normal; }
#lo-company img { max-width: 100%; display: block; }
#lo-company h1, #lo-company h2, #lo-company h3 { letter-spacing: -.035em; line-height: 1.25; margin: 0; }

.co-wrap { max-width: 1120px; margin: 0 auto; padding: 0 22px; }
.co-sec { padding: 84px 0; }
.co-eb { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sub); margin: 0 0 12px; }
.co-h2 { font-size: clamp(1.55rem, 3.6vw, 2.4rem); font-weight: 800; margin-bottom: 10px !important; text-wrap: balance; }
.co-lede { color: var(--sub); font-size: 1rem; font-weight: 500; margin: 0; max-width: 46ch; }
.co-ctr { text-align: center; }
.co-ctr .co-lede { margin-inline: auto; }
.co-card { background: var(--card); border-radius: var(--r-card); box-shadow: var(--cardsh); }
.co-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surf2); color: var(--sub); border-radius: 999px; padding: 4px 11px; font-size: .74rem; font-weight: 700; }
.co-chip.soon { background: var(--warmbg); color: var(--warm); }
.co-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 16px; padding: 14px 24px; font-weight: 700; font-size: .95rem; }
.co-btn-p { background: var(--blueink); color: #fff; }
body.dark-mode .co-btn-p { color: #141416; }
.co-btn-g { border: 1px solid var(--line); color: var(--ink); background: var(--card); }
.co-btn:focus-visible, .co-dev:focus-visible, .co-links a:focus-visible { outline: 3px solid var(--blueink); outline-offset: 3px; }
html[dir="rtl"] #lo-company[dir="ltr"] .co-btn i { transform: none; }
.co-ex { position: absolute; top: 14px; inset-inline-end: 14px; font-size: .66rem; font-weight: 800; letter-spacing: .06em; color: var(--sub); background: var(--surf2); border-radius: 6px; padding: 3px 7px; }

/* 등장 효과 — 스크립트가 켜질 때만(co-anim) 숨겼다가 보여 줌 */
#lo-company.co-anim [data-rv]:not(.in) { opacity: 0; transform: translateY(14px); }
#lo-company [data-rv] { transition: opacity .6s ease, transform .6s ease; }
@media (prefers-reduced-motion: reduce) { #lo-company.co-anim [data-rv]:not(.in) { opacity: 1; transform: none; } }

/* 1 · 사명 */
.co-hero { padding: 64px 0 70px; position: relative; overflow: hidden; }
/* 위 끝을 px 로(2026-09-30) — % 면 번역 글이 들어와 첫 화면 높이가 바뀔 때 배경 무늬가 위아래로 움직여 «화면 흔들림» 점수 0.14 가 났음 */
.co-hero::before { content: ""; position: absolute; inset: -220px -10% auto -10%; height: 120%; pointer-events: none;
  background: radial-gradient(48% 42% at 78% 36%, color-mix(in srgb, var(--band) 90%, transparent), transparent 70%),
              radial-gradient(40% 36% at 12% 12%, color-mix(in srgb, var(--warmbg) 80%, transparent), transparent 70%); }
.co-hero > .co-wrap { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.co-hero h1 { font-size: clamp(2.1rem, 5.6vw, 3.7rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.16; margin: 0 0 18px !important; }
.co-hero h1 em { font-style: normal; color: var(--blueink); }
.co-hero .co-lede { font-size: 1.06rem; margin-bottom: 30px; }
.co-cta { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 900px) { .co-hero > .co-wrap { grid-template-columns: 1fr; gap: 36px; } }

.co-chart { position: relative; padding: 22px 22px 18px; }
.co-chart h3 { font-size: .95rem; font-weight: 800; margin-bottom: 2px !important; }
.co-chart .co-csub { font-size: .78rem; color: var(--sub); font-weight: 600; margin: 0 0 10px; }
.co-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.co-lg { display: flex; gap: 14px; flex-wrap: wrap; font-size: .74rem; font-weight: 700; color: var(--sub); margin-top: 10px; }
.co-lg i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin-inline-end: 6px; vertical-align: -1px; }
.co-lg .a { background: var(--surf2); }
.co-lg .m { background: var(--band); outline: 1.5px solid var(--blueink); }
.co-lg .t { background: var(--gold); border-radius: 50%; width: 10px; }
.co-cap { margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); font-size: .88rem; font-weight: 700; }
.co-cap b { color: var(--blueink); }
.sv-avg { fill: var(--surf2); } .sv-me { fill: var(--band); }
.sv-line { fill: none; stroke: var(--blueink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.sv-dot { fill: var(--card); stroke: var(--blueink); stroke-width: 2; } .sv-today { fill: var(--gold); }
.sv-ax { fill: var(--sub); font: 600 10px system-ui, sans-serif; }
.sv-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.sv-lbl { font: 800 11px system-ui, sans-serif; } .sv-lbl.a { fill: var(--sub); } .sv-lbl.m { fill: var(--blueink); } .sv-lbl.t { fill: var(--warm); }
body.dark-mode .sv-lbl.t { fill: var(--gold); }
@media (max-width: 600px) { .sv-lbl { font-size: 19px; } .sv-ax { font-size: 17px; } }

/* 2 · 어떻게 */
.co-how { background: var(--card); }
.co-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 34px; }
.co-step { position: relative; background: var(--bg); border-radius: var(--r-card); padding: 26px 24px 24px; }
.co-step .n { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; font-weight: 900; font-size: .95rem; margin-bottom: 16px; color: var(--on-gold); background: var(--gold); }
.co-step h3 { font-size: 1.12rem; font-weight: 800; margin-bottom: 8px !important; }
.co-step p { margin: 0; color: var(--sub); font-size: .92rem; font-weight: 500; }
.co-step .co-chip { margin-top: 12px; }
.co-step.s2 .n { background: var(--blueink); color: #fff; } body.dark-mode .co-step.s2 .n { color: #141416; }
.co-step.s3 .n { background: var(--okink); color: #fff; } body.dark-mode .co-step.s3 .n { color: #141416; }
.co-step .no { display: block; margin-top: 12px; font-size: .8rem; font-weight: 800; color: var(--okink); }
@media (max-width: 820px) { .co-steps { grid-template-columns: 1fr; } }

/* 3 · 제품 */
.co-prod { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; margin-top: 34px; align-items: stretch; }
.co-app { position: relative; padding: 28px; display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 24px; align-items: center; }
.co-app h3 { font-size: 1.3rem; font-weight: 800; margin-bottom: 8px !important; }
.co-app > div > p { margin: 0 0 16px; color: var(--sub); font-size: .94rem; }
.co-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.co-phone { width: 220px; border-radius: 32px; padding: 7px; background: var(--surf2); box-shadow: var(--cardsh); }
.co-scr { background: var(--bg); border-radius: 26px; overflow: hidden; padding: 10px 12px 16px; min-height: 330px; }
.co-sb { display: flex; justify-content: space-between; font: 800 10px system-ui, sans-serif; color: var(--ink); padding: 2px 6px 10px; direction: ltr; }
.co-kid { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border-radius: 999px; padding: 4px 10px 4px 4px; font-weight: 800; font-size: .76rem; box-shadow: var(--chipsh); margin-bottom: 10px; }
.co-kid i { width: 20px; height: 20px; border-radius: 50%; background: var(--sleepbg); color: var(--blueink); display: grid; place-items: center; font-style: normal; font-size: .66rem; font-weight: 900; }
.co-pc { background: var(--card); border-radius: 16px; padding: 12px; box-shadow: var(--chipsh); margin-bottom: 8px; }
.co-pc .t { font-size: .66rem; font-weight: 800; color: var(--sub); }
.co-pc .v { font-size: 1.15rem; font-weight: 900; letter-spacing: -.03em; margin: 2px 0; }
.co-pc .v small { font-size: .68rem; color: var(--sub); font-weight: 700; margin-inline-start: 4px; }
.co-pc .bar { height: 8px; border-radius: 99px; background: var(--surf2); position: relative; margin: 8px 0 4px; }
.co-pc .bar b { position: absolute; inset-block: 0; inset-inline-start: 48%; width: 22%; border-radius: 99px; background: var(--band); outline: 1.5px solid var(--blueink); }
.co-pc .bar u { position: absolute; top: -3px; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); inset-inline-start: 30%; border: 2px solid var(--card); }
.co-pc .nt { font-size: .7rem; font-weight: 800; color: var(--warm); }
body.dark-mode .co-pc .nt { color: var(--gold); }
.co-pc.ask { background: var(--band); }
.co-pc.ask .q { font-size: .72rem; font-weight: 800; }
.co-pc.ask .a { font-size: .68rem; color: var(--sub); font-weight: 600; margin-top: 4px; }
@media (max-width: 560px) { .co-app { grid-template-columns: 1fr; } .co-app .co-phone { justify-self: center; } }
.co-devs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.co-dev { display: flex; flex-direction: column; gap: 12px; padding: 16px; color: var(--ink); transition: transform .2s; }
.co-dev:hover { transform: translateY(-2px); }
.co-dev .im { height: 86px; border-radius: 16px; display: flex; align-items: center; justify-content: center; padding: 8px; }
.co-dev .im img { max-height: 70px; max-width: 70%; width: auto; height: auto; object-fit: contain; }
.co-dev .nm { display: block; font-size: .95rem; font-weight: 800; }
.co-dev .ds { display: block; font-size: .82rem; color: var(--sub); font-weight: 500; margin-top: 2px; }
.co-dev .co-chip { margin-top: 8px; font-size: .66rem; padding: 2px 8px; }
/* ⚠ 스마트 체인지는 실제로 가장 작은 디바이스인데 사진이 «납작»해서 max-width(70%)에 먼저 걸려
   네 카드 중 가장 크게 보였다 (2026-09-23 실측: 108×70px 으로 보틀 32×70 의 3.4배 면적).
   이 카드만 절반으로 줄인다 — 사진 파일은 그대로 두고 보이는 크기만 */
.co-dev .im.diaper img { max-height: 35px; max-width: 35%; }

.co-dev .im.feed { background: var(--feedbg); } .co-dev .im.temp { background: var(--warnbg); } .co-dev .im.diaper { background: var(--diaperbg); } .co-dev .im.wagon { background: var(--surf2); }
@media (max-width: 960px) { .co-prod { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .co-devs { grid-template-columns: 1fr; } }

/* 4 · 숫자 */
.co-num { background: var(--co-deep); color: #fff; }
.co-num .co-eb { color: rgba(255, 255, 255, .6); }
.co-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 34px; }
.co-st { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 20px; padding: 22px 20px; }
.co-st .v { font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 900; letter-spacing: -.04em; line-height: 1.1; color: #fff; }
.co-st .v small { font-size: .5em; font-weight: 800; margin-inline-start: 3px; opacity: .8; }
.co-st .l { font-size: .84rem; color: rgba(255, 255, 255, .72); font-weight: 600; margin-top: 8px; }
.co-creds { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.co-creds span { border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; padding: 8px 16px; font-size: .84rem; font-weight: 700; color: rgba(255, 255, 255, .88); }
/* 한국 안에서만 뜻이 있는 것(장관상)은 한국어 화면에만 (2026-09-30) */
html:not([lang^="ko"]) .co-ko-only { display: none; }
@media (max-width: 900px) { .co-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 5 · 함께하기 */
.co-pts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 34px; }
.co-pt { padding: 24px; }
.co-pt .ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 14px; color: var(--ink); font-size: 1.1rem; }
.co-pt .ic.feed { background: var(--feedbg); } .co-pt .ic.sleep { background: var(--sleepbg); } .co-pt .ic.diaper { background: var(--diaperbg); }
.co-pt h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 6px !important; }
.co-pt p { margin: 0; color: var(--sub); font-size: .9rem; font-weight: 500; }
.co-guard { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding: 14px 18px; border-radius: 16px; background: var(--okbg); color: var(--ink); font-size: .9rem; font-weight: 600; }
.co-guard b { color: var(--okink); white-space: nowrap; }
.co-pt-cta { margin-top: 26px; display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 900px) { .co-pts { grid-template-columns: 1fr; } }

/* 6 · 회사 */
.co-info { padding: 56px 0 70px; }
.co-info .co-wrap { display: grid; grid-template-columns: minmax(0, 640px); gap: 18px; }
.co-ic { padding: 26px; }
.co-ic h3 { font-size: 1.02rem; font-weight: 800; margin-bottom: 14px !important; }
.co-ic dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; font-size: .92rem; }
.co-ic dt { color: var(--sub); font-weight: 700; }
.co-ic dd { margin: 0; font-weight: 600; }
.co-links { display: flex; gap: 8px; flex-wrap: wrap; }
.co-links a { border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-size: .86rem; font-weight: 700; color: var(--ink); }

/* ── 휴대폰 목업 모양을 새 홈(css/home-v2.css)과 같게 (2026-09-25) ─────────────
   크기(220px)는 카드 안 작은 그림이라 그대로 둔다(300px 로 키우면 글 칸이 121~172px 로 좁아지고 화면 절반이 빔 — 사용자 결정).
   대신 비율을 맞춘다 — 새 홈: 너비 300 · 테두리 8 · 모서리 36/29 → 220 에 같은 비율: 테두리 6 · 모서리 26/21.
   상태 표시줄도 새 홈과 같은 그림(신호·와이파이·배터리 SVG)으로 바꿈(전에는 「●●● ▮」 글자) */
.co-phone { padding: 6px; border-radius: 26px; }
.co-scr { border-radius: 21px; }
.co-sb { align-items: center; font-size: 10px; color: var(--ink); }
.co-sb .r2 { display: flex; align-items: center; gap: 3px; }
.co-sb svg { height: 8px; width: auto; fill: currentColor; }