/* ── 구조 그래픽
⚠ 방향 속성을 쓰지 않는다. margin-left 가 아니라 margin-inline-start 다.
히브리어(RTL)와 한 벌로 쓰기 위해서다 — .smap.rtl 하나로 통째로 뒤집힌다.
헬라어(LTR)에서는 결과가 전과 같다. */
.smap{margin:16px 0 6px}
.smap.rtl{direction:rtl}
/* ⚠ 상자와 낱말만 뒤집는다. 라벨·설명은 한국어라 왼쪽에서 오른쪽으로 읽어야 한다.
안 그러면 마침표가 문장 앞으로 가고 「~의」가 「의~」가 된다. 실제로 그랬다. */
.smap.rtl .glab,.smap.rtl .gnote{direction:ltr;text-align:right}
.gbox{position:relative;margin:10px 0}
.glab{display:block;font-size:11px;letter-spacing:.03em;color:var(--ink3);
margin:0 0 5px;margin-inline-start:1px} /* ★ 0820 #8B7C5F → 토큰. 다크에서 안 읽혔다 */
.gnote{font-size:12.5px;line-height:1.7;color:var(--ink3);margin-top:7px}
.smap .row{display:flex;flex-wrap:wrap;gap:7px;align-items:flex-end;margin:0}
/* ── ★ 선으로 보기 — ⚠ 이 블록은 맨 뒤여야 한다 (G-150).
⚠ 0819 에 `.lay-ladder` 보다 앞에 두어 상자가 그대로 살아 있었다 —
힘이 같으면 뒤에 온 것이 이긴다. 산출물을 열어 보고 알았다.
㉰ ⚠ 테두리 상자를 아예 안 그린다.
㉯ 묶음은 낱말 아래 괄호 — 안쪽이 위, 바깥이 아래로 쌓인다.
③ ★ 라벨은 괄호 밖(`.gin` 다음)에 선다 — 글자를 안 덮는다. */
.sm-line .gbox{border:0 !important;background:none !important;box-shadow:none !important;
border-radius:0 !important;padding:0 !important;margin:0 !important}
.sm-line .gbox.d0{display:block;margin:10px 0 14px !important}
.sm-line .gbox.d1,.sm-line .gbox.d2,.sm-line .gbox.d3{
display:inline-block;vertical-align:bottom;width:auto;margin:0 3px 0 0 !important}
/* ★ 괄호 — 안쪽 칸에 건다. 라벨은 이 밖에 있다 */
.sm-line .gbox.d1 > .gin,.sm-line .gbox.d2 > .gin,.sm-line .gbox.d3 > .gin{
display:inline-block;padding-bottom:3px;border-bottom:2px solid var(--tier-1)}
.sm-line .gbox.d2 > .gin{border-bottom-color:var(--tier-2)}
.sm-line .gbox.d3 > .gin{border-bottom-color:var(--tier-3)}
.sm-line .gbox.d0 > .gin{display:block}
/* ④ 줄 너비를 내용만큼 — 왼쪽 빈 자리를 안 남긴다 */
.sm-line .row{display:inline-flex;flex-wrap:wrap;width:auto;gap:2px 5px;
align-items:flex-end;vertical-align:bottom}
/* ③ ㉯ 괄호 아래에 줄 하나를 비운다 — 라벨이 거기 선다 */
.sm-line .gbox.d1 > .glab,.sm-line .gbox.d2 > .glab,.sm-line .gbox.d3 > .glab{
display:block;margin:3px 0 0 !important;font-size:9.5px;line-height:1.5;
text-align:center;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-line .gbox.d0 > .glab{display:block;margin:0 0 5px !important}
.sm-line .gnote{display:block;margin-top:6px !important}
/* ③ 상자로 보기 — 옛 그림 그대로 */
.sm-box .gin{display:contents}
@media print{
.smap.rtl .gbox.d0{padding:6px 8px 5px;margin:5px 0}
.smap.rtl .gnote{margin-top:3px}
}
/* ─────────────────────────────────────────
★ 겹침 계단 — 상자가 겹칠 때마다 한 단씩 올라간다 (E-4 · G-218)
⚠ `.gbox.d0` 는 페이지(0단) 위에 놓인다 → d0=1단 · d1=2단 · d2=3단.
⚠ ★ d3 은 계단이 모자란다 — 3단에 겹쳐 둔다. 지금 자료에 d3 은 0자리다.
⚠ 옛 판은 흰 장막(rgba(255,255,255,.x))으로 단을 냈다 —
★ 다크에서 회색 덮개가 되어 글자를 먹었다. 토큰으로 갈았다 (G-218 ③).
⚠ 테두리는 흰색·검정의 투명도만 쓴다 — 색상 축이 없다.
───────────────────────────────────────── */
.lay-ladder .gbox.d0{border:1px solid var(--edge);border-radius:12px;padding:12px 14px;
background:var(--lvl-1)}
.lay-ladder .gbox.d1,.lay-ladder .gbox.d2,.lay-ladder .gbox.d3{
margin:8px 0 0;margin-inline-start:18px;padding:9px 12px;
border:1px solid var(--edge);border-radius:10px;background:var(--lvl-2)}
.lay-ladder .gbox.d2,.lay-ladder .gbox.d3{background:var(--lvl-3);border-color:var(--edge-2)}
/* 액자 — 말 안에 말 */
.lay-frame .gbox.d0{border:1px solid var(--edge);border-radius:12px;padding:13px 15px;
background:var(--lvl-1)}
/* ⚠ 인용은 점선이 나른다 — 옛 판은 금색 점선이었다. 색을 뺐다 */
.lay-frame .gbox.d1{margin:10px 0 0;padding:11px 13px;border:1.5px dashed var(--edge-2);
border-radius:10px;background:var(--lvl-2)}
.lay-frame .gbox.d2{margin:9px 0 0;margin-inline-start:16px;padding:9px 12px;
border-inline-start:2px solid var(--edge-2);
border-start-start-radius:0;border-end-start-radius:0;
border-start-end-radius:8px;border-end-end-radius:8px;
background:var(--lvl-3)}
/* 나란히 두 칸 */
.lay-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lay-pair .gbox.d0{border:1px solid var(--edge);border-radius:12px;padding:12px 14px;
background:var(--lvl-1);margin:0}
.lay-pair .gbox.d1{margin:8px 0 0;padding:0;border:0}
/* 장면 — 절 카드
⚠ 옛 판은 왼쪽 굵은 선이 초록(--v)이었다. ★ 색이 「동사 있음」으로 읽혔다 —
그런 뜻이 아니었다. 굵기만으로 남긴다 (E-4 ①㉯). */
.lay-scene .gbox.d0{border:1px solid var(--edge);border-inline-start:3px solid var(--edge-2);
border-start-start-radius:4px;border-end-start-radius:4px;
border-start-end-radius:12px;border-end-end-radius:12px;
padding:12px 14px;background:var(--lvl-1)}
.lay-scene .gbox.d1{margin:9px 0 0;margin-inline-start:16px;padding:9px 12px;
border-inline-start:2px solid var(--edge-2);
border-start-start-radius:0;border-end-start-radius:0;
border-start-end-radius:9px;border-end-end-radius:9px;
background:var(--lvl-2)}
.lay-scene .gbox.d2{margin:8px 0 0;margin-inline-start:14px;padding:8px 11px;
border-inline-start:2px dotted var(--edge-2);background:var(--lvl-3)}
/* 여정 */
.lay-chain .gbox.d0{border:1px solid var(--edge);border-radius:12px;padding:11px 13px;
background:var(--lvl-1);margin:8px 0}
.lay-chain .gbox.d0::after{content:"↓";display:block;text-align:center;color:var(--ink3);
font-size:13px;margin:-2px 0 -14px}
.lay-chain .gbox.d0:last-child::after{content:""}
.lay-pair .g-span{grid-column:1/-1}
/* 일부러 안 그린 절. 빈칸으로 두면 「아직 안 만들었나」로 읽힌다 */
.nostruct{margin:12px 0 0;padding:11px 13px;border:1px dashed var(--edge-2);border-radius:10px;
font:400 12.5px/1.8 var(--kr);color:var(--ink3);background:var(--lvl-1)}
.nostruct b{color:var(--ink2)}
/* ⚠ 「쟁점으로」 단추 — 옛 판은 테두리·글자가 주홍(#CE6641)이었다.
★ 단추는 상자다. 색을 빼고 → 글자와 테두리 진하기로 남긴다 */
.nostruct .gotoiss{display:block;margin:9px 0 0;border:1px solid var(--edge-2);background:none;
border-radius:99px;padding:4px 12px;font:400 11.5px var(--kr);color:var(--ink2);cursor:pointer}
.nostruct .gotoiss:hover{background:var(--hover);border-color:var(--ink3)}
/* 강조 태그 */
.g-aspect{border-color:var(--edge-2)!important}
/* ⚠ 인용은 점선으로 표시한다 — 장막을 걷었다 (G-218) */
.g-quote{border-style:dashed!important}
.btype{font-size:11px;background:var(--lvl-2);color:var(--ink2);border-radius:99px;
padding:3px 9px;margin-inline-start:8px}
@media(max-width:620px){
.lay-pair{grid-template-columns:1fr}
.lay-ladder .gbox.d1,.lay-ladder .gbox.d2,.lay-ladder .gbox.d3{margin-inline-start:10px}
}