/* 문법 참조 페이지 전용 — SPA용 styles.css(69KB)와 분리.
   이유: 크롤·초기표시 속도(정적 문서에 앱 스타일 전체는 과함) + 스타일 간섭 차단. */
:root{
  --blue:#007aff; --label:#1d1d1f; --secondary:rgba(60,60,67,.60);
  --bg:#f2f2f7; --surface:#fff; --separator:rgba(60,60,67,.16);
  --fill:rgba(118,118,128,.12);
}
@media (prefers-color-scheme:dark){
  :root{
    --blue:#0a84ff; --label:#f5f5f7; --secondary:rgba(235,235,245,.60);
    --bg:#000; --surface:#1c1c1e; --separator:rgba(84,84,88,.65);
    --fill:rgba(118,118,128,.24);
  }
}
*{box-sizing:border-box; min-width:0}   /* flex/grid 자식의 기본 min-width:auto가 가로 오버플로를 만든다 */
html{overflow-x:hidden}
body{
  margin:0; background:var(--bg); color:var(--label);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",
    "Segoe UI",Roboto,sans-serif;
  line-height:1.75; -webkit-text-size-adjust:100%;
  overflow-wrap:anywhere;   /* 한/일 혼용 장문·괄호 나열이 가로로 삐져나가지 않게 */
}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}

.gnav{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  max-width:760px; margin:0 auto; padding:14px 20px;
}
.gnav-home{font-weight:700; font-size:17px; color:var(--label); letter-spacing:-.01em}
.gnav-cta{
  font-size:14px; font-weight:600; color:#fff; background:var(--blue);
  padding:8px 14px; border-radius:980px;
}
.gnav-cta:hover{text-decoration:none; opacity:.9}

.crumb{
  max-width:760px; margin:0 auto; padding:4px 20px 0;
  font-size:13px; color:var(--secondary);
}
.crumb span{margin:0 2px; opacity:.5}
.crumb strong{font-weight:600; color:var(--label)}

.gwrap{max-width:760px; margin:0 auto; padding:8px 20px 56px}

.g-h1{
  font-size:30px; line-height:1.35; letter-spacing:-.02em; font-weight:700;
  margin:18px 0 6px; display:flex; flex-direction:column; gap:6px;
}
.g-gloss{font-size:16px; font-weight:500; color:var(--secondary); letter-spacing:0}
.g-fullname{margin:0 0 4px; font-size:14px; color:var(--secondary)}

.g-sec{
  background:var(--surface); border-radius:20px; padding:20px 22px;
  margin:20px 0; border:1px solid var(--separator);
}
.g-sec h2{
  margin:0 0 10px; font-size:13px; font-weight:700; letter-spacing:.06em;
  color:var(--secondary); text-transform:uppercase;
}
.g-meaning{margin:0; font-size:16px}

.g-form{margin:0}
.g-form code{
  display:block; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14px; line-height:1.7; background:var(--fill);
  padding:12px 14px; border-radius:12px;
}

/* 形の日本語読み — 한국어 공식 바로 아래. 파랑 세로선으로 '해설'임을 표시 */
.g-form-ja{
  margin:8px 0 0; padding:9px 14px; font-size:15px; line-height:1.7;
  border-left:3px solid var(--blue); background:var(--surface); border-radius:0 12px 12px 0;
}
/* 산문형 form의 폴백 — 등장한 문법용어만 대응표로 */
.g-form-terms{margin:8px 0 0; font-size:13.5px; line-height:1.9; color:var(--secondary)}
.g-form-terms .g-term b{color:var(--label); font-weight:600}
.g-form-terms .g-term-sep{opacity:.4}

/* 접속 규칙 — 원문의 단락/불릿/소제목 구조를 그대로 조판 */
.g-rule{font-size:15px}
.g-rule p{margin:0 0 10px}
.g-rule p:last-child{margin-bottom:0}
.g-rule h3{
  margin:20px 0 8px; font-size:14px; font-weight:700; color:var(--blue);
  letter-spacing:-.01em;
}
.g-rule h3:first-child{margin-top:0}
.g-rule ul{margin:0 0 10px; padding:0; list-style:none}
.g-rule li{
  position:relative; padding:5px 0 5px 16px; font-size:14.5px;
  border-top:1px solid var(--separator);
}
.g-rule li:first-child{border-top:0}
.g-rule li::before{
  content:""; position:absolute; left:2px; top:14px;
  width:5px; height:5px; border-radius:50%; background:var(--blue); opacity:.5;
}

.g-ex{margin:0; padding:0; list-style:none; counter-reset:ex}
.g-ex li{
  counter-increment:ex; padding:16px 0; border-top:1px solid var(--separator);
}
.g-ex li:first-child{border-top:0; padding-top:2px}
.ex-ko{
  margin:0 0 4px; font-size:20px; font-weight:600; line-height:1.6;
  letter-spacing:-.01em;
}
.ex-ko::before{
  content:counter(ex); display:inline-block; min-width:22px; height:22px;
  margin-right:8px; font-size:12px; font-weight:700; line-height:22px;
  text-align:center; color:var(--blue); background:rgba(0,122,255,.10);
  border-radius:7px; vertical-align:middle;
}
.ex-roman{margin:0 0 6px; font-size:13px; color:var(--secondary); font-style:italic}
.ex-ja{margin:0 0 8px; font-size:15px}
.ex-note{
  margin:0; font-size:14px; color:var(--secondary);
  background:var(--fill); padding:10px 14px; border-radius:12px;
}

.g-cta{
  background:var(--surface); border:1px solid var(--separator); border-radius:20px;
  padding:22px; margin:28px 0 8px; text-align:center;
}
.g-cta p{margin:0 0 6px; font-size:17px; font-weight:600}
.g-cta-sub{font-size:14px !important; font-weight:400 !important; color:var(--secondary)}
.g-btn{
  display:inline-block; margin-top:12px; background:var(--blue); color:#fff;
  font-weight:600; font-size:16px; padding:13px 28px; border-radius:14px;
}
.g-btn:hover{text-decoration:none; opacity:.9}

.g-pager{display:flex; gap:10px; margin:28px 0 12px}
.pg{
  flex:1; display:flex; flex-direction:column; gap:2px; padding:14px 16px;
  background:var(--surface); border:1px solid var(--separator); border-radius:14px;
  min-width:0;
}
.pg:hover{text-decoration:none; border-color:var(--blue)}
.pg span{font-size:12px; color:var(--secondary)}
.pg strong{font-size:15px; color:var(--label); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pg.next{text-align:right}
.pg.empty{flex:1; background:none; border:0}
.g-back{text-align:center; font-size:14px; margin:16px 0 0}

.hub-lead{font-size:16px; color:var(--secondary); margin:8px 0 20px}
/* 레벨 점프 내비 — 306개를 한 덩어리로 두면 아무도 못 읽는다 */
.hub-jump{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 28px}
.hub-jump a{
  display:flex; align-items:baseline; gap:6px; padding:9px 14px; border-radius:999px;
  background:var(--surface); border:1px solid var(--separator);
  color:var(--label); font-weight:700; font-size:15px;
}
.hub-jump a:hover{text-decoration:none; border-color:var(--blue); color:var(--blue)}
.hub-jump a span{font-size:12px; font-weight:500; color:var(--secondary)}
.hub-sec{margin:0 0 34px; scroll-margin-top:16px}
.hub-h2{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px;
  margin:0 0 4px; font-size:22px; letter-spacing:-.01em;
}
.hub-h2-ja{font-size:13px; font-weight:500; color:var(--secondary)}
.hub-h2-lead{margin:0 0 12px; font-size:14px; line-height:1.7; color:var(--secondary)}
.hub-list{
  margin:0; padding:0; list-style:none;
  background:var(--surface); border:1px solid var(--separator); border-radius:20px;
  overflow:hidden;
}
.hub-list li{border-top:1px solid var(--separator)}
.hub-list li:first-child{border-top:0}
.hub-list a{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px;
  padding:13px 20px; color:var(--label);
}
.hub-list a:hover{text-decoration:none; background:var(--fill)}
.hub-list strong{font-size:16px; font-weight:600}
.hub-list span{font-size:13px; color:var(--secondary); line-height:1.5}

.gfoot{
  max-width:760px; margin:0 auto; padding:24px 20px 40px;
  border-top:1px solid var(--separator); text-align:center;
}
.gfoot p{margin:0 0 6px; font-size:13px; color:var(--secondary)}
.gfoot-links a{color:var(--secondary)}

@media (max-width:520px){
  .g-h1{font-size:25px}
  .g-sec{padding:18px; border-radius:16px}
  .ex-ko{font-size:18px}
  .g-pager{flex-direction:column}
  .pg.next{text-align:left}
  .pg.empty{display:none}
}