/* RECOVERIC 매거진 · 오른쪽 계정 레일 + 머리 아바타 + 휴대폰 하단 시트 (대표 지시 2026-10-27 · assets/js/rail.js)
   명품 매거진 톤: 흰 바탕 · 검정 선 · 네이비 #1B2438 · 선형 아이콘 · 숫자는 Bodoni Moda 획 보강. 모든 글 keep-all. 이모지 없음. */
:root{--rail-w:clamp(48px,3.9vw,56px);--rail-ow:clamp(264px,21vw,304px);--rail-biz:#1F4D3A}   /* 1280 → 50px · 1440 이상 56px · 1100 이하 48px (화면 크기에 따라 유동) */

/* ---- 머리 계정 영역: 아바타 한 개 / 로그인 · 가입 ---- */
.acct-join{margin-left:-6px;color:#5E5E5E;font-weight:400}
.acct-join[hidden]{display:none!important}
.acct-av{position:relative;display:inline-flex;align-items:center;gap:0;width:auto;height:36px;min-width:36px!important;padding:0;background:none;color:#1B2438;justify-content:center;font-size:0!important;letter-spacing:0;flex:none}   /* 숨은 글자(글자 크기 0, 화면 읽기는 aria-label)는 바탕과 같은 흰색이 아니라 네이비 · 간격 0(보이는 이름표와 원 사이는 ::after 오른쪽 8px) */
/* 원형 아바타는 ::before, 구분 글자(개인 / 사업자)는 ::after 를 앞(order:-1)에 두어 아바타와 한 덩어리로 흐른다 — 떠 있지 않아 이웃 단추와 겹치지 않음 */
.acct-av::before{content:attr(data-ini);display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:50%;background:#1B2438;font-family:'Bodoni Moda',serif;font-size:15px;font-weight:600;font-variation-settings:'opsz' 11;line-height:1;color:#FFFFFF}
.acct-av:hover{text-decoration:none}
.acct-av:hover::before{background:#111111}
.acct-av[data-kind="business"]::before,.rail-av[data-kind="business"]{background:var(--rail-biz)}
.acct-av[data-kind="business"]:hover::before{background:#163A2B}
.acct-av::after{content:attr(data-kind-l);order:-1;margin-right:8px;font-family:'Noto Sans KR',sans-serif;font-size:11px;font-weight:500;letter-spacing:.06em;color:#1B2438;white-space:nowrap;word-break:keep-all}
.acct-av[data-kind="business"]::after{color:var(--rail-biz)}
.acct-av:focus-visible{outline:2px solid #1B2438;outline-offset:3px;border-radius:18px}
.acct-av .acct-dot{position:absolute!important;top:-1px;right:-1px;margin:0!important;width:9px!important;height:9px!important;border:2px solid #FFFFFF;box-sizing:content-box;background:#B3261E!important}
/* 레일이 본문 폭을 줄이는 구간(본문 컨테이너가 좁을 때): 머리 오른쪽 간격을 줄이고 구분 글자는 접는다(레일에 사업자 라벨이 있음) */
@container mg (max-width:1240px){header .wrap>div:last-child{gap:10px!important}.acct-av::after{display:none}}
/* 구독하기는 작게 */
.sub-top,a[href="#subscribe"].k.hide-s{height:36px!important;padding:0 14px!important;font-size:12px;letter-spacing:.08em}

/* ---- 오른쪽 레일(PC) ---- */
.rail{position:fixed;right:0;top:0;bottom:0;height:100vh;height:100dvh;width:var(--rail-w);z-index:130;display:flex;flex-direction:column;background:#FFFFFF;border-left:1px solid #111111;color:#111111;font-family:'Noto Sans KR',sans-serif;font-size:13px;line-height:1.55;font-weight:400;word-break:keep-all;overflow:hidden;transition:width .18s ease,box-shadow .18s ease}
.rail,.rail *{box-sizing:border-box}
.rail[data-open="1"]{width:min(var(--rail-ow),100vw)}   /* 펼침도 본문 옆에 붙는다(본문 여백을 비움) */
html.rail-open{--rail-w:var(--rail-ow)}   /* 펼친 동안 본문 · 하단 바 · 맨 위로 · 스케줄 단추가 이 폭만큼 비운다 */
.rail-top{display:flex;flex-direction:column;justify-content:center;flex:none;align-items:center;border-bottom:1px solid #E6E6E6;padding:2px 0}
.rail[data-open="1"] .rail-top{flex-direction:row-reverse;justify-content:space-between;padding:4px 8px 4px 10px}
.rail-hd{width:36px;height:30px;display:inline-flex;align-items:center;justify-content:center;color:#6B6B6B}
.rail-hd:hover{color:#1B2438;background:#F4F4F4}
.rail button{appearance:none;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
.rail-tg{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;color:#111111}
.rail-tg:hover{color:#1B2438;background:#F4F4F4}
.rail a:focus-visible,.rail button:focus-visible,.rail-sheet a:focus-visible,.rail-sheet button:focus-visible,.rail h3:focus-visible{outline:2px solid #1B2438;outline-offset:-2px}
.rail-who-w{display:flex;align-items:center;gap:12px;flex:none}
.rail .rail-who-w{padding:14px 0;justify-content:center;border-bottom:1px solid #E6E6E6}
.rail[data-open="1"] .rail-who-w{justify-content:flex-start;padding:14px 18px}
.rail-avw{display:flex;flex-direction:column;align-items:center;gap:5px;flex:none}
.rail-kind{font-size:11px;line-height:1;font-weight:500;letter-spacing:.04em;color:#1B2438;white-space:nowrap}
.rail-kind.biz{color:var(--rail-biz)}
.rail-av{flex:none;position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#1B2438;color:#FFFFFF;text-decoration:none}
.rail-av::before{content:attr(data-ini);font-family:'Bodoni Moda',serif;font-size:15px;font-weight:600;font-variation-settings:'opsz' 11;line-height:1}
.rail-av-out{background:#FFFFFF;color:#111111;border:1px solid #111111}
.rail-av-out::before{content:none}
.rail-av:hover{text-decoration:none}
.rail-av[data-kind="business"]:hover{background:#163A2B}
.rail-who{min-width:0;display:flex;flex-direction:column}
.rail-name{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-who small{font-size:11.5px;color:#5E5E5E}
.rail:not([data-open="1"]) .rail-who{display:none}
.rail-panel{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column}
.rail-nav{list-style:none;margin:0;padding:6px 0}
.rail-i{position:relative;display:flex;align-items:center;gap:14px;width:100%;height:48px;padding:0;justify-content:center;color:#111111;text-decoration:none;text-align:left}
.rail[data-open="1"] .rail-i{justify-content:flex-start;padding:0 18px}
.rail-i:hover{background:#F4F4F4;text-decoration:none;color:#1B2438}
.rail-ic{flex:none}
.rail-l{display:none;flex:1;min-width:0;font-size:14px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail[data-open="1"] .rail-l,.rail-sheet .rail-l{display:block}
.rail-n{flex:none;font-size:15px;font-weight:600;font-variation-settings:'opsz' 11;color:#1B2438;-webkit-text-stroke:.3px currentColor}
.rail:not([data-open="1"]) .rail-n{display:none}
.rail-dot{position:absolute;top:11px;left:50%;margin-left:5px;width:8px;height:8px;border-radius:50%;background:#B3261E;border:2px solid #FFFFFF;box-sizing:content-box}
.rail[data-open="1"] .rail-dot,.rail-sheet .rail-dot{left:29px;margin-left:0;top:11px}
.rail-more[hidden]{display:none}
.rail-more{padding:4px 18px 20px;border-top:1px solid #E6E6E6}
.rail-more-s{padding:2px 18px 12px;border-top:0;border-bottom:1px solid #E6E6E6}
/* 선 점검 11-02: 바로 위 칸의 회색 밑줄과 9px 간격으로 검정 윗줄이 겹쳐 이중선 → 접힌 레일 요약에서는 윗줄을 빼고 위 칸 밑줄 한 겹만 */
.rail-more-s .rail-sum{margin-top:0;border-top:0}
.rail-sum{margin:14px 0 0;padding:0;border-top:1px solid #111111}
.rail-sum>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid #E6E6E6}
.rail-sum dt{margin:0;font-size:13px;color:#333333}
.rail-sum dt a{color:inherit;text-decoration:none}
.rail-sum dt a:hover{text-decoration:underline;text-underline-offset:3px}
.rail-sum dd{margin:0;white-space:nowrap}
.rail-sum dd .bod{font-size:20px;font-weight:600;font-variation-settings:'opsz' 11;color:#1B2438;line-height:1}
.rail-sum dd small{margin-left:3px;font-size:12px;color:#5E5E5E}
.rail-tier{margin:12px 0 0;display:flex;flex-direction:column;gap:2px;font-size:12.5px;line-height:1.7;color:#5E5E5E}
.rail-tier b{font-weight:500;color:#111111}
.rail-rec{margin-top:18px}
.rail-h{margin:0 0 6px;font-family:'Bodoni Moda',serif;font-size:12px;font-weight:400;letter-spacing:.14em;color:#5E5E5E}
.rail-rec .rail-h{font-family:'Noto Sans KR',sans-serif;letter-spacing:.06em;font-weight:500}
.rail-empty{margin:6px 0;font-size:12.5px;line-height:1.7;color:#5E5E5E}
.rail-rl{list-style:none;margin:0;padding:0}
.rail-rl li{border-top:1px solid #F0F0F0}
.rail-rl li:first-child{border-top:0}
.rail-rl a{display:block;padding:6px 0;color:#111111;text-decoration:none;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rail-rl a:hover{text-decoration:underline;text-underline-offset:3px}
.rail-q{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.rail-q span{padding:2px 9px;border:1px solid #D2D2D2;font-size:12px;color:#1B2438}
.rail-clear{display:block;margin-top:8px;padding:4px 0;font-size:12px;color:#5E5E5E!important;text-decoration:underline;text-underline-offset:3px}
.rail-clear:hover{color:#111111!important}

/* 레일은 화면 전체 높이로 고정 — 선과 배경이 끊기지 않는다. 본문 · 머리 · 하단 바는 레일 폭(접힘 56px · 펼침 264~304px)만큼 비워 두어 레일이 본문을 가리지 않는다 */
@media (min-width:900px){html.has-rail:not(.rail-off) body{padding-right:var(--rail-w)}
html.has-rail:not(.rail-off) .dock{right:var(--rail-w)}
html.has-rail:not(.rail-off) .totop{right:calc(var(--rail-w) + 16px)}}
/* 2026-10-31 아트 디렉터: 레일을 펼치면 본문 오른쪽 여백(48px)이 '맨 위로'의 자리. 40px 단추를 여백 안에 두어 카드 오른쪽 숫자를 가리지 않는다 */
@media (min-width:1240px){html.has-rail.rail-open:not(.rail-off) .totop:not(.rv-top){right:calc(var(--rail-w) + 4px);width:40px;height:40px}}
/* 로그아웃: 레일 맨 아래에 따로. 접힌 상태에서는 아이콘 아래에 호버 · 초점 때 글씨가 나타난다 */
.rail-foot{flex:none;border-top:1px solid #E6E6E6;background:#FFFFFF;padding:4px 0}
.rail-out{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:100%;height:60px;color:#111111}
.rail-out .rail-ol{font-size:11px;line-height:1;letter-spacing:0;white-space:nowrap;opacity:0;transition:opacity .12s ease}
.rail-out:hover,.rail-out:focus-visible{background:#F4F4F4;color:#8A1C14}
.rail-out:hover .rail-ol,.rail-out:focus-visible .rail-ol{opacity:1}
.rail[data-open="1"] .rail-out{flex-direction:row;justify-content:flex-start;gap:14px;height:52px;padding:0 18px}
.rail[data-open="1"] .rail-out .rail-ol{opacity:1;font-size:14px;letter-spacing:.02em}
.rail-toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);z-index:9990;display:flex;align-items:center;gap:14px;max-width:calc(100vw - 32px);padding:12px 18px;background:#111111;color:#FFFFFF;font-family:'Noto Sans KR',sans-serif;font-size:13px;line-height:1.5;word-break:keep-all}
.rail-toast a{color:#FFFFFF;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
html.rail-off .rail{display:none}
@media (max-width:899px){.rail{display:none!important}}
@media print{.rail,.rail-sheet{display:none!important}}

/* ---- 휴대폰: 서랍 요약 칸 + 하단 시트 ---- */
.hb-sum{margin:22px 0 0;padding:0}
.hb-sum[hidden]{display:none}
.hb-sum .rail-sum dt,.rail-sheet .rail-sum dt{font-size:14px}
.hb-sum .rail-sum>div{padding:12px 0}
.hb-sum .rail-tier{font-size:13px}
.acct-bar-n.acct-bar-b{appearance:none;border:0;background:none;padding:0;margin:0;font:inherit;font-size:12.5px;color:#111111;cursor:pointer;text-align:left;gap:6px}
.acct-bar-b::after{content:'';flex:none;width:6px;height:6px;margin:-3px 0 0 8px;border-right:1.3px solid #5E5E5E;border-bottom:1.3px solid #5E5E5E;transform:rotate(45deg)}
html.rail-lock{overflow:hidden}
.rail-sheet{position:fixed;inset:0;z-index:9980;font-family:'Noto Sans KR',sans-serif;color:#111111;word-break:keep-all;font-size:14px;line-height:1.6}
.rail-sheet[hidden]{display:none}
.rail-sheet *{box-sizing:border-box}
.rs-bg{position:absolute;inset:0;background:rgba(17,17,17,.45)}
.rs-p{position:absolute;left:0;right:0;bottom:0;max-height:88vh;overflow-y:auto;overscroll-behavior:contain;background:#FFFFFF;border-top:1px solid #111111;padding:8px 20px calc(18px + env(safe-area-inset-bottom,0px))}
.rs-grab{width:36px;height:3px;margin:4px auto 10px;background:#D2D2D2}
.rs-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:12px;border-bottom:1px solid #111111}
.rs-top .rail-who-w{min-width:0}
.rs-x{appearance:none;flex:none;width:48px;height:48px;border:0;background:none;color:#111111;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.rail-sheet .rail-sum{border-top:0}
.rail-sheet .rail-sum>div{padding:12px 0;min-height:48px}
.rail-sheet .rail-nav{margin-top:10px;padding:0}
.rail-sheet .rail-i{justify-content:flex-start;height:52px;padding:0 4px;border:0;border-bottom:1px solid #F0F0F0;background:none;font:inherit;cursor:pointer;gap:16px}
.rail-sheet .rail-i:active{background:#F4F4F4}
.rail-sheet .rail-dot{left:26px;top:13px}
.rail-sheet .rail-rec{margin-top:6px;padding-top:10px}
.rail-sheet .rail-rl a{padding:10px 0}
.rail-sheet .rail-clear{min-height:44px}

/* ---- 숨김 손잡이 · 사업자 '내 홈페이지' 묶음 (대표 지시 2026-10-28) ---- */
.rail-handle{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:130;width:16px;height:64px;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid #111111;border-right:0;border-radius:6px 0 0 6px;background:#FFFFFF;color:#111111;cursor:pointer;opacity:.7;transition:opacity .15s,width .15s}
.rail-handle:hover,.rail-handle:focus-visible{opacity:1;width:20px;background:#F4F4F4}
.rail-handle:focus-visible{outline:2px solid #1B2438;outline-offset:2px}
.rail-handle[hidden]{display:none}
.rail-handle .rail-dot{top:6px;left:2px;margin:0;width:6px;height:6px;border-width:1.5px}
html.rail-off .rail-handle{display:none}
@media (max-width:899px){.rail-handle{display:none!important}}
@media print{.rail-handle{display:none!important}}
.rail-mine{border-bottom:1px solid #E6E6E6;padding:4px 0}
.rail-hp .rail-l{flex:1}
.rail-hs{flex:none;font-size:11.5px;font-weight:500;color:#5E5E5E}
.rail-hs.pub{color:#1F4D3A}.rail-hs.rej{color:#B3261E}.rail-hs.rev{color:#1B2438}
.rail-hd-dot{position:absolute;top:11px;left:50%;margin-left:5px;width:8px;height:8px;border-radius:50%;border:2px solid #FFFFFF;box-sizing:content-box;background:#B0B0B0}
.rail-hd-dot.pub{background:#1F4D3A}.rail-hd-dot.rev{background:#2F5DA8}.rail-hd-dot.rej{background:#B3261E}.rail-hd-dot.wip{background:#C9A227}
.rail[data-open="1"] .rail-hd-dot{left:36px;margin-left:0;top:12px}
.rail-hl{list-style:none;margin:0;padding:2px 18px 8px 50px;font-size:12.5px;line-height:1.5}
.rail-hl li{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:5px 0;color:#5E5E5E}
.rail-hl a{color:#111111;text-decoration:none}
.rail-hl a:hover{text-decoration:underline;text-underline-offset:3px}
.rail-hl .bod{font-size:15px;font-weight:600;color:#1B2438}
.rail:not([data-open="1"]) .rail-hl{display:none}
.rail[data-state="hide"]{display:none}

/* ---- 2026-10-28 부드러운 버튼: 레일의 단추 모양은 magazine.css 공통 토큰(--rv-btn-*)을 읽는다 ---- */
.rail-tg,.rail-hd{border-radius:var(--rv-btn-r-sm,8px);transition:background var(--rv-btn-ease,.14s ease),color var(--rv-btn-ease,.14s ease),transform var(--rv-btn-ease,.14s ease)}
.rail-i,.rail-out{width:calc(100% - 12px);margin:0 6px;border-radius:var(--rv-btn-r,10px);transition:background var(--rv-btn-ease,.14s ease),color var(--rv-btn-ease,.14s ease)}
.rail[data-open="1"] .rail-i{padding:0 12px}
.rail[data-open="1"] .rail-out{padding:0 12px}
.rail-i:active,.rail-tg:active,.rail-hd:active,.rail-out:active{background:var(--rv-btn-soft,#F3F4F7);transform:var(--rv-btn-press,scale(.97))}
.rail-av-out{border-color:var(--rv-btn-line-hover,#1B2438)}
.rail-handle{border-radius:var(--rv-btn-r-sm,8px) 0 0 var(--rv-btn-r-sm,8px)}
.rail a:focus-visible,.rail button:focus-visible{outline:0;box-shadow:var(--rv-btn-focus,0 0 0 2px #fff,0 0 0 4px #1B2438)}
.rail-sheet{--rail-sheet-r:var(--rv-pop-r,14px)}
.rail-sheet .rail-i{width:100%;margin:0;border-radius:0}
/* 2026-10-29 락인 회의 [A]4 — 펼쳤을 때 이어보기 · 오늘 일정 한 줄(접힘 상태에는 나오지 않는다) */
.rail-now{list-style:none;margin:0 0 10px;padding:0;word-break:keep-all}
.rail-now li+li{margin-top:2px}
.rail-now a{display:flex;gap:10px;align-items:flex-start;padding:8px 6px;border-radius:var(--rv-btn-r-sm,8px);color:inherit;text-decoration:none;font-size:13px;line-height:1.5}
.rail-now a:hover{background:var(--rv-btn-soft,#F3F4F7)}
.rail-now .rail-ic{flex:none;margin-top:2px}
.rail-now span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-now small{display:block;font-size:11px;color:var(--mute,#6B6B6B);letter-spacing:.02em}
@container mg (max-width:960px){.acct-av{height:40px;min-width:40px!important}.acct-av::before{width:40px;height:40px;font-size:16px}}   /* 휴대폰 머리에서 검색 원(40)과 같은 크기 */
@container mg (max-width:960px){.acct-av::after{display:block;content:"";position:absolute;inset:-2px;order:0;width:auto;margin:0;font-size:0}}   /* 2026-11-02 시험: 휴대폰 머리 아바타 보이는 40 · 누르는 자리 44 */
/* 인증 전 개인회원 한 칸(2026-11-03 · 액션 카드 20261103_인증전_회원화면_잠금): 숫자 요약 · 스케줄 · 스크랩 대신 */
.rail-vp{margin:12px 16px 6px;padding:16px 16px 14px;border:1px solid #1B2438;background:#FFFFFF;word-break:keep-all}
.rail-vp-t{margin:0;font-size:14px;font-weight:500;color:#1B2438}
.rail-vp-s{margin:8px 0 0;font-size:12.5px;line-height:1.7;color:#5E5E5E}
.rail-vp .rail-vp-b{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin:12px 0 0;border:0;background:#1B2438;color:#FFFFFF;font:500 13px/1 'Noto Sans KR',sans-serif;cursor:pointer}
.rail-vp .rail-vp-b:disabled{opacity:.6;cursor:default}
.rail-vp-m{margin:8px 0 0;font-size:12px;line-height:1.6;color:#1B2438}
.rail-vp-m:empty{display:none}
.hb-sum .rail-vp{margin:0}