<![CDATA[
<p style="text-align: left;"><!DOCTYPE html><br><html lang="ko"><br><head><br><meta charset="UTF-8"><br><meta name="viewport" content="width=device-width, initial-scale=1.0"><br><title>12폭 병풍 — 뒷면: 그리운 북녘의 맛</title><br><link rel="preconnect" href="https://fonts.googleapis.com"><br><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><br><link href="https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&family=Noto+Serif+KR:wght@400;500;600;700&display=swap" rel="stylesheet"><br><style><br> :root{<br> --paper:#EAE0C8; --paper-dark:#DDCFAC; --ink:#20180F; --ink-soft:#4B4030;<br> --wood:#3E2A1C; --wood-light:#5A3E29; --seal:#9B3A2B; --gold:#A9813F; --room:#D8D2C4;<br> }<br> *{ box-sizing:border-box; }<br> html,body{ margin:0; padding:0;<br> background: radial-gradient(ellipse 80% 60% at 50% 0%, #E4DFD2 0%, var(--room) 60%, #C9C2B2 100%);<br> font-family:'Noto Serif KR', serif; color:var(--ink); min-height:100vh;<br> }<br> .page{ display:flex; flex-direction:column; align-items:center; padding:40px 12px 48px; }<br> .label{ font-size:12px; letter-spacing:0.35em; color:var(--ink-soft); margin-bottom:20px; text-transform:uppercase; }<br> .label b{ color:var(--seal); font-weight:700; }<br><br> .scale-wrap{ width:100%; max-width:1180px; overflow:hidden; }<br> #screenShadow{ display:inline-block; transform-origin:top left;<br> filter: drop-shadow(0 24px 36px rgba(40,30,15,0.28)); }<br><br> .screen{ background: repeating-linear-gradient(115deg, var(--wood) 0px, var(--wood-light) 3px, var(--wood) 7px);<br> border-radius:3px; padding:14px 14px 18px; }<br> .inner{ display:flex; flex-direction:column; }<br><br> .trim{ background: repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 10px),<br> linear-gradient(180deg, #7C2E22, var(--seal) 55%, #7C2E22);<br> border:1px solid #4d1d15; color:#F1E4CF; text-align:center; }<br> .trim-top{ padding:14px 20px 12px; border-radius:2px 2px 0 0; }<br> .trim-top .title{ font-family:'Nanum Myeongjo', serif; font-weight:800; font-size:23px; letter-spacing:0.06em; white-space:nowrap; }<br> .trim-top .sub{ margin-top:4px; font-size:12px; letter-spacing:0.18em; color:#E7D5B6; white-space:nowrap; }<br> .trim-bottom{ padding:13px 28px; border-radius:0 0 2px 2px; font-size:13px; letter-spacing:0.03em; line-height:1.7; white-space:nowrap; }<br> .trim-bottom b{ color:#FBE7C8; }<br><br> .panels{ display:flex; background:var(--wood); }<br> .panel{ flex:0 0 84px; width:84px;<br> background: radial-gradient(circle at 25% 15%, rgba(255,255,255,0.35) 0%, transparent 35%),<br> radial-gradient(circle at 80% 70%, rgba(120,95,40,0.10) 0%, transparent 45%),<br> repeating-linear-gradient(100deg, transparent 0 6px, rgba(80,60,25,0.035) 6px 7px), var(--paper);<br> border-left:1.5px solid #2c1d12; box-shadow: inset 4px 0 6px -4px rgba(0,0,0,0.35);<br> display:flex; flex-direction:column; align-items:center; padding:16px 5px 14px; position:relative;<br> }<br> .panel:first-child{ border-left:none; }<br> .panel-num{ font-family:'Nanum Myeongjo', serif; font-size:13px; color:var(--gold); letter-spacing:0.1em;<br> border-bottom:1px solid rgba(169,129,63,0.55); padding-bottom:6px; margin-bottom:10px; width:60%; text-align:center; }<br> .panel-name{ writing-mode:vertical-rl; text-orientation:mixed; font-family:'Nanum Myeongjo', serif; font-weight:800;<br> font-size:25px; letter-spacing:0.14em; color:var(--ink); height:190px; display:flex; align-items:center; justify-content:center; }<br> .divider{ width:34px; height:10px; opacity:0.55; margin:6px 0 10px; }<br> .panel-caption{ font-size:11.5px; line-height:1.75; color:var(--ink-soft); text-align:center; padding:0 3px; }<br> .panel-caption .nk{ display:block; margin-bottom:5px; }<br> .panel-caption .nk em{ font-style:normal; color:var(--seal); font-weight:600; }<br> .panel-caption .common{ display:block; padding-top:6px; border-top:1px dotted rgba(75,64,48,0.35); }<br> .seal{ position:absolute; right:7px; bottom:9px; width:28px; height:28px; background:var(--seal); color:#F3E3CC;<br> border-radius:2px; transform:rotate(-4deg); box-shadow:0 2px 4px rgba(0,0,0,0.35);<br> display:flex; align-items:center; justify-content:center; font-family:'Nanum Myeongjo', serif; font-size:12px;<br> letter-spacing:-1px; writing-mode:vertical-rl; }<br><br> .hint{ margin-top:16px; font-size:12px; color:var(--ink-soft); letter-spacing:0.03em; text-align:center; max-width:320px; }<br></style><br></head><br><body><br><div class="page"><br> <div class="label">12폭 병풍 · <b>뒷면(背面)</b> 디자인</div><br><br> <div class="scale-wrap" id="scaleWrap"><br> <div id="screenShadow"><br> <div class="screen"><br> <div class="inner"><br> <div class="trim trim-top"><br> <div class="title">그리운 북녘의 맛, 강원에서 잇다</div><br> <div class="sub">강원도 실향민 음식 12선 · 북한 향토음식 비교</div><br> </div><br> <div class="panels" id="panels"></div><br> <div class="trim trim-bottom"><br> 공통점 — <b>감자·메밀·황태·산나물</b> 등 산지 재료를 중심으로 빚어낸, 소박하고 구수한 한 그릇의 맛<br> </div><br> </div><br> </div><br> </div><br> </div><br><br> <div class="hint">12폭 전체가 한 화면에 담겨 있어요 · 확대하면 각 폭을 더 자세히 볼 수 있어요</div><br></div><br><br><script><br>const data = [<br> { num:'一', name:'감자옹심이', nk:'감자국수', common:'감자 활용, 구수한 맛 중심' },<br> { num:'二', name:'메밀전병', nk:'메밀묵밥·메밀국수', common:'메밀 중심의 탄수화물 음식' },<br> { num:'三', name:'황태국', nk:'북어국', common:'건어물 활용, 해장용으로 인기' },<br> { num:'四', name:'장칼국수', nk:'된장·고추장국수', common:'장맛 중심의 구수한 국물' },<br> { num:'五', name:'물회', nk:'회냉면', common:'생선회 활용, 시원한 여름 음식' },<br> { num:'六', name:'감자전', nk:'감자부침개', common:'감자 활용, 간식·부침 형태' },<br> { num:'七', name:'곤드레밥', nk:'나물밥·두릅밥', common:'산나물 활용, 담백한 맛' },<br> { num:'八', name:'오징어순대', nk:'명태순대·생선순대', common:'해산물 속채움 요리' },<br> { num:'九', name:'막국수', nk:'평양·함흥냉면', common:'메밀면, 시원한 육수' },<br> { num:'十', name:'초당순두부', nk:'두부밥·두부찌개', common:'두부 중심의 단백질 음식' },<br> { num:'十一', name:'한과', nk:'강냉이·찹쌀과자', common:'곡물로 만든 전통 간식' },<br> { num:'十二', name:'콧등치기', nk:'함흥국수', common:'면 중심, 구수한 향' },<br>];<br><br>const wrap = document.getElementById('panels');<br>data.forEach((d, i) => {<br> const p = document.createElement('div');<br> p.className = 'panel';<br> p.innerHTML = `<br> <div class="panel-num">${d.num}</div><br> <div class="panel-name">${d.name}</div><br> <svg class="divider" viewBox="0 0 34 10"><path d="M1,5 Q9,1 17,5 T33,5" stroke="#4B4030" stroke-width="1" fill="none" stroke-linecap="round"/></svg><br> <div class="panel-caption"><br> <span class="nk">북한 — <em>${d.nk}</em></span><br> <span class="common">${d.common}</span><br> </div><br> `;<br> if(i === data.length - 1){<br> const seal = document.createElement('div');<br> seal.className = 'seal';<br> seal.textContent = '鄕愁';<br> p.appendChild(seal);<br> }<br> wrap.appendChild(p);<br>});<br><br>function fitScreen(){<br> const wrapEl = document.getElementById('scaleWrap');<br> const el = document.getElementById('screenShadow');<br> el.style.transform = 'none';<br> const naturalW = el.offsetWidth;<br> const naturalH = el.offsetHeight;<br> const availW = wrapEl.clientWidth;<br> const scale = naturalW > 0 ? Math.min(1, availW / naturalW) : 1;<br> el.style.transform = `scale(${scale})`;<br> wrapEl.style.height = (naturalH * scale) + 'px';<br>}<br>async function init(){<br> try{ await document.fonts.ready; }catch(e){}<br> fitScreen();<br>}<br>window.addEventListener('load', init);<br>window.addEventListener('resize', fitScreen);<br>init();<br></script><br></body><br></html><br></p>
<!-- -->
]]>
