/* ============================================================
   el_rosso — 路逍 길에서 만나다 (사진 갤러리 레이아웃)
   디자인 원본: Figma eond2022 / rosso-20230717 (3783:2451)
   프로토타입: prototypes/el-rosso/index.html
   원본 레이아웃: eond Rosso 0.3.3 (2013, XE)
   클래스 접두사 ro- (호환 모드에서 el_unified CSS 와 섞여도 충돌하지 않게)
   ============================================================ */
:root{
  color-scheme: light;
  --ro-bg:#fff; --ro-fg:#000; --ro-ink:#383838; --ro-ink-2:#979797; --ro-soft:#c5c5c5; --ro-rule:#eaeaea;
  --ro-door:#970308; --ro-door-2:#930006; --ro-red:#8e1414; --ro-shadow:#c8c8c8;
  --ro-mat:#fff; --ro-photo-bg:#101010; --ro-logo:#818181; --ro-hover:#f5f5f5; --ro-field:#fff;
  --ro-frame-shadow:0 18px 40px -24px rgba(0,0,0,.3),0 2px 6px -2px rgba(0,0,0,.06);
  --ro-font:'Nanum Myeongjo','Noto Serif KR','AppleMyungjo',serif;
  --ro-hd:91px; --ro-cw:1240px; --ro-g:clamp(16px,4vw,48px);
}
/* 다크: 원본 Rosso(2013) 의 어두운 바탕 + 흰 폴라로이드 액자 */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --ro-bg:#1d1c1b; --ro-fg:#f2eee9; --ro-ink:#cfc9c3; --ro-ink-2:#8d8781; --ro-soft:#5d5854; --ro-rule:#2f2c2a;
    --ro-door:#9e0b10; --ro-door-2:#a3141a; --ro-red:#d0564c; --ro-shadow:#3b3734;
    --ro-mat:#f4f1ec; --ro-photo-bg:#0b0b0b; --ro-logo:#a49e98; --ro-hover:#262422; --ro-field:#242220;
    --ro-frame-shadow:0 22px 48px -20px rgba(0,0,0,.7),0 2px 8px -2px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --ro-bg:#1d1c1b; --ro-fg:#f2eee9; --ro-ink:#cfc9c3; --ro-ink-2:#8d8781; --ro-soft:#5d5854; --ro-rule:#2f2c2a;
  --ro-door:#9e0b10; --ro-door-2:#a3141a; --ro-red:#d0564c; --ro-shadow:#3b3734;
  --ro-mat:#f4f1ec; --ro-photo-bg:#0b0b0b; --ro-logo:#a49e98; --ro-hover:#262422; --ro-field:#242220;
  --ro-frame-shadow:0 22px 48px -20px rgba(0,0,0,.7),0 2px 8px -2px rgba(0,0,0,.4);
}

html{background:var(--ro-bg)}
body.ro{margin:0;background:var(--ro-bg);color:var(--ro-ink);font-family:var(--ro-font);-webkit-font-smoothing:antialiased;line-height:1.6;transition:background .4s,color .4s}
.ro *,.ro *::before,.ro *::after{box-sizing:border-box}
.ro a{color:inherit;text-decoration:none}
.ro button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.ro img,.ro svg{display:block}
.ro-c{width:min(var(--ro-cw),100% - var(--ro-g)*2);margin:0 auto}
.ro-skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ro-fg);color:var(--ro-bg);padding:8px 12px}
.ro-skip:focus{left:8px;top:8px}
.ro-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.ro-lock,html.ro-lock body{overflow:hidden}

/* ---------- 헤더: 로고 + 메뉴 ---------- */
.ro-hd{position:sticky;top:0;z-index:30;height:var(--ro-hd);background:var(--ro-bg);border-bottom:1px solid var(--ro-rule);transition:opacity .9s ease,background .4s}
/* 헤더는 화면 전체 너비 — 로고 왼쪽 · 메뉴 정가운데 · 아이콘 오른쪽 (양옆 칸을 같은 1fr 로 두어 메뉴가 화면 중앙에 온다) */
.ro-hd .ro-c{height:100%;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:20px;width:100%;padding:0 var(--ro-g)}
.ro-hd.is-hidden{opacity:0;pointer-events:none}
.ro-logo{display:flex;align-items:baseline;gap:8px;color:var(--ro-logo);justify-self:start;min-width:0}
.ro-logo b{font-weight:400;font-size:30px;line-height:1}
.ro-logo span{font-size:14px;letter-spacing:-1.4px}
.ro-logo img{max-height:32px;width:auto}
.ro-gnb{display:flex;gap:clamp(18px,3vw,48px);justify-self:center;font-size:clamp(17px,1.6vw,23px);letter-spacing:.6px;color:var(--ro-fg)}
.ro-gnb > li{position:relative;list-style:none}
.ro-gnb,.ro-gnb ul{margin:0;padding:0}
.ro-gnb > li > a{display:block;padding:4px 0;border-bottom:2px solid transparent;transition:border-color .2s;white-space:nowrap}
.ro-gnb > li > a:hover{border-color:var(--ro-rule)}
.ro-gnb > li.is-on > a{border-color:var(--ro-fg)}
.ro-gnb .ro-sub{position:absolute;left:50%;top:100%;transform:translate(-50%,6px);min-width:160px;padding:10px 0;background:var(--ro-bg);border:1px solid var(--ro-rule);box-shadow:var(--ro-frame-shadow);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s;font-size:15px;letter-spacing:-.3px}
.ro-gnb > li:hover .ro-sub,.ro-gnb > li:focus-within .ro-sub{opacity:1;visibility:visible;transform:translate(-50%,0)}
.ro-sub li{list-style:none}
.ro-sub a{display:block;padding:6px 18px;white-space:nowrap;color:var(--ro-ink)}
.ro-sub a:hover,.ro-sub .is-on a{color:var(--ro-fg);background:var(--ro-hover)}
.ro-tools{display:flex;align-items:center;gap:4px;justify-self:end}
.ro-acct{display:flex;gap:12px;font-size:13px;color:var(--ro-ink-2);margin-right:6px}
.ro-acct a:hover{color:var(--ro-fg)}
.ro-icon{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--ro-fg);transition:background .2s}
.ro-icon:hover{background:var(--ro-hover)}
.ro-icon svg{width:21px;height:21px}
.ro-theme .ro-sun{display:none}
:root[data-theme="dark"] .ro-theme .ro-sun{display:block}
:root[data-theme="dark"] .ro-theme .ro-moon{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ro-theme .ro-sun{display:block}
  :root:not([data-theme="light"]) .ro-theme .ro-moon{display:none}
}
.ro-menu-btn,.ro-panel,.ro-scrim{display:none}

/* ---------- 인트로(main) ---------- */
.ro-intro{height:calc(100dvh - var(--ro-hd));min-height:560px;overflow:hidden;position:relative}
.ro-intro .ro-c{height:100%;display:flex;flex-direction:column;justify-content:center}
.ro-brand{align-self:flex-start}
.ro-intro.is-playing .ro-brand{opacity:0;transition:opacity .9s ease}
.ro-intro.is-playing.p-logo .ro-brand{opacity:1}
/* 왼쪽 1s → 위 1s 두 단계. 위 .is-playing 규칙보다 우선해야 이동이 애니메이션된다(우선순위 주의) */
.ro-intro.is-playing .ro-brand.is-moving,.ro-brand.is-moving{transition:transform 1s cubic-bezier(.65,0,.25,1),opacity .9s ease}
.ro-ttl{margin:0;font-size:clamp(56px,9vh,80px);line-height:1.2;font-weight:400;color:var(--ro-fg)}
.ro-sub1{margin:0;font-size:clamp(30px,4.5vh,40px);line-height:1.18;letter-spacing:-4px;color:var(--ro-soft);font-weight:400}
.ro-sub2{margin:2px 0 0;font-size:18px;letter-spacing:-.9px;color:var(--ro-ink-2)}
.ro-road{position:relative;max-width:1064px;height:clamp(280px,40vh,330px);margin-top:clamp(20px,4vh,32px);display:flex;align-items:flex-start}
.ro-door{position:relative;flex:none;width:86px;height:150px;perspective:600px;transition:opacity .6s ease,transform .6s ease}
.ro-intro.is-playing .ro-door{opacity:0;transform:translateY(10px)}
.ro-intro.is-playing .ro-door.is-show{opacity:1;transform:none}
.ro-door .ro-shadow{position:absolute;left:29px;top:0;width:82px;height:162.5px;overflow:visible}
.ro-door .ro-shadow path{fill:var(--ro-shadow);transition:fill .4s}
/* 처음엔 닫힌 문(그림자 없음) → 살짝 열리며 문틈으로 그림자가 펼쳐진다 → 시안 모양 */
.ro-door .ro-shadow{transform-origin:left center;transition:transform 1s cubic-bezier(.3,.7,.3,1) .15s,opacity .6s ease .15s}
.ro-intro.is-playing .ro-door .ro-shadow{transform:scaleX(0);opacity:0}
.ro-intro.is-playing .ro-door.is-open .ro-shadow{transform:none;opacity:1}
.ro-door .ro-leaf{position:absolute;inset:0;background:var(--ro-door);border-radius:4px;transform-origin:left center;transition:transform .6s cubic-bezier(.6,0,.2,1);z-index:2}
.ro-door.r .ro-leaf{background:var(--ro-door-2)}
.ro-door .ro-leaf i{position:absolute;left:64px;top:81px;width:8px;height:8px;border-radius:50%;background:#fefefe}
.ro-door .ro-inside{position:absolute;inset:0;border-radius:4px;background:var(--ro-rule);z-index:1}
/* 여는 순간 살짝 열렸다 닫혀 시안 모양으로 남는다 */
.ro-door.is-open .ro-leaf{animation:ro-swing 1.1s cubic-bezier(.5,0,.3,1)}
@keyframes ro-swing{0%{transform:none}40%{transform:rotateY(-24deg)}100%{transform:none}}
.ro-door:hover .ro-leaf,.ro-door:focus-visible .ro-leaf{transform:rotateY(-16deg)}
.ro-door:focus-visible{outline:none}
.ro-door:focus-visible .ro-inside{box-shadow:0 0 0 2px var(--ro-bg),0 0 0 3px var(--ro-door)}
/* 선은 왼쪽 문 안쪽(문 왼쪽에서 68px, Figma)에서 시작해 오른쪽 문 가장자리까지. 문 그림자보다 위에 그린다 */
.ro-line{flex:1;height:1px;margin-top:69px;margin-left:-18px;position:relative;z-index:3;background:var(--ro-door-2);transform-origin:left;transition:transform 1.2s cubic-bezier(.5,0,.3,1)}
.ro-intro.is-playing .ro-line{transform:scaleX(0)}
.ro-intro.is-playing .ro-line.is-drawn{transform:none}
.ro-story{position:absolute;left:101px;top:100px;font-size:16px;line-height:1.259;letter-spacing:-.8px;color:var(--ro-ink)}
.ro-story p{margin:0 0 1px}
.ro-story .ro-big{font-size:31px}
.ro-story .ro-p2{margin-top:clamp(14px,2.4vh,24px);line-height:24px}
/* 새겨지는 글: 한 글자씩 흐림 → 선명 */
.ro-intro.is-playing .ro-ch{opacity:0;filter:blur(4px);transition:opacity .5s ease,filter .6s ease;transition-delay:calc(var(--i) * 16ms)}
.ro-intro.is-playing .is-engraved .ro-ch{opacity:1;filter:none}
.ro-hint{position:absolute;right:0;bottom:0;font-size:13px;color:var(--ro-ink-2);transition:opacity .8s ease}
.ro-hint:hover{color:var(--ro-fg)}
.ro-intro.is-playing .ro-hint{opacity:0}
.ro-intro.is-playing .ro-hint.is-show{opacity:1}
.ro-skipbtn{position:absolute;right:var(--ro-g);bottom:20px;font-size:13px;color:var(--ro-ink-2);display:none}
.ro-intro.is-playing .ro-skipbtn{display:block}
.ro-skipbtn:hover{color:var(--ro-fg)}
.ro-intro-ft{position:absolute;left:0;right:0;bottom:clamp(14px,3vh,32px);text-align:center;font-size:15px;letter-spacing:-.8px;color:var(--ro-red);transition:opacity .9s ease}
.ro-intro.is-playing .ro-intro-ft{opacity:0}
.ro-intro.is-playing .ro-intro-ft.is-show{opacity:1}
.ro-flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:60}
.ro-flash.is-go{animation:ro-flash .6s ease}
@keyframes ro-flash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}

/* ---------- 공통: 버튼·입력·액자 ---------- */
.ro-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 16px;border:1px solid var(--ro-rule);border-radius:999px;background:var(--ro-bg);color:var(--ro-fg);font-size:14px;letter-spacing:-.3px;transition:border-color .2s,background .2s}
.ro-btn:hover{border-color:var(--ro-ink-2)}
.ro-btn--dark{background:var(--ro-fg);color:var(--ro-bg);border-color:var(--ro-fg)}
.ro-btn--dark:hover{opacity:.88}
.ro-btn--danger{color:var(--ro-red)}
.ro-round{width:40px;height:40px;border:1px solid var(--ro-rule);border-radius:50%;display:grid;place-items:center;background:var(--ro-bg);color:var(--ro-fg);transition:border-color .2s}
.ro-round:hover{border-color:var(--ro-ink-2)}
.ro-round svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ro-field{height:38px;padding:0 14px;border:1px solid var(--ro-rule);border-radius:999px;background:var(--ro-field);color:var(--ro-fg);font:inherit;font-size:14px;min-width:0}
.ro-field:focus{outline:none;border-color:var(--ro-ink-2)}
textarea.ro-field{height:auto;min-height:96px;border-radius:12px;padding:12px 14px;width:100%;resize:vertical}
.ro-frame{background:var(--ro-mat);padding:clamp(10px,1.3vw,16px);border:1px solid var(--ro-rule);box-shadow:var(--ro-frame-shadow);max-width:100%;transition:background .4s}
.ro-empty{padding:72px 0;text-align:center;color:var(--ro-ink-2)}
.ro-empty strong{display:block;font-size:20px;font-weight:400;color:var(--ro-fg);margin-bottom:8px}

/* ---------- 게시판 목록: 최근 사진 + 썸네일 그리드 ---------- */
.ro-latest{position:relative;padding:clamp(24px,4vh,40px) 0 clamp(36px,6vh,56px);display:flex;flex-direction:column;align-items:center}
.ro-latest-head{align-self:stretch;display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px}
.ro-latest-label{font-size:15px;color:var(--ro-fg)}
.ro-latest-label em{font-style:normal;color:var(--ro-red);margin-right:8px}
.ro-latest-count{font-size:13px;color:var(--ro-ink-2)}
.ro-photo{position:relative;overflow:hidden;background:var(--ro-photo-bg);display:block}
.ro-photo img{height:clamp(260px,calc(100dvh - var(--ro-hd) - 220px),760px);width:auto;max-width:100%;object-fit:contain;margin:0 auto}
.ro-photo .ro-noimg{display:grid;place-items:center;width:min(720px,80vw);aspect-ratio:3/2;padding:24px;background:var(--ro-mat);color:#383838;font-size:clamp(20px,2.4vw,30px);text-align:center;letter-spacing:-1px}
.ro-blade{position:absolute;left:0;right:0;height:50%;background:var(--ro-photo-bg);transform:scaleY(0);z-index:2}
.ro-blade.t{top:0;transform-origin:top}.ro-blade.b{bottom:0;transform-origin:bottom}
.ro-photo.is-snap .ro-blade{animation:ro-blade .34s cubic-bezier(.7,0,.3,1)}
@keyframes ro-blade{0%{transform:scaleY(0)}40%,55%{transform:scaleY(1.01)}100%{transform:scaleY(0)}}
.ro-cap{margin-top:16px;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;justify-content:center;text-align:center;letter-spacing:-.6px}
.ro-cap .t{font-size:19px;color:var(--ro-fg)}
.ro-cap .m{font-size:13px;color:var(--ro-ink-2)}
.ro-cap .go{font-size:13px;color:var(--ro-red)}
.ro-cap .go:hover{text-decoration:underline}
.ro-latest .ro-nav{position:absolute;top:50%}
.ro-latest .ro-nav.prev{left:0}.ro-latest .ro-nav.next{right:0}

.ro-album{border-top:1px solid var(--ro-rule);padding:clamp(28px,5vh,48px) 0 24px}
.ro-album-head{display:flex;align-items:center;gap:16px 20px;flex-wrap:wrap;margin-bottom:24px}
.ro-album-head h1,.ro-album-head h2{margin:0;font-size:24px;font-weight:400;color:var(--ro-fg);letter-spacing:-.8px}
.ro-chips{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:15px;color:var(--ro-ink-2)}
.ro-chips a{padding:2px 0;border-bottom:1px solid transparent}
.ro-chips a:hover{color:var(--ro-fg)}
.ro-chips a.is-on{color:var(--ro-fg);border-color:var(--ro-door-2)}
.ro-album-tools{margin-left:auto;display:flex;gap:8px;align-items:center}
.ro-album-tools form{display:flex;gap:6px}
.ro-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:26px 20px}
.ro-cell{display:block;text-align:left;animation:ro-rise .5s ease both}
.ro-cell .ro-mat{display:block;background:var(--ro-mat);padding:6px;border:1px solid var(--ro-rule);transition:transform .35s cubic-bezier(.3,.7,.3,1),box-shadow .35s,background .4s}
.ro-cell img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;background:var(--ro-photo-bg)}
.ro-cell .ro-cell-txt{display:grid;place-items:center;aspect-ratio:1/1;padding:14px;color:#383838;font-size:15px;line-height:1.45;text-align:center;letter-spacing:-.5px;overflow:hidden}
.ro-cell:hover .ro-mat{transform:translateY(-3px);box-shadow:var(--ro-frame-shadow)}
.ro-cell.is-on .ro-mat{outline:1.5px solid var(--ro-door-2);outline-offset:2px}
.ro-cell .cc{display:block;margin-top:8px;font-size:13px;color:var(--ro-fg);letter-spacing:-.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ro-cell .cc em{font-style:normal;color:var(--ro-red);margin-left:4px;font-size:12px}
.ro-cell .tm{display:block;font-size:12px;color:var(--ro-ink-2);margin-top:2px}
@keyframes ro-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.ro-pages{display:flex;justify-content:center;align-items:center;gap:6px;padding:40px 0 8px;font-size:14px}
.ro-pages a,.ro-pages span{min-width:34px;height:34px;padding:0 8px;display:grid;place-items:center;border-radius:999px;color:var(--ro-ink-2)}
.ro-pages a:hover{color:var(--ro-fg);background:var(--ro-hover)}
.ro-pages .is-current{color:var(--ro-bg);background:var(--ro-fg)}
.ro-pages svg{width:14px;height:14px}

/* ---------- 게시글 상세 ---------- */
.ro-view{padding:clamp(32px,6vh,64px) 0 48px}
.ro-crumb{display:flex;gap:8px;font-size:13px;color:var(--ro-ink-2);margin-bottom:22px}
.ro-crumb a:hover{color:var(--ro-fg)}
.ro-view-title{margin:0;font-size:clamp(30px,4vw,48px);line-height:1.25;font-weight:400;color:var(--ro-fg);letter-spacing:-1.5px}
.ro-view-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:12px;font-size:13px;color:var(--ro-ink-2)}
.ro-view-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.ro-view-actions form{margin:0}
.ro-view-head{padding-bottom:28px;border-bottom:1px solid var(--ro-rule)}
.ro-prose{max-width:860px;margin:clamp(28px,5vh,48px) auto 0;font-size:17px;line-height:1.9;color:var(--ro-ink);letter-spacing:-.3px;word-break:keep-all;overflow-wrap:anywhere}
.ro-prose h2,.ro-prose h3,.ro-prose h4{color:var(--ro-fg);font-weight:700;letter-spacing:-.8px;line-height:1.4;margin:2em 0 .6em}
.ro-prose a{color:var(--ro-red);text-decoration:underline;text-underline-offset:3px}
/* 본문 사진은 흰 액자로 */
.ro-prose img{max-width:100%;height:auto;background:var(--ro-mat);padding:clamp(8px,1vw,14px);border:1px solid var(--ro-rule);box-shadow:var(--ro-frame-shadow);margin:2em auto}
.ro-prose figure{margin:2em 0}
.ro-prose figcaption{text-align:center;font-size:13px;color:var(--ro-ink-2);margin-top:-1.2em}
.ro-prose blockquote{margin:1.6em 0;padding:4px 0 4px 20px;border-left:2px solid var(--ro-door-2);color:var(--ro-fg)}
.ro-prose pre{overflow:auto;padding:16px;background:var(--ro-hover);border-radius:8px;font-size:14px}
.ro-prose table{width:100%;border-collapse:collapse;font-size:15px}
.ro-prose th,.ro-prose td{border:1px solid var(--ro-rule);padding:8px 10px}
.ro-prose iframe,.ro-prose video{max-width:100%}
.ro-block{max-width:860px;margin:48px auto 0;padding-top:28px;border-top:1px solid var(--ro-rule)}
.ro-block h2{margin:0 0 16px;font-size:18px;font-weight:400;color:var(--ro-fg)}
.ro-files li{list-style:none;display:flex;gap:12px;align-items:center;padding:8px 0;font-size:14px;border-bottom:1px solid var(--ro-rule)}
.ro-files{margin:0;padding:0}
.ro-files .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ro-fg)}
.ro-files .s{color:var(--ro-ink-2);font-size:12px}
.ro-pn{max-width:860px;margin:48px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ro-pn a{display:block;padding:16px 18px;border:1px solid var(--ro-rule);transition:border-color .2s}
.ro-pn a:hover{border-color:var(--ro-ink-2)}
.ro-pn span{display:block;font-size:12px;color:var(--ro-ink-2)}
.ro-pn strong{display:block;font-weight:400;color:var(--ro-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.ro-pn .next{grid-column:2;text-align:right}
.ro-unlock{display:flex;gap:8px;margin-top:16px}
.ro-error{color:var(--ro-red);font-size:14px}

/* 댓글 — 클래스 un-comment* 는 스크립트 계약이라 유지 */
.ro-comments{max-width:860px;margin:56px auto 0}
.ro-comments h2{margin:0 0 18px;font-size:18px;font-weight:400;color:var(--ro-fg)}
.ro-comments .un-comment{padding:16px 0;border-top:1px solid var(--ro-rule)}
.ro-comments .un-comment-head{display:flex;gap:10px;align-items:baseline;font-size:13px;color:var(--ro-ink-2)}
.ro-comments .un-comment-head strong{font-weight:700;color:var(--ro-fg);font-size:14px}
.ro-comments .un-comment-body{margin-top:6px;font-size:15px;line-height:1.75;white-space:pre-wrap;color:var(--ro-ink)}
.ro-comments .un-comment-actions{display:flex;gap:10px;margin-top:6px;font-size:12px;color:var(--ro-ink-2)}
.ro-comments .un-comment-actions button:hover{color:var(--ro-fg)}
.ro-comments .un-comment-edit{display:none;margin-top:8px}
.ro-comments .un-comment-edit textarea{width:100%;min-height:80px;border:1px solid var(--ro-rule);border-radius:12px;padding:10px 12px;background:var(--ro-field);color:var(--ro-fg);font:inherit}
.ro-comments .un-comment-form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.ro-comment-form{margin-top:20px;padding-top:20px;border-top:1px solid var(--ro-rule)}
.ro-comment-error{display:none;margin-top:6px;color:var(--ro-red);font-size:13px}
.ro-note{font-size:14px;color:var(--ro-ink-2);margin:0 0 10px}

/* ---------- 검색·약관 ---------- */
.ro-page{padding:clamp(36px,7vh,72px) 0 48px}
.ro-page-head h1{margin:0;font-size:clamp(30px,4vw,44px);font-weight:400;color:var(--ro-fg);letter-spacing:-1.5px}
.ro-page-head p{margin:8px 0 0;color:var(--ro-ink-2);font-size:15px}
.ro-search{display:flex;gap:8px;margin:28px 0 8px;max-width:640px}
.ro-search .ro-field{flex:1}
.ro-results{list-style:none;margin:24px 0 0;padding:0}
.ro-results li{border-top:1px solid var(--ro-rule)}
.ro-results a{display:block;padding:18px 0}
.ro-results h2{margin:0;font-size:19px;font-weight:400;color:var(--ro-fg);letter-spacing:-.6px}
.ro-results a:hover h2{color:var(--ro-red)}
.ro-results p{margin:6px 0 0;font-size:14px;color:var(--ro-ink);line-height:1.7}
.ro-results .meta{display:flex;gap:12px;margin-top:6px;font-size:12px;color:var(--ro-ink-2)}
.ro-legal{max-width:860px;font-size:15px}

/* ---------- 푸터 ---------- */
.ro-ft{padding:32px 0 40px;border-top:1px solid var(--ro-rule);text-align:center;font-size:14px;color:var(--ro-red);letter-spacing:-.6px}
.ro-ft nav{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px;margin-bottom:10px;font-size:13px;color:var(--ro-ink-2)}
.ro-ft nav a:hover{color:var(--ro-fg)}
.ro-ft .by{display:block;margin-top:6px;font-size:12px;color:var(--ro-ink-2)}
.ro-page-intro .ro-ft{display:none}

/* ---------- 호환 모드(로그인·마이페이지·글쓰기 등 el_unified 본문) ---------- */
.ro-compat-main{min-height:calc(100dvh - var(--ro-hd) - 120px)}

/* ---------- 모바일 (Figma Android Small 1·2) ---------- */
@media (max-width: 860px){
  :root{--ro-hd:48px}
  .ro-hd .ro-c{display:flex;gap:4px;width:100%;padding:0 10px 0 16px}
  .ro-logo b{font-size:27.4px}
  .ro-logo span{font-size:13px}
  .ro-gnb,.ro-acct{display:none}
  .ro-tools{margin-left:auto}
  .ro-menu-btn{display:grid}
  .ro-scrim{display:block;position:fixed;inset:0;z-index:40;pointer-events:none}
  .ro-panel{display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;width:200px;background:var(--ro-bg);z-index:41;overflow-y:auto;
         box-shadow:-4px 0 16px 4px rgba(0,0,0,.08);transform:translateX(105%);visibility:hidden;transition:transform .35s cubic-bezier(.6,0,.2,1),visibility 0s .35s;padding:9px 10px 20px 20px}
  .ro-menu-open .ro-panel{transform:none;visibility:visible;transition:transform .35s cubic-bezier(.6,0,.2,1)}
  .ro-menu-open .ro-scrim{pointer-events:auto}
  .ro-panel .ro-icon{align-self:flex-end}
  .ro-panel nav{display:flex;flex-direction:column;align-items:flex-end;gap:20px;margin-top:20px;padding-right:5px;font-size:18px;letter-spacing:.54px;color:var(--ro-fg);text-align:right}
  .ro-panel nav a.is-on{border-bottom:2px solid var(--ro-fg)}
  .ro-panel nav .ro-psub{display:flex;flex-direction:column;align-items:flex-end;gap:10px;margin-top:-8px;font-size:14px;color:var(--ro-ink-2)}
  .ro-panel .ro-pacct{display:flex;flex-direction:column;align-items:flex-end;gap:8px;margin-top:28px;padding-right:5px;font-size:13px;color:var(--ro-ink-2)}
  .ro-panel .ro-cp{margin-top:auto;padding-top:24px;align-self:flex-end;padding-right:5px;font-weight:700;font-size:14px;letter-spacing:-.56px;color:var(--ro-red)}

  .ro-intro{min-height:0}
  .ro-ttl{font-size:56px}
  .ro-sub1{font-size:28px;letter-spacing:-2.6px}
  .ro-sub2{font-size:15px}
  .ro-road{height:auto;flex-wrap:wrap;margin-top:24px;padding-right:20px}
  .ro-door{width:58px;height:101px}
  .ro-door .ro-shadow{left:19px;width:55px;height:110px}
  .ro-door .ro-leaf i{left:43px;top:55px;width:6px;height:6px}
  .ro-line{margin-top:47px;margin-left:-12px}
  .ro-story{position:static;flex-basis:100%;margin-top:28px;font-size:15px}
  .ro-story .ro-big{font-size:26px}
  .ro-hint{position:static;flex-basis:100%;margin-top:14px}
  .ro-intro-ft{font-size:13px}

  .ro-latest{padding:0 0 28px;width:100%}
  .ro-latest-head{padding:12px 16px 10px;margin:0}
  .ro-latest .ro-frame{padding:0;border:0;box-shadow:none;width:100%;background:var(--ro-photo-bg)}
  .ro-photo{width:100%}
  .ro-photo img{height:auto;max-height:62vh;width:100%;object-fit:contain}
  .ro-cap{padding:0 16px}
  .ro-latest .ro-nav{display:none}
  .ro-album-tools{margin-left:0;width:100%}
  .ro-album-tools form{flex:1}
  .ro-album-tools .ro-field{flex:1}
  .ro-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .ro-cell .ro-mat{padding:3px}
  .ro-cell .cc,.ro-cell .tm{display:none}
  .ro-cell .ro-cell-txt{font-size:12px;padding:6px}
  .ro-prose{font-size:16px}
  .ro-pn{grid-template-columns:1fr}
  .ro-pn .next{grid-column:auto;text-align:left}
}
@media (prefers-reduced-motion: reduce){
  .ro *,.ro *::before,.ro *::after{animation:none !important;transition:none !important}
}