/* 스톤 어라이브 GHOST 공식 홈페이지 — 2026-09-19 개편
   결 : 넷마블 스톤에이지 공식 사이트처럼 (풀스크린 KV → 돌판 섹션 → 커뮤니티 → 어두운 푸터)
   색은 전부 토큰으로. 한 벌짜리 어두운 테마라 media 갈래 없이 값을 명시한다. */

/*--- 글꼴 (2026-09-22 WEBFONT) ---

    전에는 이름만 적어 두고 **그 PC 에 깔린 글꼴을 찾아 쓰게** 했다.
    안 깔린 사람에게는 조용히 맑은 고딕으로 떨어져, 만든 사람 화면과
    남의 화면이 달랐다. 이제 우리가 파일을 같이 내려 준다.

    woff2 는 OTF 의 3분의 1 이하다 (1.2MB -> 0.37MB).
    swap 이라 글꼴이 오기 전에는 기본 글꼴로 먼저 보이고, 오면 바뀐다.
    빈 화면으로 기다리지 않는다.                                        */
@font-face{
  font-family:"ONE Mobile POP";
  src:url("fonts/one-mobile-pop.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"ONE Mobile Title";
  src:url("fonts/one-mobile-title.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --ink:#f6efe2;            /* 본문 글자 */
  --ink-dim:#c7b9a3;
  --ink-mute:#8d7f6c;
  --bg:#120f0c;             /* 가장 어두운 바닥 */
  --bg-2:#1b1611;
  --stone:#2a231b;          /* 돌판 */
  --stone-2:#3a3025;
  --line:rgba(255,236,200,.14);
  --gold:#ffc861;           /* 강조 (로고 금색) */
  --gold-2:#ff9b3d;
  --ember:#ff6a3d;
  --ok:#7fd4a8;
  --shadow:0 18px 40px rgba(0,0,0,.45);
  --head-h:72px;
  --wrap:1200px;
  --font:"ONE Mobile POP","ONE Mobile Title","Malgun Gothic","맑은 고딕",
         "Apple SD Gothic Neo",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); line-height:1.65; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
/* 앵커로 뛸 때 머리띠에 가리지 않게 */
section[id],[id]{scroll-margin-top:calc(var(--head-h) + 18px)}

/* ───────────────────────────── 머리띠 */
.head{
  position:fixed; inset:0 0 auto 0; height:var(--head-h); z-index:60;
  display:flex; align-items:center; gap:24px; padding:0 24px;
  background:linear-gradient(180deg,rgba(10,8,6,.92),rgba(10,8,6,.55) 70%,transparent);
  transition:background .25s ease, box-shadow .25s ease;
}
.head.solid{background:rgba(14,11,9,.96); box-shadow:0 6px 24px rgba(0,0,0,.45)}
/* 새 가로 로고(2026-09-21) 는 2:1 이 넘어 40px 로는 글자가 안 읽힌다 */
.head .logo img{height:52px; width:auto}
@media (max-width:640px){ .head .logo img{height:42px} }
.head nav{display:flex; align-items:center; gap:28px; margin-left:8px}
.head nav a{
  position:relative; font-size:16px; color:var(--ink-dim); padding:6px 2px;
  transition:color .18s ease;
}
.head nav a:hover,.head nav a.on{color:var(--gold)}
.head nav a.on::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px;
  border-radius:3px; background:linear-gradient(90deg,var(--gold),var(--ember));
}
.head .right{margin-left:auto; display:flex; align-items:center; gap:12px}

/*  으뜸 단추. 웹런처의 '게임 시작' 과 같은 결로 맞췄다 (2026-09-22) :
    위에서 아래로 밝아지는 금빛, 안쪽 윗줄에 얇은 빛, 아랫줄에 그늘,
    그리고 지나가는 빛줄기. 눌러야 하는 것은 이것 하나뿐이라는 뜻이다. */
.pill{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 22px;
  border:1px solid #ffe09b; border-radius:999px; font-size:15px; white-space:nowrap;
  background:linear-gradient(180deg,#ffd76d,#e89625 55%,#b85c18);
  color:#321708; font-weight:700; letter-spacing:.02em;
  box-shadow:inset 0 2px #fff0ba, inset 0 -3px rgba(104,40,9,.34),
             0 8px 22px rgba(197,100,25,.30);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.pill:hover{
  transform:translateY(-2px); filter:brightness(1.06);
  box-shadow:inset 0 2px #fff0ba, inset 0 -3px rgba(104,40,9,.34),
             0 14px 32px rgba(229,126,34,.46);
}
.pill:active{transform:translateY(0); filter:brightness(.96)}
/*  지나가는 빛줄기. 가리개(overflow:hidden) 안에서만 움직인다 */
.pill::after{
  content:""; position:absolute; top:-80%; left:-40%; width:30%; height:250%;
  transform:rotate(22deg); pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent);
  transition:left .6s ease;
}
.pill:hover::after{left:130%}
@media (prefers-reduced-motion:reduce){
  .pill,.pill::after{transition:none}
  .pill:hover{transform:none}
}
.ghost-btn{
  display:inline-flex; align-items:center; height:42px; padding:0 18px;
  border:1px solid var(--line); border-radius:999px; font-size:15px; color:var(--ink-dim);
  transition:border-color .18s ease,color .18s ease;
}
.ghost-btn:hover{border-color:var(--gold); color:var(--gold)}
.burger{display:none; font-size:24px; line-height:1}

/* 하위 메뉴 — 크림색 버블 (넷마블 스톤에이지 결) */
.drop{position:relative}
.drop-top{display:inline-flex; align-items:center; gap:6px}
.drop-top i{font-style:normal; font-size:12px; opacity:.7; transition:transform .18s ease}
.drop:hover .drop-top i{transform:rotate(180deg)}

.drop-menu{
  position:absolute; left:50%; top:calc(100% + 16px); translate:-50% 0;
  display:flex; align-items:center; gap:0; white-space:nowrap;
  padding:14px 30px; border-radius:30px; gap:14px;
  background:linear-gradient(180deg,#fffaf0,#f3e3c4);
  border:2px solid #d8bf93;
  box-shadow:0 12px 26px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.9);
  opacity:0; visibility:hidden; transform:translateY(-8px) scale(.96);
  transform-origin:top center;
  transition:opacity .16s ease, transform .18s cubic-bezier(.2,1.3,.4,1), visibility .18s;
}
/* 위쪽 꼬리 */
.drop-menu::before{
  content:""; position:absolute; left:50%; translate:-50% 0; top:-9px;
  width:16px; height:16px; rotate:45deg; border-radius:4px;
  background:#fffaf0; border-left:2px solid #d8bf93; border-top:2px solid #d8bf93;
}
/* 마우스가 메뉴와 버블 사이 틈에서 끊기지 않게 */
.drop-menu::after{content:""; position:absolute; left:0; right:0; top:-18px; height:18px}
.drop:hover .drop-menu,.drop:focus-within .drop-menu{opacity:1; visibility:visible; transform:none}

.head nav .drop-menu a{     /* .head nav a 보다 특이도가 높아야 색이 먹는다 */
  position:relative; display:inline-block; padding:7px 16px; border-radius:16px;
  font-size:17px; color:#3a2410; font-weight:700; letter-spacing:-.02em;
  transition:color .15s ease, transform .15s ease;
}
.head nav .drop-menu a:hover{color:#8a3a12; transform:translateY(-1px)}
.head nav .drop-menu a.on::after{content:none}
/* 항목 사이 ◆ */
.head nav .drop-menu a + a::before{
  content:"◆"; position:absolute; left:-14px; top:50%; translate:0 -52%;
  font-size:10px; color:#b8975f; pointer-events:none;
}

/* ───────────────────────────── 대문 */
.kv{
  position:relative; min-height:min(100svh,940px); display:grid; place-items:center;
  overflow:hidden; text-align:center; padding:var(--head-h) 20px 120px;
}
.kv-bg{
  position:absolute; inset:-4%; z-index:0;
  /* 가로 그림 하나로 모든 화면을 받는다 (2026-09-21).
     cover 라 화면이 세로로 길수록 좌우가 잘린다. 그래서 화면 생김새에
     따라 '어디를 보여 줄지'와 '얼마나 확대할지'를 달리한다. */
  background:url("kv-bg.webp") center/cover no-repeat;
  /* 흐림을 걸지 않는다. 원본(1672px)이 이미 화면보다 작아 늘어나 있어
     더 뭉개면 알아볼 수 없게 된다. 분위기는 위의 어두운 막으로 낸다. */
  filter:saturate(1);
  image-rendering:auto;
  animation:kvDrift 20s ease-in-out infinite alternate;   /* 한 방향 20초, 왕복 40초 */
}
/* 확대·축소 움직임은 그대로 둔다 (사장님 마음에 든다고 하심).
   그만큼 그림이 늘어나므로, 화질은 원본을 크게 다시 뽑아 잡는다. */
/* ── 배경 반응형 (2026-09-21) ──
   가로 그림(16:9) 하나를 쓰므로, 화면이 세로로 길어질수록 좌우가 크게
   잘린다. 인물이 가운데 아래에 몰려 있어 볼 자리를 조금씩 내린다. */

/* 노트북·데스크톱 : 그대로 가운데 */
@media (min-aspect-ratio:16/10){
  .kv-bg{background-position:center 42%}
}

/* 태블릿 세로 · 좁은 창 : 인물이 있는 가운데를 잡는다 */
@media (max-aspect-ratio:16/10){
  .kv-bg{background-position:center 40%}
}

/* 휴대폰 세로 : 좌우가 많이 잘리므로 조금 물러나 더 넓게 보여 준다 */
@media (max-aspect-ratio:3/4){
  .kv{min-height:min(88svh,760px)}
  .kv-bg{background-position:center 38%; background-size:auto 100%}
}

/* 아주 좁은 기기 : 가로를 다 보여 주고 위아래를 남긴다 */
@media (max-width:420px){
  .kv-bg{background-size:cover; background-position:center 36%}
}

@keyframes kvDrift{from{transform:scale(1.02) translate3d(0,0,0)} to{transform:scale(1.09) translate3d(0,-1.2%,0)}}
.kv::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% 18%,rgba(0,0,0,0),rgba(0,0,0,.30) 72%),
    linear-gradient(100deg,rgba(10,8,6,.84) 0%,rgba(10,8,6,.44) 38%,rgba(10,8,6,0) 66%),
    linear-gradient(180deg,rgba(10,8,6,.52) 0%,rgba(10,8,6,0) 30%,rgba(10,8,6,.80) 100%);
}
.kv-in{position:relative; z-index:2; display:grid; justify-items:center; gap:22px}
@media (min-width:1100px){
  .kv{justify-items:start; text-align:left; padding-left:6vw}
  .kv-in{justify-items:start; max-width:620px}
  .kv-btns{justify-content:flex-start}
}
/* 로고는 제자리에서 천천히 떠다닌다. 그림자도 같이 움직여야 떠 보인다 */
.kv-logo{
  width:min(560px,78vw); filter:drop-shadow(0 12px 28px rgba(0,0,0,.6));
  animation:logoFloat 6s ease-in-out infinite;
  will-change:transform;
}
@keyframes logoFloat{
  0%   {transform:translateY(0)      rotate(-0.5deg)}
  50%  {transform:translateY(-13px)  rotate(0.5deg)}
  100% {transform:translateY(0)      rotate(-0.5deg)}
}
.kv-copy{margin:0; font-size:clamp(22px,3.4vw,40px); text-wrap:balance; text-shadow:0 4px 16px rgba(0,0,0,.7)}
.kv-copy b{color:var(--gold)}
.kv-sub{margin:-8px 0 0; color:var(--ink-dim); font-size:clamp(14px,1.5vw,17px)}
.kv-btns{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:6px}
.store{
  display:flex; align-items:center; gap:12px; padding:12px 24px; border-radius:16px;
  background:rgba(20,16,12,.82); border:1px solid var(--line); min-width:210px; text-align:left;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.store:hover{transform:translateY(-3px); border-color:var(--gold); background:rgba(30,23,16,.9)}
.store .ic{font-size:24px}
.store b{display:block; font-size:16px}
.store small{color:var(--ink-mute); font-size:12px}
.store.dim{opacity:.62}

.kv-social{
  position:absolute; left:0; right:0; bottom:34px; z-index:2;
  display:flex; gap:14px; justify-content:center;
}
.rock{
  width:54px; height:54px; display:grid; place-items:center; border-radius:16px;
  background:linear-gradient(180deg,var(--stone-2),var(--stone));
  border:1px solid var(--line); box-shadow:var(--shadow); font-size:18px; color:var(--ink);
  transition:transform .15s ease, border-color .15s ease;
}
.rock:hover{transform:translateY(-3px); border-color:var(--gold); color:var(--gold)}
.scroll-cue{
  position:absolute; left:50%; translate:-50% 0; bottom:104px; z-index:3;
  font-size:12px; letter-spacing:.22em; color:var(--ink-mute);
}
.scroll-cue i{display:block; font-style:normal; margin-top:6px; animation:bob 1.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)}}
@media (min-width:1100px){                      /* 캐릭터 띠에 가리지 않게 왼쪽으로 */
  .scroll-cue{left:6vw; translate:0 0; bottom:44px}
}

/* KV 위에 얹는 실제 게임 캐릭터 아트 */
.kv-cast{
  position:absolute; z-index:2; right:-2vw; bottom:86px; width:min(62vw,880px);
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.6));
  animation:castIn 1.1s cubic-bezier(.2,.9,.3,1) both;
  pointer-events:none;
}
@keyframes castIn{from{opacity:0; transform:translateY(40px) scale(.98)} to{opacity:1; transform:none}}
@media (max-width:1100px){
  .kv-cast{right:-6vw; bottom:104px; width:min(78vw,720px); opacity:.9}
}
@media (max-width:900px){
  .kv-cast{position:static; order:2; width:min(100vw,660px); margin:18px auto -10px; right:auto; opacity:1}
  .kv-in{order:1}
  .scroll-cue{display:none}
  .kv{padding-bottom:150px}
}

/* ───────────────────────────── 섹션 공통 */
.sec{position:relative; padding:110px 0 120px; overflow:hidden}
.sec-bg{position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; opacity:.42; filter:saturate(.8) blur(1px)}
.sec::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,var(--bg) 0%,rgba(16,13,10,.86) 20%,rgba(16,13,10,.88) 80%,var(--bg) 100%);
}
.sec .wrap{position:relative; z-index:2}
.sec-title{text-align:center; margin:0 0 14px; font-size:clamp(26px,3vw,38px)}
.sec-title span{color:var(--gold); margin:0 14px; font-size:.7em; vertical-align:middle}
.sec-eyebrow{text-align:center; margin:0 0 42px; color:var(--ink-mute); font-size:12px; letter-spacing:.3em}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.card{
  position:relative; display:block; padding:34px 28px 30px; border-radius:22px; min-height:190px;
  background:linear-gradient(180deg,rgba(48,39,29,.92),rgba(26,21,16,.92));
  border:1px solid var(--line); box-shadow:var(--shadow);
  transition:transform .18s ease, border-color .18s ease;
}
.card:hover{transform:translateY(-6px); border-color:var(--gold)}
.card b{display:block; font-size:22px; margin-bottom:6px}
.card em{display:block; font-style:normal; color:var(--gold); font-size:11px; letter-spacing:.24em; margin-bottom:14px}
.card p{margin:0; color:var(--ink-dim); font-size:15px}
.card i{position:absolute; right:22px; top:24px; font-style:normal; color:var(--ink-mute); transition:color .18s ease}
.card:hover i{color:var(--gold)}

/* 게임 정보 : 그림 + 목록 */
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center}
.shot{border-radius:24px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); background:#0e0b09}
.shot img{width:100%; height:auto; display:block}
.list{display:grid; gap:14px}
.row{
  display:flex; align-items:center; gap:18px; padding:20px 22px; border-radius:18px;
  background:rgba(28,23,17,.86); border:1px solid var(--line);
  transition:transform .15s ease, border-color .15s ease;
}
.row:hover{transform:translateX(6px); border-color:var(--gold)}
.row b{font-size:18px; min-width:92px}
.row span{color:var(--ink-dim); font-size:14px}
.row i{margin-left:auto; font-style:normal; color:var(--ink-mute)}

/* 커뮤니티 */
.community{text-align:center}
.community p{color:var(--ink-dim); margin:0 0 34px}
.rocks{display:flex; gap:18px; justify-content:center; flex-wrap:wrap}
.rocks .rock{width:88px; height:88px; border-radius:22px; font-size:15px; gap:4px; flex-direction:column}
.rocks .rock small{color:var(--ink-mute); font-size:11px}

/* 소식 */
.news{display:grid; gap:12px; max-width:920px; margin:0 auto}
.news a{
  display:flex; align-items:center; gap:18px; padding:18px 22px; border-radius:16px;
  background:rgba(24,19,14,.9); border:1px solid var(--line);
  transition:border-color .15s ease, transform .15s ease;
}
.news a:hover{border-color:var(--gold); transform:translateY(-2px)}
.tag{
  font-size:11px; letter-spacing:.14em; padding:5px 10px; border-radius:999px;
  border:1px solid var(--line); color:var(--gold);
}
.news b{font-weight:600; font-size:16px}
.news time{margin-left:auto; color:var(--ink-mute); font-size:13px; font-variant-numeric:tabular-nums}

/* 푸터 */
footer{background:#0b0907; border-top:1px solid var(--line); padding:46px 0 60px; text-align:center}
footer .ft-logo{font-size:20px; letter-spacing:.06em}
footer .ft-logo b{color:var(--gold)}
footer nav{display:flex; gap:22px; justify-content:center; margin:18px 0 16px; flex-wrap:wrap}
footer nav a{color:var(--ink-dim); font-size:14px}
footer nav a:hover{color:var(--gold)}
footer small{color:var(--ink-mute); font-size:12px}

/* 나타나기 */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .kv-bg{animation:none}
  .kv-logo{animation:none}
  .scroll-cue i{animation:none}
}

/* 좁은 화면 */
@media (max-width:1040px){
  .cards{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
}
@media (max-width:820px){
  .head nav{
    position:fixed; inset:var(--head-h) 0 auto 0; flex-direction:column; gap:0;
    background:rgba(14,11,9,.98); border-bottom:1px solid var(--line);
    padding:8px 0; display:none;
  }
  .head nav.open{display:flex}
  .head nav a{padding:14px 24px; width:100%}
  .head nav a.on::after{display:none}
  .drop{width:100%}
  .drop-top{width:100%; justify-content:space-between}
  .drop-menu{
    position:static; translate:none; transform:none; opacity:1; visibility:visible;
    border:0; border-radius:0; box-shadow:none; padding:6px 0;
    background:linear-gradient(180deg,#fffaf0,#f3e3c4); display:none;
    flex-direction:column; align-items:stretch; white-space:normal;
  }
  .drop-menu::before,.drop-menu::after{display:none}
  .drop.open .drop-menu{display:flex}
  .head nav .drop-menu a{padding:12px 40px; border-radius:0; text-align:left}
  .head nav .drop-menu a + a::before{
    content:"◆"; position:static; translate:none; margin-right:8px; font-size:9px;
  }
  .burger{display:block; margin-left:auto}
  .head .right .ghost-btn{display:none}
  .sec{padding:80px 0 88px}
}

/* ── 쪽 배경 (2026-09-21) ──
   다른 쪽은 섹션마다 .sec-bg 를 깔지만 도감처럼 한 덩이인 쪽은 쪽 전체에 한 장만
   고정해 둔다. 그림 위에 어두운 막을 덮어 글자가 묻히지 않게 한다. */
.page-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-size:cover; background-position:center;
  opacity:.30; filter:saturate(.8) blur(2px);
}
.page-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,var(--bg) 0%,rgba(16,13,10,.55) 26%,rgba(16,13,10,.6) 74%,var(--bg) 100%);
}
.sa-info-main,footer{position:relative; z-index:1}

/* ── 가짜 굵게 걷어내기 (2026-09-21) ──
   ONE Mobile POP 에는 굵은 자체(bold)가 없다. 그런데 브라우저는 제목 태그와
   <b>·<strong> 에 굵게를 주므로, 없는 자체를 억지로 부풀려 그린다.
   획이 뭉개져 오히려 읽기 어렵다 — 강조는 색과 크기로 한다.

   단추(.pill 등)는 다른 바탕에 얹히고 글자가 작아 그대로 둔다. */
h1,h2,h3,h4,h5,h6,
b,strong,
.sa-pet-name,.sa-pet-list-name,.al-top h2{
  font-weight:400;
}

/* ── 글자 그림자 (2026-09-21) ──
   어두운 바탕에 밝은 글자라 획이 번져 보인다. 얇고 어두운 그림자를 깔면
   글자 테두리가 또렷해져 읽기 쉬워진다. 굵게 대신 쓰는 것이다.

   그림자를 두 겹 준다 — 바로 아래 1px 로 획을 세우고, 넓게 퍼지는 것으로
   배경 그림 위에서도 뜨게 한다. 큰 글자일수록 넓게. */
body{
  text-shadow:0 1px 2px rgba(0,0,0,.55);
}
h1,h2{
  text-shadow:0 2px 6px rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.6);
}
h3,h4{
  text-shadow:0 1px 4px rgba(0,0,0,.65);
}

/* 밝은 바탕에 어두운 글자인 곳은 빼야 한다 — 그림자가 때가 된다 */
.pill,.store b,.store small,.sa-attr-label,.sa-calc-dist-bar-v2,
.btn_submit,input,select,textarea,option{
  text-shadow:none;
}

/* ── 인게임 마우스 커서 (2026-09-23) ─────────────────────
   게임에서 쓰는 생선뼈 커서(그림 25000)를 홈페이지에도 쓴다.
   32x32 라 브라우저가 그대로 받아 준다 (더 크면 무시하는 곳이 있다).
   끝의 auto/pointer 는 그림을 못 받았을 때 쓰는 대비책이다.

   글 입력칸에는 걸지 않는다 - 글자 사이를 짚어야 해서
   생선뼈로는 어디를 가리키는지 알 수 없다.                    */
body, .sa-wrap, a, button, .btn{
  cursor:url('/assets/cursor.png?v2') 4 2, auto;
}
a:hover, button:hover, .btn:hover, [role="button"]:hover, .mk-block:hover, .mk-cat:hover{
  cursor:url('/assets/cursor_click.png?v2') 4 2, pointer;
}
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], textarea{
  cursor:text;
}


/* ── 바탕 배경 (2026-09-23) ──────────────────────────────
   카드 바깥이 휑하다는 말이 나와서 깔았다. 전에는 배경 그림을
   페이지 머리에서만 인라인으로 써서, 있는 쪽과 없는 쪽이 갈렸다.

   그림은 계절로 고른다 (head.sub.php 가 클래스를 붙인다).
   **아주 옅게** 깐다 - 글이 읽히는 것이 먼저다.
   fixed 라 스크롤해도 따라오지 않는다. 배경이 같이 굴러가면
   긴 글에서 어지럽다.

   메인(kv-bg 를 쓰는 쪽)은 제 배경이 있으므로 건드리지 않는다. */
body.sa-bg::before{
  content:''; position:fixed; inset:0; z-index:-2;
  background-position:center top;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
  opacity:.16;
  pointer-events:none;
}
/*  배경 위에 어두운 막 한 겹. 글자와 배경이 싸우지 않게 한다. */
body.sa-bg::after{
  content:''; position:fixed; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(20,16,12,.55), rgba(20,16,12,.82));
  pointer-events:none;
}
body.sa-bg-spring::before{background-image:url('sec-spring.webp')}
body.sa-bg-summer::before{background-image:url('sec-summer.webp')}
body.sa-bg-autumn::before{background-image:url('sec-autumn.webp')}

/*  메인은 큰 그림(kv-bg)이 따로 있다. 두 겹이 되면 탁해진다. */
body.sa-home::before, body.sa-home::after{display:none}

/*  배경이 생겼으니 카드가 바탕에서 떠 보이게 그림자를 조금 준다. */
body.sa-bg .sec .wrap > *{position:relative}