/* Shared blog/mail frame. Canonical copy: blog/runtime-foundation/site/service-frame.css. */
:root{--page:#fff;--surface:#fff;--text:#171717;--muted:#4b4b4b;--faint:#666;--line:#d8d8d8;--subtle:#f5f5f5;--accent:#202020;--accent-hover:#000;--accent-soft:#eee;--on-accent:#fff;--focus:#386eac}
html[data-theme=dark]{--page:#151515;--surface:#151515;--text:#ededed;--muted:#c2c2c2;--faint:#a7a7a7;--line:#505050;--subtle:#222;--accent:#eee;--accent-hover:#fff;--accent-soft:#303030;--on-accent:#171717;--focus:#94beee}
.site-shell{--rail-width:clamp(156px,15vw,200px);--rail-gap:clamp(16px,1.5vw,20px);width:100%;max-width:1432px;margin-inline:auto;min-height:100vh;display:grid;grid-template-columns:var(--rail-width) minmax(0,1fr) var(--rail-width);grid-template-rows:minmax(0,1fr) auto;gap:0 var(--rail-gap);align-items:start;padding:20px 16px 36px}
.site-rail{grid-column:1;grid-row:1;min-width:0}.site-header{display:block;min-height:0;padding:0;border:0}.site-brand{display:flex;align-items:center;width:100%;gap:12px;color:var(--text);text-decoration:none}.site-brand:hover{text-decoration:none}.site-logo{display:block;flex:0 0 64px;width:64px;height:64px;border:1px solid var(--line);background:var(--surface);overflow:hidden}.site-logo img{display:block;width:100%;height:100%;object-fit:contain}.brand-copy{display:flex;flex-direction:column;min-width:0;gap:6px}.site-title{letter-spacing:-.02em;font-size:20px;font-weight:650;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.site-subtitle{letter-spacing:-.025em;color:var(--muted);display:block;width:auto;min-width:0;min-height:0;border:0;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.service-nav{display:flex;gap:4px;margin:16px 0 0;border-bottom:1px solid var(--line);padding:0 0 6px;min-height:37px}.service-nav:empty{display:none}.service-nav .service-link{display:inline-flex;flex:1;align-items:center;justify-content:center;padding:4px 8px;min-height:30px;border:0;border-radius:6px;font-size:14px;line-height:1.5;color:var(--text);text-decoration:none}.service-nav .service-link:hover{background:var(--subtle)}.service-nav .service-link[aria-current=page]{background:var(--accent-soft);font-weight:650}
.sidebar{position:static;min-width:0;margin:20px 0 0;border:0}.sidebar-content{min-height:0}#main-content{grid-column:2;grid-row:1;min-width:0;width:100%;max-width:960px;justify-self:center;margin:0;padding:0}
.account-area{grid-column:3;grid-row:1;justify-self:stretch;width:100%;max-width:none;min-width:0}.guest-profile{display:flex;align-items:flex-start;gap:12px}.guest-avatar{display:flex;align-items:center;justify-content:center;position:relative;width:64px;height:64px;flex:0 0 64px;border:1px solid var(--line);border-radius:0;background:var(--surface);overflow:hidden;color:var(--muted)}.guest-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.account-actions{display:flex;flex-direction:column;align-items:flex-start;gap:8px;flex:1;min-width:0}.account-actions button,.account-actions a{display:inline-flex;align-items:center;min-height:28px;padding:0;border:0;border-radius:0;background:transparent;color:var(--muted);font-size:14px;line-height:1.4;text-align:left;text-decoration:none;cursor:pointer}.account-actions button:hover,.account-actions a:hover{background:transparent;color:var(--text);text-decoration:underline}.member-name{font-size:14px;font-weight:650;line-height:28px;overflow-wrap:anywhere;max-width:100%}.account-actions .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:32px;min-width:32px;min-height:32px;padding:0;border:0;background:transparent}.theme-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.theme-icon-sun{display:none}html[data-theme=dark] .theme-icon-moon{display:none}html[data-theme=dark] .theme-icon-sun{display:block}.guest-avatar svg{stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.site-credit{grid-column:2;grid-row:2;position:static;display:block;margin:0;padding:48px 2px 0;font-size:13px;color:var(--muted)}
@media(max-width:900px){.site-shell{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto minmax(0,1fr) auto;gap:0 12px;padding:16px 20px 32px}.site-rail{display:contents}.site-header{grid-column:1;grid-row:1;align-self:start}.site-brand{width:max-content;max-width:100%}.site-logo,.guest-avatar{width:50px;height:50px;flex-basis:50px}.service-nav{width:max-content;min-width:156px;margin-top:12px}.account-area{grid-column:2;grid-row:1;width:max-content;max-width:260px}.sidebar{grid-column:1/-1;grid-row:2;margin:10px 0 14px;border-bottom:1px solid var(--line)}#main-content{grid-column:1/-1;grid-row:3;max-width:none}.site-credit{grid-column:1/-1;grid-row:4;padding-top:24px}}
@media(max-width:540px){.site-shell{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr) auto;padding:12px 14px 28px;gap:0 8px}.site-header{grid-column:1;grid-row:1}.site-logo,.guest-avatar{width:38px;height:38px;flex-basis:38px}.site-brand,.guest-profile{gap:6px}.site-title{font-size:16px}.site-subtitle{font-size:11px}.account-area{grid-column:1;grid-row:2;justify-self:end;width:max-content;max-width:100%;margin-top:4px}.account-actions{flex:none;flex-direction:row;align-items:center;flex-wrap:wrap;max-width:calc(100vw - 86px);width:max-content;gap:4px 10px}.account-actions button,.account-actions a{min-height:20px;font-size:12px;flex-shrink:0}.member-name{font-size:12px;line-height:20px}.guest-avatar svg{width:22px;height:22px}.sidebar{grid-column:1;grid-row:3}#main-content{grid-column:1;grid-row:4}.site-credit{grid-column:1;grid-row:5}}

.site-rail,.account-area,.site-credit{font-family:"Pretendard Variable",system-ui,"Apple SD Gothic Neo","Malgun Gothic",var(--international-fonts),"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}