/* ══════════════════════════════════════════════════════════════ 조각과 줄의 꼴 — 베틀과 모터사이클이 «함께» 씁니다 (2026-08-13, common/piece_svg.js 와 한 벌) 조각이 서로 물리는 것은 «겹쳐 놓기» 로 만듭니다 — 조각의 돌기가 옆 조각 위로 −42px 만큼 올라타야 이가 맞습니다. 그 값을 두 판이 따로 지니면 한쪽만 어긋납니다. 빛깔은 여기 없습니다 — 자리빛은 조각마다 style 로 붙습니다. ══════════════════════════════════════════════════════════════ */ .row{display:flex;align-items:flex-start;min-height:120px} .row{position:relative} .row .sfield{display:flex;align-items:flex-start;position:relative; /* 판도 같은 결로 — 위는 빛을 받고 아래로 갈수록 그늘 */ background:linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.10) 26%, rgba(255,255,255,0) 46%, rgba(0,0,0,.10) 74%, rgba(0,0,0,.26)), var(--sc); border-radius:11px; box-shadow:inset 0 2px 0 rgba(255,255,255,.50), inset 2px 0 0 rgba(255,255,255,.18), inset -2px 0 0 rgba(0,0,0,.14), inset 0 -3px 0 rgba(0,0,0,.26), 0 3px 4px rgba(0,0,0,.20), 0 8px 14px rgba(0,0,0,.22); /* 이름이 앉을 붉은 띠 — y·g 꼬리와 그림자까지 다 담기게 넉넉히 냅니다 (원장 지시 2026-08-08 — 「they 가 빨간 테두리 «안에서» 음각화」). 전에는 꼬리가 흰 자리로 넘어가 이름이 판 밖으로 삐져나온 것처럼 보였습니다. */ /* 옆으로 물린 만큼이 안쪽 여백과 «똑같아야» 뒤 조각이 제 깊이(-42px)로 물립니다. -20 이던 때는 4px 이 남아 목적어가 덜 물렸습니다. */ padding:38px 10px 11px;margin:-38px -10px -8px} .row .sfin{display:flex;align-items:flex-start; background:rgba(255,255,255,.62);background-clip:padding-box; border-style:solid;border-width:7px 8px; border-top-color:rgba(255,255,255,.97); border-left-color:rgba(255,255,255,.82); border-right-color:rgba(255,255,255,.50); border-bottom-color:rgba(255,255,255,.34); border-radius:4px; box-shadow:0 3px 4px rgba(0,0,0,.30), 0 7px 12px rgba(0,0,0,.22); margin:-7px -8px} .row .sfname{position:absolute;left:0;right:0;top:5px;text-align:center; font-size:34px;font-weight:900;line-height:1;letter-spacing:2px; pointer-events:none; color:transparent;-webkit-text-fill-color:transparent; /* 어두운 쪽을 넉넉히 둡니다 — I 처럼 획이 하나뿐인 이름은 밝은 마디만 걸려 흐릿하게 보였습니다 */ background:linear-gradient(180deg, var(--sd) 0%, var(--sd) 38%, var(--sc) 74%, var(--sl) 100%); -webkit-background-clip:text;background-clip:text; /* 땅거죽이 빛나는 가는 선 하나 */ text-shadow:0 2px 0 rgba(255,255,255,.45), 0 3px 2px rgba(255,255,255,.16)} .row .sfield.flat{background:var(--sc);box-shadow:none} .row .sfield.flat .sfin{background:rgba(255,255,255,.72); border-color:rgba(255,255,255,.72); box-shadow:none} .row .sfield.flat .sfname{background:none;color:var(--sd); -webkit-text-fill-color:var(--sd); text-shadow:none} .row .sfield + .pz, .row .sfield + .relbox{position:relative;z-index:1;margin-left:-42px} .row .sfname.ghost{background:none;text-shadow:none; display:flex;justify-content:center;align-items:center;height:26px} .row .sfname.ghost::before{content:'';display:block;width:74px;height:20px; border:2px dashed var(--sd);border-radius:7px;opacity:.45} .row .sfield.oslot{padding:32px 8px 8px;margin:-64px 0 -16px} .row .sfield.oslot > .sfin{border-width:4px;margin:-4px} .row .sfin > .sfield.nest{margin:0;padding-top:32px} .row .sfname.oname{top:3px} .row .sfarrow{position:absolute;left:0;right:0;top:21px;text-align:center; font-size:13px;line-height:1;font-weight:900; color:var(--sd);opacity:.85;pointer-events:none} .row .sfield + .sfield{margin-left:10px} .row .sfield + .pz.free, .row .sfield + .relbox.free{margin-left:6px} .row[data-sb]{padding:40px 10px 0} .row[data-sb="2"]{padding-top:66px} .row .pz + .pz{margin-left:-42px} .row .pz + .pz.free{margin-left:6px} .row .relbox{position:relative;display:inline-flex;flex-direction:column;align-items:flex-start; padding:28px 46px;background:none!important;border:0; /* 앞 조각의 그림은 오른쪽에 6px 여백이 더 있습니다(폭 w+6) — 그래서 왼쪽은 42px 을 당겨야 몸과 몸이 맞닿습니다 */ margin-left:-42px} .row .relbox:first-child{margin-left:0} .row .relbox.free{margin-left:6px} .row .relbox + .pz{margin-left:-36px} .row .relbox + .pz.free{margin-left:6px} .row .relbox > .rv-bg{position:absolute;left:0;top:0;pointer-events:none} .row .relbox > .rv-scene, .row .relbox > .rv-head, .row .relbox > .rv-conj{position:relative} .row .relbox .rv-the{position:absolute;left:36px;top:5px;width:52px;height:22px} .row .relbox .rv-pin{position:absolute;right:30px;top:12px;width:30px;height:30px;border-radius:50%; background:#fff;border:2px solid rgba(0,0,0,.35);color:#DE2B1F; font-size:18px;font-weight:900;display:flex;align-items:center;justify-content:center} .row .relbox .rv-head{font-size:23px;font-weight:900;color:#fff;margin:2px 0 6px 4px} .row .relbox .rv-conj{align-self:flex-start;background:#78909C;color:#fff;border-radius:6px; border:2px solid rgba(0,0,0,.3);padding:2px 14px;margin:0 0 8px 2px; font-size:19px;font-weight:900;line-height:1.35} .row .relbox .rv-scene{display:block;border-radius:7px;padding:5px; background:rgba(0,0,0,.15);transform:translateY(2px); box-shadow:inset 0 5px 9px rgba(0,0,0,.42), inset 0 -2px 0 rgba(255,255,255,.20)} .row .relbox .rv-scene .row{min-height:0} .row .relbox .rv-scene .pz{filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))} .row .relbox.pred{padding:14px 46px} .row .relbox.pred .rv-scene{padding:4px} .row .relbox .rv-scene .orl{position:absolute;left:0;top:0;pointer-events:none;z-index:3} .row .pz.free.tight{margin-left:-26px} .row .pz.lift{position:absolute;transform:scale(.68) rotate(-6deg); filter:drop-shadow(4px 6px 6px rgba(0,0,0,.35));z-index:6} .row .pz{position:relative} .pz{cursor:pointer;transition:transform .08s} .pz:active{transform:scale(.97)} .pz.used{opacity:.26;pointer-events:none} .pz.shake{animation:shk .3s} .slot-wait{animation:pulse 1.1s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}} .row .sfname{font-size:26px} /* 「the」 표(접힌 모서리 + 구멍)의 «바탕 크기». 여태 크기가 액자 안에서만 정해져 있었습니다 — .place .gnd .tmark · .time .tlab .tmark. 그래서 액자 밖(절 상자 안)에 서면 크기가 없어 SVG 기본값 300×150 으로 부풀었습니다. 교과서 문장을 절 상자로 묶자 「the」 가 상자를 가득 채웠습니다 (2026-08-13). 액자 안에서는 위 두 규칙이 더 세게 걸리니 그대로입니다. */ .tmark{width:88px;height:45px}