/* 펭얼깨 소개 사이트 — 남극 밤바다 · 얼음 글자. 이름 글자는 앱 첫 화면 로고(.logo-ink)와 같은 세 겹이다.
   색: 바다 #0b2c52 → 깊은 바다 #061a33 · 얼음 #cdeefc · 윤곽 먹 #0f2a4a · 두께 #141826 */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:#061a33}
body{margin:0;color:#eaf6ff;font:500 16px/1.55 var(--head);background:#061a33;overflow-x:hidden}
img{max-width:100%}
a{color:#bfe8ff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 줄바꿈 — 언어마다(site-kit §8). keep-all 은 한국어에만 */
html[lang="ko"] body{word-break:keep-all;overflow-wrap:break-word}
html[lang="ja"] body,html[lang^="zh"] body{line-break:strict}
html[lang="ja"] h1,html[lang="ja"] figcaption,html[lang="ja"] .tag{word-break:auto-phrase}

/* ── 위 띠 ─────────────────────────────────────────── */
.top{position:absolute;inset:0 0 auto;z-index:5;display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(14px,3vw,28px);pointer-events:none}
.top>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:900 17px/1 var(--name);
  text-shadow:0 1px 3px rgba(6,26,51,.8)}
.brand img{width:36px;height:36px;border-radius:9px;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.langpick{position:relative;font-size:14px}
.langpick summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;
  color:#fff;background:rgba(6,26,51,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(205,238,252,.25)}
.langpick summary::-webkit-details-marker{display:none}
.langpick ul{position:absolute;right:0;top:calc(100% + 6px);margin:0;padding:6px;list-style:none;min-width:210px;max-height:70vh;overflow:auto;
  background:#0b2c52;border:1px solid rgba(205,238,252,.25);border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.langpick li>*{display:block;padding:7px 12px;border-radius:9px;color:#eaf6ff;text-decoration:none}
.langpick li a:hover{background:rgba(205,238,252,.12)}
.langpick li [aria-current]{background:#cdeefc;color:#0b2c52;font-weight:700}

/* ── 첫 화면 ───────────────────────────────────────── */
.hero{position:relative;isolation:isolate;text-align:center}
.hero .art{display:block;width:100%;height:min(64vh,520px);object-fit:cover;object-position:56% 42%}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero .art{-webkit-mask-image:linear-gradient(#000 62%,transparent 100%);mask-image:linear-gradient(#000 62%,transparent 100%)}
.title{position:relative;margin:max(-150px,-24vh) auto 0;padding:0 18px 48px;max-width:760px}

/* 이름 — 앱 web/styles.css .logo-ink 의 세 겹(윤곽 · 두께 · 채움)을 그대로 */
.mark{margin:0 auto;font:var(--name-w) clamp(50px,12.5vw,118px)/1.06 var(--name);letter-spacing:-.01em;text-wrap:balance}
.mark img{display:block;width:min(88vw,600px);height:auto;margin:0 auto;filter:drop-shadow(0 8px 22px rgba(0,0,0,.45))}
.mark .ink{position:relative;isolation:isolate;display:inline-block;max-width:100%;padding:.15em .2em .26em;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.45))}
.mark .ink::before,.mark .ink::after{content:attr(data-text);position:absolute;inset:0;padding:inherit;text-align:center}
.mark .ink::before{z-index:0;color:#0f2a4a;-webkit-text-stroke:.3em #0f2a4a;text-shadow:0 .11em 0 #0f2a4a}
.mark .ink::after{z-index:1;color:#141826;-webkit-text-stroke:.07em #141826;
  text-shadow:-.006em .025em 0 #141826,-.012em .05em 0 #141826,-.018em .075em 0 #141826,-.024em .1em 0 #141826}
.mark .fill{position:relative;z-index:2;display:block;color:#cdeefc;
  background:linear-gradient(180deg,#ecf9ff 12%,#c8ebfb 50%,#9fd6f3 92%) 0 0/100% 1.06em repeat-y;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:.03em #c4e9fa}
html[lang="ja"] .mark .fill{-webkit-text-stroke:.05em #c4e9fa}
html[lang^="zh"] .mark .fill{-webkit-text-stroke:0}

/* 헤드라인 한 줄 — 흰 글자 + 남색 윤곽 두 겹(뒤 윤곽 · 앞 채움, store-kit 6-2) */
.tag{position:relative;display:inline-block;margin:6px auto 0;padding:0 .2em;font:900 clamp(21px,5.2vw,34px)/1.25 var(--head);
  color:#fff;text-wrap:balance}
.tag::before{content:attr(data-text);position:absolute;inset:0;padding:inherit;color:#0f2a4a;-webkit-text-stroke:.22em #0f2a4a;
  text-shadow:0 .07em 0 #0f2a4a;z-index:0}
.tag span{position:relative;z-index:1}

/* 배지 — 같은 높이 · 늘이거나 누르지 않는다(site-kit §8) */
.stores{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px}
.stores img{display:block;height:54px;width:auto;box-sizing:content-box}
.stores a{display:block;border-radius:10px;transition:transform .15s}
.stores a:hover{transform:translateY(-2px)}

/* ── 스크린샷 여섯 — 헤드라인 + 화면, 설명 문단 없음 ───────────── */
.shots{position:relative;padding:28px 0 72px;
  background:
    radial-gradient(1200px 500px at 50% -10%,rgba(127,200,240,.16),transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0l28 16v32L28 64 0 48V16zM28 64v33' fill='none' stroke='%23cdeefc' stroke-opacity='.06' stroke-width='1.5'/%3E%3C/svg%3E"),
    linear-gradient(#061a33,#0a2747 55%,#061a33)}
.rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px max(18px,calc(50vw - 150px)) 24px;
  scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail figure{flex:0 0 min(72vw,300px);margin:0;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center}
figcaption{min-height:2.5em;margin-bottom:14px;text-align:center;font:900 clamp(21px,5.6vw,27px)/1.22 var(--head);color:#fff;
  text-shadow:0 2px 0 #0f2a4a,0 0 18px rgba(6,26,51,.9);text-wrap:balance}
.phone{position:relative;width:100%;aspect-ratio:480/1067;border-radius:30px;padding:7px;
  background:linear-gradient(160deg,#2b4a6e,#0f2340 60%);box-shadow:0 22px 50px rgba(0,0,0,.5),inset 0 0 0 1px rgba(205,238,252,.18)}
.phone img,.phone .blank{display:block;width:100%;height:100%;object-fit:cover;border-radius:23px}
.phone .blank{background:linear-gradient(180deg,#9fd6f3,#2d6aa0 45%,#0b2c52)}

@media (min-width:760px){
  .rail{display:grid;grid-template-columns:repeat(3,minmax(0,280px));justify-content:center;gap:56px 40px;overflow:visible;padding:24px 28px 8px}
  .rail figure{flex:none}
  .rail figure:nth-child(3n+2){transform:translateY(36px)}
}
@media (min-width:1280px){
  .rail{grid-template-columns:repeat(3,minmax(0,300px));gap:72px 64px}
  figcaption{font-size:28px}
}

/* ── 맺음 ──────────────────────────────────────────── */
.close{position:relative;text-align:center;padding:40px 18px 64px;
  background:linear-gradient(#061a33,#0b2c52 40%,#123d6b)}
.floe{position:relative;height:120px;margin:0 auto 6px;max-width:420px}
.floe::before{content:"";position:absolute;left:12%;right:12%;bottom:10px;height:26px;border-radius:50%;
  background:radial-gradient(closest-side,#eaf8ff,#9fd6f3 70%,transparent);opacity:.9}
.px{position:absolute;image-rendering:pixelated;height:auto}
.px.p1{width:99px;left:22%;bottom:22px}
.px.s1{width:120px;right:16%;bottom:12px}
.app-icon{width:96px;height:96px;border-radius:22px;box-shadow:0 10px 26px rgba(0,0,0,.45)}
.close-name{margin:14px 0 0;font:var(--name-w) clamp(30px,6vw,44px)/1.1 var(--name);color:#cdeefc}
/* 이름 서체(둥근 라틴)에 한글이 없다 — ko 는 헤드라인 서체로 */
html[lang="ko"] .close-name{font:900 clamp(30px,6vw,44px)/1.1 var(--head)}

footer{padding:28px 18px 40px;text-align:center;font-size:14px;color:#9bbbd6;background:#061a33}
footer a{color:#bfe8ff}
.foot-langs{margin-top:14px;font-size:13px;line-height:1.9}
.foot-langs [aria-current]{color:#fff;font-weight:700}

/* 넓은 화면 — 그림을 화면 가득, 이름은 그림 아래쪽 어두운 바다 위 */
@media (min-width:900px){
  .hero .art{height:min(100vh,56vw);min-height:560px;object-position:50% 38%;
    -webkit-mask-image:linear-gradient(#000 70%,transparent 100%);mask-image:linear-gradient(#000 70%,transparent 100%)}
  /* 이름 덩어리는 오른쪽 아래 물 위 — 펭귄(가운데) · 물범(오른쪽 위)을 안 덮는다. 피처 그래픽과 같은 자리 */
  .title{position:absolute;left:auto;right:3.5vw;bottom:6vh;width:min(46vw,680px);margin:0;padding-bottom:0}
  .mark{font-size:clamp(72px,6.6vw,116px)}
  .mark img{width:min(36vw,560px)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* 폰 — 배지 둘이 한 줄에 들게(390 에서 46px 두 장 + 간격 = 316px) */
@media (max-width:520px){.stores img{height:46px}.stores{gap:10px}}
/* 이름은 한 낱말 — 앱 로고(.logo-text)처럼 낱말 안에서 안 끊는다. ja «ペンギン氷わ/り» 가 한 글자만 떨어졌다.
   ja 는 띄어쓰기가 없어 한 줄이 통째로 한 낱말이라 크기를 폭에 맞춰 줄인다(7자) */
.mark .ink{word-break:keep-all}
html[lang="ja"] .mark{font-size:clamp(40px,11vw,104px)}
@media (min-width:900px){html[lang="ja"] .mark{font-size:min(5.8vw,96px)}}