/* 앱 화면 조각 (data-ui). 앱의 디자인 보드(docs/design)를 HTML 로 옮긴 것이라 앱 자체의 둥근 모서리와 그림자를 그대로 쓴다.
   크기는 조각 너비에 비례(cqi)해서 어떤 화면에서도 비율이 유지된다. 페이지 규칙(site.css)은 이 안쪽에 적용되지 않는다. */
[data-ui] {
  container-type: inline-size;
  --navy: #14213D; --ink-3: #646B7B; --paper: #F3F5F9; --paper-2: #E9EDF4; --line: #E1E6EF;
  --blue: #2F6BFF; --blue-50: #EEF3FF; --blue-600: #1F55E0;
  --gold: #F6C723; --gold-ink: #6E5500; --champagne: #FFF5D1;
  --green: #11734D; --green-50: #E5F5EE; --red: #D2433D;
  --shadow-sm: 0 1px 2px rgba(20, 33, 61, .06), 0 2px 8px rgba(20, 33, 61, .05);
}
[data-ui] .m-pad { padding: 3cqi 5cqi; }
[data-ui] .m-pad--tight { padding-top: 4cqi; }
[data-ui] .m-center { height: 85%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
[data-ui] .m-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4cqi; }
[data-ui] .m-logo { height: 8cqi; width: auto; margin-left: -1.2cqi; }
[data-ui] .m-sub { font-size: 3.4cqi; color: var(--ink-3); margin: 1cqi 0 0; }
[data-ui] .m-sub--light { color: rgba(255, 255, 255, .65); }
[data-ui] .m-sub--center { text-align: center; }
[data-ui] .m-iconbtn { position: relative; width: 10cqi; height: 10cqi; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow-sm); }
[data-ui] .m-iconbtn .icon { width: 5cqi; height: 5cqi; }
[data-ui] .m-dot { position: absolute; top: 2cqi; right: 2.4cqi; width: 2cqi; height: 2cqi; border-radius: 50%; background: var(--gold); }
[data-ui] .m-hero-card { padding: 5cqi; border-radius: 7cqi; background: #1B2A4D; color: #fff; }
[data-ui] .m-pill { display: inline-block; padding: 1cqi 3cqi; border-radius: 99px; background: rgba(255, 255, 255, .1); color: var(--gold); font-size: 3.2cqi; font-weight: 700; }
[data-ui] .m-h { font-family: var(--font-app, var(--font-display)); font-weight: 700; font-size: 6cqi; line-height: 1.22; margin: 3cqi 0 4cqi; }
[data-ui] .m-uni { display: flex; align-items: center; gap: 3cqi; padding: 2.6cqi 3.4cqi; margin-bottom: 2cqi; border-radius: 4.5cqi; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
[data-ui] .m-uni--light { background: #fff; box-shadow: var(--shadow-sm); }
[data-ui] .m-uni__rank { flex: none; width: 7.5cqi; height: 7.5cqi; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 3.6cqi; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
[data-ui] .m-uni--light .m-uni__rank { box-shadow: inset 0 0 0 1.5px #C9CFDB; }
[data-ui] .m-uni__rank.is-first { background: var(--gold); color: var(--navy); box-shadow: none; }
[data-ui] .m-uni__name { flex: 1; min-width: 0; }
[data-ui] .m-uni__name b { display: block; font-size: 3.9cqi; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-ui] .m-uni__name small, [data-ui] .m-uni__fit small { display: block; font-size: 2.9cqi; opacity: .65; }
[data-ui] .m-uni__fit { text-align: right; }
[data-ui] .m-uni__fit b { display: block; font-size: 4.8cqi; line-height: 1.1; }
[data-ui] .m-uni__fit small { color: var(--gold); opacity: 1; font-weight: 700; }
[data-ui] .m-uni--light .m-uni__fit small { color: var(--gold-ink); }
[data-ui] .m-cta { display: flex; align-items: center; justify-content: space-between; margin-top: 3.5cqi; padding: 2cqi 2cqi 2cqi 5cqi; border-radius: 99px; background: #fff; color: var(--navy); font-weight: 800; font-size: 3.8cqi; }
[data-ui] .m-cta i { width: 9cqi; height: 9cqi; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; }
[data-ui] .m-cta .icon { width: 4.4cqi; height: 4.4cqi; transform: rotate(-45deg); }
[data-ui] .m-notice { margin-top: 3.5cqi; padding: 3.6cqi 4cqi; border-radius: 5cqi; background: #fff; box-shadow: var(--shadow-sm); }
[data-ui] .m-notice b { display: block; margin-top: 1.6cqi; font-size: 3.7cqi; }
[data-ui] .m-title { font-family: var(--font-app, var(--font-display)); font-weight: 700; font-size: 6cqi; line-height: 1.25; margin: 2cqi 0 4cqi; }
[data-ui] .m-title--lg { font-size: 7.2cqi; margin-bottom: 3cqi; }
[data-ui] .m-title--center { text-align: center; font-size: 5cqi; margin: 3cqi 0 1cqi; }
[data-ui] .m-form { display: grid; gap: 2.4cqi; margin-bottom: 5cqi; }
[data-ui] .m-field { padding: 2.6cqi 4cqi; border-radius: 4cqi; background: #fff; box-shadow: var(--shadow-sm); }
[data-ui] .m-field small { display: block; font-size: 2.9cqi; color: var(--ink-3); }
[data-ui] .m-field span { font-weight: 700; }
[data-ui] .m-btn { display: block; text-align: center; padding: 3.6cqi; border-radius: 99px; font-weight: 800; }
[data-ui] .m-btn--gold { background: var(--gold); color: var(--navy); }
[data-ui] .m-loading__mascot { width: 34cqi; height: auto; }
[data-ui] .m-progress { width: 60%; height: 2cqi; margin-top: 5cqi; border-radius: 99px; background: var(--paper-2); overflow: hidden; }
[data-ui] .m-progress i { display: block; height: 100%; width: 45%; border-radius: 99px; background: var(--blue); }
@media (prefers-reduced-motion: no-preference) { [data-ui] .m-layer.is-active .m-progress i { animation: progress 2.2s ease-in-out infinite; } @keyframes progress { 0% { transform: translateX(-100%); } 100% { transform: translateX(230%); } } }
[data-ui] .m-results { margin-bottom: 3cqi; }
[data-ui] .m-card { padding: 4cqi; border-radius: 5cqi; background: #fff; box-shadow: var(--shadow-sm); }
[data-ui] .m-card__h { font-weight: 800; margin-bottom: 2.5cqi; }
[data-ui] .m-bar { display: grid; grid-template-columns: 13cqi 1fr 7cqi; align-items: center; gap: 2cqi; font-size: 3.2cqi; margin-top: 1.6cqi; }
[data-ui] .m-bar small { color: var(--ink-2); }
[data-ui] .m-bar svg { width: 100%; height: 2cqi; }
[data-ui] .m-bar__bg { fill: var(--paper-2); }
[data-ui] .m-bar__fg { fill: var(--navy); }
[data-ui] .m-bar__fg.is-gold { fill: var(--gold); }
[data-ui] .m-bar b { text-align: right; }
[data-ui] .m-stack { position: relative; height: 100%; }
[data-ui] .m-layer { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility .45s; }
[data-ui] .m-layer.is-active { opacity: 1; visibility: visible; }
[data-ui] .m-detail-top { padding: 5cqi; background: var(--navy); color: #fff; border-radius: 0 0 7cqi 7cqi; }
[data-ui] .m-detail-top .m-h { margin: 0 0 1cqi; font-size: 7cqi; }
[data-ui] .m-row { display: flex; justify-content: space-between; align-items: center; gap: 3cqi; padding: 2.6cqi 0; border-bottom: 1px solid var(--line); }
[data-ui] .m-row:last-child { border-bottom: 0; }
[data-ui] .m-row small { color: var(--ink-2); font-size: 3.4cqi; }
[data-ui] .m-row span { font-weight: 700; font-size: 3.6cqi; text-align: right; }
[data-ui] .m-chip { display: inline-block; padding: .6cqi 2.4cqi; border-radius: 99px; background: var(--blue-50); color: var(--blue-600); font-size: 2.9cqi; font-weight: 700; }
[data-ui] .m-chip--muted { background: var(--paper-2); color: var(--ink-2); }
[data-ui] .m-chip--gold { background: var(--champagne); color: var(--gold-ink); }
[data-ui] .m-chip--free { background: var(--green-50); color: var(--green); flex: none; }
[data-ui] .m-source { margin-top: 3cqi; font-size: 2.9cqi; color: var(--ink-3); text-align: center; }
[data-ui] .m-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1cqi; padding: 3cqi; border-radius: 5cqi; background: #fff; box-shadow: var(--shadow-sm); margin-bottom: 3cqi; }
[data-ui] .m-cal span { position: relative; height: 7cqi; display: grid; place-items: center; font-size: 3.2cqi; border-radius: 50%; }
[data-ui] .m-cal span.is-today { background: var(--navy); color: #fff; font-weight: 800; }
[data-ui] .m-cal i { position: absolute; bottom: .3cqi; width: 1.3cqi; height: 1.3cqi; border-radius: 50%; }
[data-ui] .dot-blue { background: var(--blue); } .dot-red { background: var(--red); } .dot-gold { background: var(--gold); }
[data-ui] .m-event { display: flex; align-items: center; gap: 3cqi; padding: 2.4cqi 3.6cqi; margin-bottom: 1.8cqi; border-radius: 4cqi; background: #fff; box-shadow: var(--shadow-sm); border-left: 1.2cqi solid var(--blue); }
[data-ui] .m-event--red { border-left-color: var(--red); } .m-event--gold { border-left-color: var(--gold); }
[data-ui] .m-event b { font-size: 3.4cqi; min-width: 11cqi; }
[data-ui] .m-check { margin-top: 3cqi; padding: 3cqi 4cqi; }
[data-ui] .m-check__row { display: flex; align-items: center; gap: 2.4cqi; padding: 1.2cqi 0; font-size: 3.4cqi; }
[data-ui] .m-check__row i { width: 4.6cqi; height: 4.6cqi; border-radius: 1.4cqi; box-shadow: inset 0 0 0 1.5px #C9CFDB; display: grid; place-items: center; flex: none; }
[data-ui] .m-check__row.is-done { color: var(--ink-3); text-decoration: line-through; }
[data-ui] .m-check__row.is-done i { background: var(--blue); box-shadow: none; color: #fff; }
[data-ui] .m-check__row .icon { width: 3.4cqi; height: 3.4cqi; stroke-width: 3; }
[data-ui] .m-search { display: flex; align-items: center; gap: 2cqi; padding: 3cqi 4cqi; border-radius: 99px; background: #fff; color: var(--ink-3); font-size: 3.4cqi; box-shadow: var(--shadow-sm); }
[data-ui] .m-search .icon { width: 4.2cqi; height: 4.2cqi; }
[data-ui] .m-cats { display: flex; gap: 1.6cqi; margin: 3cqi 0; overflow: hidden; }
[data-ui] .m-cats span { flex: none; padding: 1.4cqi 3.4cqi; border-radius: 99px; background: #fff; font-size: 3.2cqi; font-weight: 700; box-shadow: var(--shadow-sm); }
[data-ui] .m-cats span.is-active { background: var(--navy); color: #fff; }
[data-ui] .m-post { padding: 3.6cqi 4cqi; margin-bottom: 2.4cqi; border-radius: 5cqi; background: #fff; box-shadow: var(--shadow-sm); }
[data-ui] .m-post__meta { display: flex; align-items: center; gap: 2cqi; margin-bottom: 2cqi; font-size: 3cqi; }
[data-ui] .m-post__ago { margin-left: auto; color: var(--ink-3); }
[data-ui] .m-avatar { width: 6cqi; height: 6cqi; border-radius: 50%; display: grid; place-items: center; background: var(--champagne); color: var(--gold-ink); font-weight: 800; font-size: 3cqi; }
[data-ui] .m-post b { display: block; margin: 1.6cqi 0 .6cqi; font-size: 3.8cqi; }
[data-ui] .m-post p { font-size: 3.2cqi; color: var(--ink-2); margin: 0; }
[data-ui] .m-post__acts { display: flex; align-items: center; gap: 1.2cqi; margin-top: 2cqi; font-size: 3cqi; color: var(--ink-3); }
[data-ui] .m-post__acts .icon { width: 3.6cqi; height: 3.6cqi; }
[data-ui] .m-post__acts .icon:nth-of-type(2) { margin-left: 2.5cqi; }
[data-ui] .m-fab { position: absolute; right: 5cqi; bottom: 21cqi; display: inline-flex; align-items: center; gap: 1.4cqi; padding: 2.6cqi 4cqi; border-radius: 99px; background: var(--gold); color: var(--navy); font-weight: 800; font-size: 3.4cqi; box-shadow: var(--shadow); }
[data-ui] .m-fab .icon { width: 3.8cqi; height: 3.8cqi; }
[data-ui] .m-lecture { display: flex; align-items: center; gap: 3cqi; padding: 3cqi; margin-bottom: 2.4cqi; border-radius: 5cqi; background: #fff; box-shadow: var(--shadow-sm); }
[data-ui] .m-thumb { flex: none; width: 18cqi; height: 13cqi; border-radius: 3cqi; display: grid; place-items: center; color: #fff; }
[data-ui] .m-thumb--0 { background: #22325A; }
[data-ui] .m-thumb--1 { background: #2F6BFF; }
[data-ui] .m-thumb--2 { background: #F6C723; color: #14213D; }
[data-ui] .m-thumb .icon { width: 6cqi; height: 6cqi; }
[data-ui] .m-lecture__txt { flex: 1; min-width: 0; }
[data-ui] .m-lecture__txt b { display: block; font-size: 3.5cqi; line-height: 1.3; }
[data-ui] .m-lecture__txt small { display: block; font-size: 2.9cqi; color: var(--ink-3); margin-top: .6cqi; }
[data-ui] .m-chat-top { display: flex; align-items: center; gap: 2cqi; padding: 3cqi 5cqi; background: #fff; border-bottom: 1px solid var(--line); }
[data-ui] .m-chat-top .icon { width: 5cqi; height: 5cqi; color: var(--blue); }
[data-ui] .m-chat { display: flex; flex-direction: column; gap: 2.4cqi; }
[data-ui] .m-bubble { max-width: 82%; margin: 0; padding: 2.6cqi 3.6cqi; border-radius: 4.5cqi 4.5cqi 4.5cqi 1.2cqi; background: #fff; box-shadow: var(--shadow-sm); font-size: 3.5cqi; }
[data-ui] .m-bubble.is-me { align-self: flex-end; border-radius: 4.5cqi 4.5cqi 1.2cqi 4.5cqi; background: var(--navy); color: #fff; }
[data-ui] .m-chat-input { position: absolute; left: 4cqi; right: 4cqi; bottom: 5cqi; display: flex; align-items: center; justify-content: space-between; padding: 1.6cqi 1.6cqi 1.6cqi 4cqi; border-radius: 99px; background: #fff; color: var(--ink-3); font-size: 3.4cqi; box-shadow: var(--shadow-sm); }
[data-ui] .m-chat-input i { width: 8cqi; height: 8cqi; border-radius: 50%; background: var(--gold); color: var(--navy); display: grid; place-items: center; }
[data-ui] .m-chat-input .icon { width: 4cqi; height: 4cqi; }
[data-ui] .m-tabs { position: absolute; left: 6cqi; right: 6cqi; bottom: 6.5cqi; display: flex; justify-content: space-between; align-items: center; padding: 1.6cqi; border-radius: 99px; background: #fff; box-shadow: 0 6px 20px -6px rgba(20, 33, 61, .25); }
[data-ui] .m-tab { display: inline-flex; align-items: center; justify-content: center; gap: 1.4cqi; min-width: 11cqi; height: 10cqi; border-radius: 99px; color: var(--ink-3); }
[data-ui] .m-tab .icon { width: 4.8cqi; height: 4.8cqi; }
[data-ui] .m-tab.is-active { background: var(--navy); color: #fff; padding: 0 4cqi; }
[data-ui] .m-tab b { font-size: 3.2cqi; white-space: nowrap; }