:root {
  --nt-ink:#f1f4f0;
  --nt-muted:#a2b2b4;
  --nt-teal:#89d1d5;
  --nt-amber:#f6b86e;
  --nt-edge:#3a5054;
  --nt-panel:linear-gradient(145deg,#263438,#1d2629 65%,#1c2325);
  --nt-raised:inset 0 1px 0 #ffffff12,0 2px 0 #0e1517,0 9px 22px #080b0d38;
}
.site-header { background:linear-gradient(#212b2e,#171d1f); box-shadow:0 5px 22px #090d103a; }
.header-top { min-height:72px; }
.brand { color:var(--nt-ink); }
.site-main { --wide:1120px; min-width:0; padding-block:30px 60px; gap:24px; }
.site-main > *, .support-grid > * { min-width:0; }
.main-nav { border-top:1px solid #ffffff0c; }
.main-nav ul { scrollbar-width:thin; scrollbar-color:#46595c transparent; }
.main-nav a:hover, .main-nav a[aria-current] {color:var(--nt-teal);}
.page-head, .svc-panel, .site-main .auth-card, .site-main .post, .site-main .post-form, .site-main .comments,
.site-main .empty-state, .site-main .post-list, .site-main .video-card, .chat-panel, .nt-dialog {
  background:var(--nt-panel); border:1px solid var(--nt-edge); border-radius:16px; box-shadow:var(--nt-raised);
}
.page-head {position:relative;isolation:isolate;overflow:hidden;padding:clamp(25px,4vw,50px);min-height:148px;display:grid;align-content:center;
  background:radial-gradient(ellipse at 80% 80%,#28494c,transparent 64%),linear-gradient(105deg,#25373b,#192529);}
.page-head::before,.page-head::after {content:"";pointer-events:none;z-index:-1;position:absolute;border-radius:50%;
  border:clamp(13px,2.4vw,35px) solid #638c9040;box-shadow:inset 2px 2px 6px #0711148a,1px 2px 0 #98bfc02b,5px 10px 15px #070e102e;
  width:clamp(110px,15vw,195px);aspect-ratio:1;right:2%;top:20%;transform:rotate(-24deg);}
.page-head::after {right:15%;top:-47%;opacity:.55;}
.page-head h1 {font-size:clamp(26px,3.2vw,42px);letter-spacing:-.055em;color:var(--nt-ink);}
.page-head p {color:#bdd0d0;margin-top:9px;max-width:70%;font-size:14px;}
.svc-panel,.site-main .post,.site-main .comments,.site-main .post-form,.site-main .auth-card {padding:clamp(18px,3vw,32px);}
.svc-panel h2,.svc-empty h2 {font-size:20px;letter-spacing:-.035em;}
.svc-panel h2 + .svc-action,.svc-panel > .svc-muted {margin-top:16px;}
.svc-muted,.svc-empty p {color:var(--nt-muted);font-size:14px;}
.site-main input:not([type=checkbox]),.site-main textarea,.site-search input,.nt-dialog input,.chat-compose input {
  background:#151d20;border:1px solid #425459;color:var(--nt-ink);border-radius:9px;box-shadow:inset 0 2px 6px #070b0c55;}
.svc-action,.site-main .button.is-primary,.nt-dialog .button {display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:6px;
  min-height:42px;padding:8px 18px;box-sizing:border-box;border-radius:10px;border:1px solid #f5c790;box-shadow:inset 0 1px #ffead099,0 3px 0 #845927,0 5px 9px #0d13163b;
  background:linear-gradient(#ffd398,#ecaa60);color:#322517;font:700 14px/1.4 system-ui,sans-serif;text-decoration:none;cursor:pointer;}
.svc-action:hover,.site-main .button:hover,.nt-dialog .button:hover {filter:brightness(1.08);}
.svc-action:active,.nt-dialog .button:active,.service-tiles a:active {transform:translateY(2px);}
.svc-action:disabled {filter:saturate(.3);opacity:.75;cursor:default;}
:where(a,button,input,textarea):focus-visible {outline:2px solid var(--nt-teal);outline-offset:3px;}
.site-main .button:not(.is-primary),.category-tabs a,.sort-tabs a {background:linear-gradient(#2e3c40,#253034);box-shadow:inset 0 1px #ffffff12,0 2px 0 #0c1415;}
.site-main .post-list {padding:2px 18px;overflow:hidden;}
.site-main .post-row {padding:15px 0;}
.site-main .post-row:last-child {border:0;}
.site-main .video-card {padding:8px 8px 13px;height:100%;}
.video-card .video-meta,.video-card .video-title {padding-inline:5px;}
.site-main .empty-state {padding-block:42px;gap:8px;}
.site-main .empty-state h2 {font-size:18px;}
.site-main .auth-card {width:min(100%,470px);}
.svc-panel.attendance {padding:0;display:grid;grid-template-columns:minmax(0,1.8fr) minmax(200px,1fr);overflow:hidden;}
.calendar,.stamp-card {padding:clamp(18px,3vw,36px);}
.calendar-title,.day-switch {display:flex;align-items:center;justify-content:space-between;gap:12px;}
.calendar-title h2 {font-size:26px;}
.calendar-title h2 b {color:var(--nt-teal);}
.calendar-title > span,.rank-head,.weekday {color:var(--nt-muted);font-size:13px;}
.cal-grid {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:20px;text-align:center;}
.weekday {padding:4px 0;}
.cal-day {min-height:43px;display:grid;place-content:center;position:relative;background:#192225;border:1px solid #314146;border-radius:8px;font-variant-numeric:tabular-nums;}
.cal-day[aria-current] {border-color:var(--nt-amber);color:var(--nt-amber);font-weight:700;}
.cal-day.marked {background:#28484c;color:#c5efeb;}
.cal-day small {position:absolute;right:4px;top:0;font-size:11px;}
.stamp-card {display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;background:radial-gradient(ellipse at 50% 30%,#3c4f4e,transparent 66%),#202b2d;border-left:1px solid var(--nt-edge);text-align:center;}
.stamp-symbol,.tile-figure {display:grid;place-items:center;flex:none;background:linear-gradient(145deg,#537f83,#29464d);border:1px solid #6f9b9d;box-shadow:inset 0 2px 1px #cfeee32b,0 4px 0 #173037,0 8px 13px #101b1e73;color:#d1f2ed;}
.stamp-symbol {width:68px;height:68px;border-radius:50%;font-size:34px;margin-bottom:10px;}
.stamp-count {font-weight:800;font-size:38px;line-height:1.15;color:var(--nt-amber);margin-bottom:10px;}
.stamp-count small {font-size:16px;margin-left:3px;}
.day-switch {justify-content:center;border-bottom:1px solid var(--nt-edge);padding:0 0 17px;gap:24px;}
.day-switch strong,.match b,.score-idle {font:700 clamp(18px,2.5vw,30px)/1.25 ui-monospace,monospace;letter-spacing:.03em;}
.day-switch a {width:42px;height:42px;display:grid;place-content:center;border:1px solid var(--nt-edge);border-radius:10px;background:#29393d;color:var(--nt-teal);}
.svc-empty {padding:clamp(30px,5vw,54px) 8px;display:grid;justify-items:center;gap:10px;text-align:center;}
.svc-empty > svg {font-size:36px;color:var(--nt-amber);}
.svc-empty a {color:var(--nt-teal);}
.score-idle {display:flex;align-items:center;gap:7px;margin-bottom:10px;}
.score-idle b,.match b {color:var(--nt-amber);background:linear-gradient(#243036 49%,#151d20 50%);border:1px solid #46545a;border-radius:7px;padding:8px 13px;box-shadow:0 3px 0 #12191c;}
.score-idle i,.match i {font-style:normal;color:var(--nt-muted);}
.match {text-align:center;padding:20px 8px;border-bottom:1px solid var(--nt-edge);}
.match > span,.ticket small {color:var(--nt-teal);font-size:13px;}
.match > div {display:grid;align-items:center;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px;margin-top:10px;}
.rank-row {display:grid;grid-template-columns:50px 1fr 80px 90px;gap:8px;align-items:center;padding:12px 4px;border-bottom:1px solid var(--nt-edge);}
.rank-row > :nth-child(n+3) {text-align:right;font-variant-numeric:tabular-nums;}
.rank-place {background:#32484c;border-radius:9px;color:var(--nt-teal);width:35px;text-align:center;padding:5px;box-shadow:inset 0 1px #ffffff18,0 2px 0 #131d20;}
.rank-row:nth-child(2) .rank-place {background:#614b34;color:#ffd499;}
.support-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.ticket {padding:16px 0;border-bottom:1px solid var(--nt-edge);}
.ticket blockquote {margin:12px 0 0;padding:10px 14px;border-left:3px solid var(--nt-teal);background:#182427;}
.photo-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));gap:16px;}
.photo-grid a {display:grid;text-decoration:none;overflow:hidden;border-radius:14px;background:var(--nt-panel);box-shadow:var(--nt-raised);border:1px solid var(--nt-edge);}
.photo-grid img,.photo-fallback {width:100%;aspect-ratio:16/10;object-fit:cover;background:#192529;}
.photo-fallback {display:grid;place-items:center;color:var(--nt-muted);}
.photo-grid strong,.photo-grid small {padding:6px 12px;}
.post-photo {max-height:70vh;object-fit:contain;}
.chat-panel {display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;box-sizing:border-box;color:var(--nt-ink);font:14px/1.6 system-ui,sans-serif;}
.chat-stream {box-sizing:border-box;padding:8px 8px 8px 2px;height:clamp(360px,52vh,600px);overflow:auto;scrollbar-width:thin;overflow-wrap:anywhere;word-break:keep-all;display:flex;flex-direction:column;gap:2px;}
/* 채팅 한 줄: [레벨 그림] 닉네임 : 내용, 말풍선 배경 없이. 긴 내용은 줄 맨 앞부터 이어져요. */
/* 계급 그림은 왼쪽 칸에 고정하고, 두 줄로 넘어가는 내용은 닉네임 아래로 맞춰요(줄 간격 같게) */
/* flex:none — 메시지가 많아도 줄이 눌려 두 번째 줄이 다음 메시지와 겹치지 않게 */
.chat-line {position:relative;flex:none;box-sizing:border-box;min-height:32px;margin:0;padding:5px 0 5px 34px;color:#eef3f3;line-height:22px;}
.chat-who {font-weight:700;color:#7fc8d1;}
.chat-who .member-identity {display:inline;}
.chat-who .member-identity > :is(.level-avatar,.identity-mark) {position:absolute;top:0;left:0;}
.chat-who .member-identity > .identity-mark {top:4px;left:4px;}
.chat-sep {color:#c4d0d1;}
.chat-source {font-size:11px;color:#ffe1ae;border:1px solid #60747b;border-radius:4px;padding:0 5px;vertical-align:1px;}
.chat-compose {display:flex;padding:10px;border-top:1px solid var(--nt-edge);}
.chat-compose input {flex:1;width:100%;padding:8px 12px;min-height:44px;}
.chat-panel .chat-feedback {display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin:0 10px 10px;padding:10px 12px;border:1px solid #526a73;border-radius:7px;background:#202b30;color:#e1eded;font-size:13px;}
.chat-panel .chat-login-link {display:inline-flex;align-items:center;min-height:40px;color:#ffd098;text-decoration:underline;text-underline-offset:3px;}
.chat-feedback[hidden], .chat-login-link[hidden] {display:none;}
.left_chat_box .chat-panel {border-top-left-radius:0;border-top-right-radius:0;clear:both;}
.left_chat_box .chat-stream {height:400px;}
.home-empty {padding:12px;color:var(--nt-muted);font-size:13px;}
.reference-note {clear:both;padding:12px;color:var(--nt-amber);}
.service-tiles {clear:both;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-top:20px;}
.service-tiles a {position:relative;display:flex;align-items:center;gap:clamp(8px,1.15vw,20px);padding:clamp(12px,1.4vw,23px);
  text-decoration:none;border:1px solid var(--nt-edge);border-radius:14px;background:var(--nt-panel);box-shadow:var(--nt-raised);}
.service-tiles a:hover {border-color:#698b8e;}
.tile-figure {width:clamp(30px,3.5vw,48px);aspect-ratio:1;border-radius:12px;transform:rotate(-6deg);}
.tile-calendar .tile-figure {color:#f9d5a4;border-color:#9d7851;background:linear-gradient(135deg,#806545,#58432e);box-shadow:inset 0 1px #efcf8a66,0 4px 0 #392d20,0 8px 13px #101b1e73;}
.tile-figure svg {width:55%;height:55%;}
.service-tiles strong,.service-tiles small {display:block;}
.service-tiles strong {font-size:clamp(15px,1.55vw,22px);color:var(--nt-ink);line-height:1.3;}
.service-tiles small {color:var(--nt-muted);font-size:12px;margin-top:4px;}
.home-section-head {display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.home-section-head h2 {font-size:20px;color:var(--nt-ink);}
.home-section-head a {color:var(--nt-teal);font-size:13px;}
.watch,.schedule {border:1px solid var(--nt-edge);border-radius:16px;background:var(--nt-panel);box-shadow:var(--nt-raised);overflow:hidden;}
.watch {padding:clamp(12px,2vw,26px);}
.watch .player {border:1px solid #38454a;border-radius:12px;box-shadow:0 4px 10px #0b101180;}
.schedule {padding:5px 16px;}
.board-menu summary {cursor:pointer;min-height:44px;display:flex;align-items:center;gap:5px;padding:0 12px;color:var(--nt-teal);}
.board-menu summary::after {content:"▾";font-size:11px;}
.board-menu > div {position:absolute;z-index:6;top:100%;left:50%;transform:translateX(-50%);width:min(620px,calc(100% - 24px));display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:12px;box-sizing:border-box;border:1px solid var(--nt-edge);border-radius:0 0 14px 14px;background:#223034;box-shadow:0 12px 30px #0006;}
.main-nav {position:relative;}
.board-menu a:hover {background:#30464b;border-radius:5px;}
@media(max-width:1024px) {
  .m_menu_fix {height:calc(62px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:linear-gradient(#2a383b,#182124);border-top:1px solid #50666a;box-shadow:0 -6px 18px #090e104d;}
  .m_menu_fix ul {display:flex;margin:0;padding:0;}
  .m_menu_fix li a {height:60px;padding:4px 2px;font-size:11px;color:var(--nt-ink);}
  .m_menu_fix li:nth-child(3) a {width:44px;height:44px;top:6px;padding:0;box-shadow:inset 0 1px 0 #c5f7e53b,0 3px 0 #111d20;}
  .m_menu_fix li:nth-child(3) a img {margin:0;border-radius:7px;}
  .brand-feature {order:-1;margin:0 0 12px;box-shadow:var(--nt-raised);}
  .right_board_box_title {line-height:40px;}
  .footer_box {padding-bottom:90px;}
}
@media(max-width:700px) {
  .main-nav > ul {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:2px 0;overflow:visible;}
  .main-nav li > a,.board-menu summary {width:100%;justify-content:center;min-height:36px;padding:4px;font-size:13px;}
  .board-menu > div {grid-template-columns:repeat(3,minmax(0,1fr));}
}
.nt-dialog {box-sizing:border-box;position:fixed;width:min(440px,calc(100% - 28px));max-height:85dvh;margin:auto;padding:24px;color:var(--nt-ink);font:14px/1.6 system-ui,sans-serif;overflow:auto;}
.nt-dialog::backdrop {background:#091011bd;backdrop-filter:blur(4px);}
.nt-dialog .dialog-close {float:right;background:#233135;border:1px solid var(--nt-edge);border-radius:8px;color:var(--nt-teal);cursor:pointer;padding:5px 12px;}
.nt-dialog .auth-card {display:grid;gap:14px;margin:12px 0;width:auto;}
.nt-dialog h1 {font-size:27px;font-weight:750;}
.nt-dialog .auth-form {display:grid;gap:7px;}
.nt-dialog input {padding:9px 12px;min-height:40px;box-sizing:border-box;width:100%;}
.nt-dialog .help,.nt-dialog .auth-switch {font-size:13px;color:var(--nt-muted);}
.nt-dialog .auth-switch a {color:var(--nt-teal);}
.nt-dialog .button {margin-top:10px;}
.nt-dialog img {max-width:100%;height:auto;display:block;margin:16px auto 6px;}
@media(max-width:700px) {
  .header-top {min-height:56px;}
  .site-main {padding-block:16px 36px;gap:17px;}
  .page-head {min-height:118px;}.page-head p {max-width:84%;}
  .svc-panel.attendance,.support-grid {grid-template-columns:1fr;}
  .stamp-card {border-left:0;border-top:1px solid var(--nt-edge);padding:18px;display:grid;grid-template-columns:auto 1fr auto;text-align:left;column-gap:14px;}
  .stamp-symbol {grid-row:1/3;margin:0;width:47px;height:47px;font-size:25px;}
  .stamp-card h2 {font-size:15px;}.stamp-count {font-size:24px;margin:0;grid-column:2;}
  .stamp-card > :last-child {grid-column:3;grid-row:1/3;}
  .rank-row {grid-template-columns:36px 1fr 45px 55px;}
  .service-tiles {padding-top:12px;gap:7px;}
  .service-tiles a {padding:12px 5px;flex-direction:column;text-align:center;gap:9px;}.service-tiles strong {font-size:14px;}
  .service-tiles small {font-size:11px;}.tile-figure {width:33px;}
  .home-section-head h2 {font-size:17px;}
  .banner_zone {margin-top:24px;}
}
@media(prefers-reduced-motion:reduce) {.svc-action:active,.service-tiles a:active {transform:none;}}

/* The home page's two primary destinations. */
.public-shell .service-tiles--primary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.public-shell .service-tiles--primary a { min-width: 0; min-height: 104px; padding: 20px 22px; gap: 18px; }
.public-shell .service-tiles--primary a:only-child { grid-column: 1 / -1; }
.public-shell .service-tiles--primary .tile-copy { min-width: 0; }
.public-shell .service-tiles--primary strong { font-size: clamp(19px, 1.6vw, 24px); font-weight: 700; }
.public-shell .service-tiles--primary small { color: #bdcdcf; font-size: 13px; }
.public-shell .service-tiles--primary .tile-live .tile-figure { color: #88c4ca; }
.public-shell .service-tiles--primary .tile-analysis .tile-figure { color: #f6b86e; }
.public-shell .service-tiles--primary .tile-arrow { flex: 0 0 18px; width: 18px; height: 18px; margin-left: auto; color: #bdcdcf; }
@media (max-width: 700px) {
  .public-shell .service-tiles--primary { gap: 10px; }
  .public-shell .service-tiles--primary a { min-height: 156px; align-items: flex-start; gap: 14px; padding: 16px 12px; text-align: left; }
  .public-shell .service-tiles--primary .tile-figure { width: 40px; }
  .public-shell .service-tiles--primary strong { font-size: 18px; }
  .public-shell .service-tiles--primary small { font-size: 12px; line-height: 1.65; }
  .public-shell .service-tiles--primary .tile-arrow { position: absolute; top: 27px; right: 12px; }
}
/* 포인트존 (/points): 적립 기준 표 + 보유 포인트 */
.points-zone h2 {margin-bottom:10px;}
.points-zone > p {margin:0 0 12px;color:#c9d6d7;font-size:14px;word-break:keep-all;}
.points-zone + .points-zone {margin-top:16px;}
.points-balance {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 12px;}
.points-balance div {padding:14px 16px;border:1px solid var(--nt-edge);border-radius:10px;background:#1b2427;}
.points-balance dt {color:#b9c9cb;font-size:13px;}
.points-balance dd {margin:4px 0 0;color:#f6b86e;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;}
.points-zone a:not(.svc-action) {color:#a2d9de;text-decoration:underline;text-underline-offset:3px;}

/* 출석체크: 한마디 · 연속 출석 · 출석 포인트 · 오늘의 출석 (src/views/services.js attendancePage) */
.streak-count {margin:0;color:#d6e3e4;font-size:14px;}
.streak-count b {color:#7fe0a0;font-size:18px;}
.streak-count small {color:var(--nt-muted);}
.attendance-form {display:grid;gap:8px;width:100%;max-width:320px;}
.attendance-form input {width:100%;min-height:44px;padding:8px 12px;box-sizing:border-box;}
.attendance-error {margin:0;color:#ff9b9b;font-size:13px;word-break:keep-all;}
.attendance-done {margin:0;color:#e1eded;font-weight:700;}
.attendance-done b {color:var(--nt-amber);}
.attendance-rules ul {display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:12px 0;padding:0;list-style:none;}
.attendance-rules li {display:flex;justify-content:space-between;gap:8px;padding:10px 14px;border:1px solid var(--nt-edge);border-radius:8px;background:#1b2427;color:#d6e3e4;}
.attendance-rules li b {color:var(--nt-amber);font-variant-numeric:tabular-nums;}
.attendance-rules, .attendance-today {margin-top:16px;}
.attendance-today h2 span {margin-left:4px;color:var(--nt-muted);font-size:.8em;}
.attendance-list {margin:12px 0 0;padding:0;list-style:none;}
.attendance-list li {display:grid;grid-template-columns:52px auto minmax(0,1fr) auto;align-items:center;gap:6px 12px;padding:8px 4px;border-bottom:1px solid var(--nt-edge);}
.attendance-list li:last-child {border-bottom:0;}
.attendance-rank {color:var(--nt-muted);font-size:13px;text-align:center;}
.attendance-list li.is-top .attendance-rank {padding:2px 0;border-radius:999px;color:#1d2023;font-weight:800;}
.attendance-list .is-rank-1 .attendance-rank {background:#ffd166;}
.attendance-list .is-rank-2 .attendance-rank {background:#cfd8dc;}
.attendance-list .is-rank-3 .attendance-rank {background:#e7ad78;}
.attendance-message {min-width:0;color:#e6efef;overflow-wrap:anywhere;word-break:keep-all;}
.attendance-meta {display:flex;gap:8px;color:#a9babd;font-size:12px;white-space:nowrap;}
.attendance-meta b {color:#7fe0a0;font-weight:700;}
@media (max-width:700px) {
  /* 출석 칸은 휴대폰에서 세로로 (한마디 입력이 들어가서) */
  .stamp-card {display:flex;flex-direction:column;align-items:center;text-align:center;}
  .stamp-card > :last-child {grid-column:auto;grid-row:auto;}
  .attendance-list li {grid-template-columns:48px minmax(0,1fr) auto;}
  .attendance-message {grid-column:2 / 4;}
}
.attendance-rules li b {white-space:nowrap;}
.attendance-rules li.is-wide {grid-column:1 / -1;}

/* 출석체크 1안: 월간 표 + 출석 카드. 현재 날짜와 출석 표시는 서버 HTML. */
.attendance-renewal {--attn-line:#3c4b4e;--attn-muted:#b3c2c3;display:grid;gap:20px;min-width:0;word-break:keep-all;color:#edf2ed;}
.attendance-renewal * {box-sizing:border-box;}
.attendance-renewal :is(h1,h2,p,dl,dd,ul,ol) {margin:0;}
.attendance-renewal svg {width:20px;height:20px;flex:none;vertical-align:middle;}
.attn-heading {display:flex;justify-content:space-between;align-items:center;gap:18px;padding:6px 0;}
.attn-heading .attn-eyebrow {color:#9bc8c8;font-size:11px;font-weight:700;letter-spacing:.1em;}
.attn-heading h1 {font-size:32px;line-height:1.4;letter-spacing:-.045em;margin:3px 0 6px!important;}
.attn-heading>div>p:last-child {font-size:13px;color:var(--attn-muted);}
.attn-heading>time {display:flex;align-items:center;gap:8px;white-space:nowrap;padding:10px 13px;border:1px solid var(--attn-line);border-radius:9px;background:#21292c;font-size:11px;font-variant-numeric:tabular-nums;color:#c3cecc;}
.attn-heading>time svg {width:15px;height:15px;color:#a1d1d0;}
.attn-heading>time span {color:#edc28c;}
.attn-main-grid {display:grid;grid-template-columns:minmax(0,1.75fr) minmax(270px,1fr);gap:20px;align-items:stretch;}
.attn-panel {min-width:0;border:1px solid var(--attn-line);border-radius:14px;background:#232c2f;box-shadow:inset 0 1px 0 #ffffff12,0 3px 0 #101719,0 12px 24px #0003;}
.attn-calendar {position:relative;isolation:isolate;padding:25px 23px 20px;background:#222b2e;border-top:3px solid #7c9f9e;}
.attn-calendar::after {content:'';position:absolute;z-index:-1;left:10px;right:10px;bottom:-6px;height:12px;border:1px solid #445255;border-top:0;border-radius:0 0 9px 9px;background:#1a2225;box-shadow:0 3px 0 #10181b;}
.attn-calendar-heading {display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:23px;}
.attn-calendar-heading>div>p {color:#b1c1c2;font-size:11px;letter-spacing:.06em;}
.attn-calendar-heading h2 {font-size:39px;letter-spacing:-.06em;line-height:1.2;color:#e5eeeb;margin-top:5px!important;font-variant-numeric:tabular-nums;}
.attn-calendar-heading h2 span {font-size:16px;margin-left:7px;letter-spacing:-.035em;font-weight:500;color:#c9d6d3;}
.attn-month-total {font-size:11px;white-space:nowrap;color:#b7c7c6;padding:8px 10px;border:1px solid #41585c;border-radius:7px;background:#1b282b;box-shadow:inset 0 2px 5px #0002;}
.attn-month-total b {font-size:16px;color:#b6e0d8;margin:0 3px;font-variant-numeric:tabular-nums;}
.attn-calendar-table {width:100%;border-collapse:collapse;table-layout:fixed;border:1px solid #425155;border-radius:0;font-variant-numeric:tabular-nums;}
.attn-calendar-table th {height:34px;text-align:center;font-size:11px;font-weight:500;color:#bdc9c8;background:#1a2427;border-bottom:1px solid #506063;}
.attn-calendar-table th:first-child {color:#efb3a7;}
.attn-calendar-table th:last-child {color:#a3d5df;}
.attn-calendar-table td {border:1px solid #3b494d;height:71px;position:relative;vertical-align:top;}
.attn-calendar-day {background:#212a2d;}
.attn-calendar-day time {position:relative;display:inline-block;margin:7px 9px;color:#dce5e2;font-size:13px;line-height:1.4;}
.attn-calendar-day:nth-child(1) time {color:#e2b3a8;}
.attn-calendar-day:nth-child(7) time {color:#b1d4dc;}
.attn-calendar-day.is-future time {color:#a3b1b3;}
.attn-calendar-day.is-marked {background:linear-gradient(145deg,#2a4245,#243538);}
.attn-calendar-day.is-today {background:#373228;box-shadow:inset 0 0 0 2px #d2ac72;}
.attn-calendar-day.is-today time {color:#f5d299;font-weight:800;}
.attn-calendar-day.is-today.is-marked {background:#2b3f3f;}
.attn-calendar-blank {background:repeating-linear-gradient(-45deg,#1c2528 0px,#1c2528 5px,#20292c 5px,#20292c 6px);}
.attn-today-label {position:absolute;right:7px;bottom:8px;color:#edca92;font-size:10px;font-weight:700;}
.attn-day-stamp {position:absolute;left:50%;bottom:5px;transform:translateX(-50%) rotate(-12deg);width:34px;height:34px;border:1px solid #85b8b2;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;color:#c5e9de;background:linear-gradient(145deg,#416065,#2a4549);box-shadow:inset 0 0 0 2px #253d42,inset 0 0 0 3px #91bbb444,0 2px 2px #101a1b88;}
.attn-day-stamp svg {width:16px;height:16px;margin-top:1px;}
.attn-day-stamp>span {font-size:7px;line-height:1.2;letter-spacing:.03em;}
.attn-calendar-legend {display:flex;gap:16px;align-items:center;margin-top:18px;color:#b7c7c7;font-size:10px;}
.attn-calendar-legend>span {display:flex;align-items:center;gap:6px;white-space:nowrap;}
.attn-calendar-legend>span:last-child {margin-left:auto;color:#a9babb;font-size:10px;}
.attn-calendar-legend i {display:block;width:7px;height:7px;border-radius:50%;background:#8ebeb7;}
.attn-calendar-legend i.is-today {background:#e5bc7c;}
.attn-check-card {padding:31px 24px 27px;display:flex;flex-direction:column;align-items:center;text-align:center;background:radial-gradient(ellipse at 50% 0,#3c565833,transparent 62%),#222b2e;}
.attn-date-object {position:relative;isolation:isolate;width:100px;height:105px;background:linear-gradient(115deg,#fff6e7,#ded4c3);border:1px solid #aeab97;border-radius:12px 12px 11px 11px;transform:rotate(-8deg);box-shadow:inset 1px 1px 0 #ffffffbb,4px 5px 0 #a5a495,7px 8px 0 #294147,10px 14px 16px #060d1055;margin:7px 0 25px;}
.attn-date-object::before,.attn-date-object::after {content:'';position:absolute;z-index:2;top:-12px;width:9px;height:25px;border:2px solid #b98c4c;border-radius:8px;background:linear-gradient(90deg,#755b37,#e5c688 35%,#b38b50 70%,#f0d99c);box-shadow:1px 2px 2px #11202488;}
.attn-date-object::before {left:19px;}.attn-date-object::after {right:19px;}
.attn-date-month {display:block;line-height:31px;border-radius:10px 10px 0 0;background:linear-gradient(#4f8188,#2b525b);border-bottom:2px solid #17383f;color:#eaf3ee;font-size:11px;font-weight:700;box-shadow:inset 0 1px 0 #b8d9d66b;}
.attn-date-object>strong {display:block;color:#31575e;font-size:43px;line-height:60px;letter-spacing:-.06em;font-variant-numeric:tabular-nums;text-shadow:1px 1px #fff9ee;}
.attn-date-tick {position:absolute;bottom:-5px;right:-10px;display:grid;place-items:center;width:30px;height:30px;color:#ddf1e4;border:2px solid #b6cec4;border-radius:50%;background:#3d6b6e;box-shadow:1px 3px 3px #0005;}
.attn-date-tick svg {width:18px;height:18px;}
.attn-check-card>h2 {font-size:12px;letter-spacing:.06em;color:#a5cdca;font-weight:500;}
.attn-check-card .attn-daily-points {font-size:43px;line-height:1.25;font-weight:800;color:#f2c58a;letter-spacing:-.04em;margin:5px 0 0;}
.attn-daily-points small {font-size:20px;margin-left:5px;letter-spacing:0;}
.attn-metrics {width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:19px 0;margin:25px 0!important;border-block:1px solid #405054;}
.attn-metrics>div {min-width:0;}.attn-metrics dt {font-size:10px;white-space:nowrap;color:#b4c3c3;}
.attn-metrics dd {font-size:25px;line-height:1.4;margin-top:5px;font-weight:700;font-variant-numeric:tabular-nums;}
.attn-metrics dd small {margin-left:4px;color:#a8bcbc;font-size:11px;font-weight:400;}
.attn-metrics>div:nth-child(2) dd {color:#a7dbd4;}
.attendance-renewal .attendance-form {width:100%;max-width:none;margin-top:auto;gap:10px;text-align:left;}
.attendance-renewal .attendance-form input {font-size:12px;border-radius:9px;min-height:45px;background:#172024;color:#e5ece9;border:1px solid #435559;box-shadow:inset 0 3px 6px #0005;padding:9px 12px;}
.attendance-renewal .attendance-form input::placeholder {color:#acbdbf;opacity:1;}
.attendance-renewal .attn-action {display:flex;align-items:center;justify-content:center;gap:12px;min-height:46px;width:100%;padding:9px 13px;color:#302619;background:linear-gradient(#f4c98c,#dfa967);border:1px solid #ebc995;border-radius:9px;box-shadow:inset 0 1px #ffebc599,0 4px 0 #805c35,0 8px 12px #0003;text-decoration:none;font:800 13px/1.5 nexon,system-ui,sans-serif;cursor:pointer;white-space:nowrap;}
.attn-action svg {width:17px;height:17px;}.attn-action:hover {filter:brightness(1.06);}.attn-action:active {transform:translateY(2px);}
.attn-login,.attn-completed {width:100%;margin-top:auto;}
.attendance-renewal .attn-login>p {color:#b9c8c8;font-size:11px;margin-bottom:12px;}
.attn-completed>p {display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border:1px solid #729d96;border-radius:9px;color:#d7eee5;background:#315251;box-shadow:inset 0 1px #c1ded326,0 3px #182f32;font-size:14px;font-weight:700;}
.attn-completed>p b {color:#f4ca8e;font-size:12px;}.attn-completed>span {display:block;font-size:11px;color:#b5c5c5;margin-top:12px;}
.attendance-renewal .attendance-error {font-size:11px;color:#f9b3a6;}
.attn-rewards>h2 {font-size:15px;font-weight:700;margin-bottom:11px!important;}
.attn-reward-list {display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:10px;padding:0;list-style:none;}
.attn-reward-list li {min-width:0;border:1px solid #405054;border-radius:9px;background:#232c2e;box-shadow:inset 0 1px #ffffff0c,0 2px #11191c;padding:14px 15px;}
.attn-reward-list li>span {display:block;white-space:nowrap;color:#bbc9c9;font-size:11px;}
.attn-reward-list li>b {display:block;white-space:nowrap;color:#f0e4cf;font-size:19px;margin-top:3px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
.attn-reward-list li.is-bonus {background:#302d26;border-color:#776144;}.attn-reward-list li.is-bonus>b {color:#f4c181;}
.attn-streak {display:grid;grid-template-columns:auto minmax(80px,1fr) auto;gap:22px;align-items:center;padding:17px 20px;border:1px solid #40595b;border-radius:10px;background:#223134;box-shadow:inset 0 1px #ffffff0b,0 2px #111b1e;}
.attn-streak>div {display:flex;gap:20px;align-items:center;}.attn-streak h2 {font-size:12px;font-weight:500;white-space:nowrap;}.attn-streak>div>span {font-size:12px;color:#b2e0d9;white-space:nowrap;font-variant-numeric:tabular-nums;}
.attn-streak progress {appearance:none;border:0;width:100%;height:8px;border-radius:8px;overflow:hidden;background:#111c20;color:#a7d7d0;}
.attn-streak progress::-webkit-progress-bar {background:#111c20;border-radius:8px;box-shadow:inset 0 2px 3px #0005;}
.attn-streak progress::-webkit-progress-value {border-radius:8px;background:linear-gradient(90deg,#487d82,#addbd2);box-shadow:inset 0 1px #d2eee65c;}
.attn-streak progress::-moz-progress-bar {border-radius:8px;background:linear-gradient(90deg,#487d82,#addbd2);}
.attn-streak>p {font-size:11px;color:#bbcbca;}.attn-streak>p b {color:#f2c58c;font-weight:500;}
.attn-attendees {padding:22px 23px 12px;}
.attn-section-head {display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:17px;}
.attn-section-head h2 {font-size:18px;letter-spacing:-.035em;}.attn-section-head>span {font-size:11px;color:#b0c2c2;}
.attn-count {display:inline-block;font-size:12px;line-height:1.5;background:#19262a;color:#b2d8d4;border-radius:20px;padding:3px 9px;margin-left:7px;font-weight:500;vertical-align:middle;}
.attn-list-head,.attn-list li {display:grid;grid-template-columns:40px 145px minmax(0,1fr) 70px 63px;align-items:center;gap:10px;}
.attn-list-head {font-size:11px;color:#b1c2c2;border-block:1px solid #445356;padding:9px 0;}
.attn-list-head>span:first-child {text-align:center;}.attn-list-head>span:nth-last-child(-n+2) {text-align:right;}
.attn-list {list-style:none;padding:0;}.attn-list li {min-height:43px;border-bottom:1px solid #39494c;font-size:12px;}.attn-list li:last-child {border:0;}
.attn-list .member-identity {min-width:0;font-size:12px;gap:4px;}.attn-list .member-nickname {min-width:0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
.attn-rank {font-size:11px;text-align:center;color:#b5c7c7;white-space:nowrap;}
.attn-rank[class*="is-rank-"] {display:block;padding:3px 0;border:1px solid #8c704d;border-radius:6px;background:linear-gradient(#4d402e,#362e26);color:#f1ce96;box-shadow:inset 0 1px #fff1d01c,0 2px #11191b;font-weight:700;}
.attn-rank.is-rank-2 {background:linear-gradient(#414d50,#2f3c40);border-color:#687f83;color:#d3e0dc;}.attn-rank.is-rank-3 {background:linear-gradient(#4e3e33,#352c26);border-color:#816248;color:#e6c09b;}
.attn-message {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d3ddda;}
.attn-row-streak {color:#a7d1c8;font-size:11px;white-space:nowrap;text-align:right;}
.attn-list time {font-size:11px;text-align:right;color:#b0bec1;font-variant-numeric:tabular-nums;white-space:nowrap;}
.attn-empty {padding:35px 10px 38px;display:flex;align-items:center;justify-content:center;gap:10px;color:#afc4c4;font-size:13px;border-top:1px solid #3d4f51;}.attn-empty svg {color:#95c3bf;}
.attn-footnote {font-size:11px;text-align:center;color:#acbfc0;}
@media(max-width:1100px){
  .attn-main-grid {grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr);gap:15px;}
  .attn-calendar {padding:22px 16px 18px;}.attn-check-card {padding:29px 18px 23px;}
  .attn-calendar-day time {margin:7px;}.attn-calendar-heading h2 span {font-size:14px;}.attn-month-total {padding:7px 8px;}
  .attn-reward-list {gap:7px;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));}.attn-reward-list li {padding:12px 10px;}.attn-reward-list li>span {font-size:10px;}.attn-reward-list li>b {font-size:17px;}
  .attn-streak {grid-template-columns:auto minmax(80px,1fr);gap:9px 20px;}.attn-streak>p {grid-column:1/-1;}
  .attn-list-head,.attn-list li {grid-template-columns:35px 130px minmax(0,1fr) 62px 60px;gap:8px;}
}
@media(max-width:980px){
  .attn-main-grid {grid-template-columns:1fr;}
  .attn-check-card {display:grid;grid-template-columns:100px minmax(0,1fr);gap:0 22px;text-align:left;padding:25px;}
  .attn-date-object {grid-column:1;grid-row:1/4;margin:8px 0 6px;width:88px;height:95px;}
  .attn-date-object>strong {font-size:37px;line-height:53px;}.attn-date-month {line-height:28px;}
  .attn-check-card>h2,.attn-check-card>.attn-daily-points {grid-column:2;}.attn-check-card>h2 {align-self:end;}.attn-check-card>.attn-daily-points {align-self:start;}
  .attn-check-card .attn-metrics {grid-column:1/-1;text-align:center;padding:16px 0;margin:20px 0!important;}
  .attendance-renewal .attendance-form,.attn-check-card>.attn-login,.attn-check-card>.attn-completed {grid-column:1/-1;}
  .attendance-renewal .attendance-form {grid-template-columns:minmax(0,1fr) auto;gap:10px;}.attendance-renewal .attendance-form .attendance-error {grid-column:1/-1;}.attendance-renewal .attendance-form .attn-action {grid-column:2;grid-row:1;}
  .attn-login>p {text-align:center;}.attn-completed {text-align:center;}
}
@media(max-width:700px){
  .attendance-renewal {gap:16px;}.attn-heading {align-items:flex-start;gap:12px;}.attn-heading h1 {font-size:28px;}.attn-heading>div>p:last-child {font-size:11px;}.attn-heading>time {font-size:10px;padding:8px;gap:5px;}.attn-heading>time span {display:none;}.attn-heading>time svg {width:13px;height:13px;}
  .attn-calendar-table td {height:64px;}.attn-day-stamp {width:31px;height:31px;bottom:4px;}.attn-day-stamp svg {width:14px;height:14px;}
  .attn-reward-list {display:flex;gap:6px;}.attn-reward-list li {flex:1 1 0;min-width:0;padding:11px 6px;text-align:center;}.attn-reward-list li>span {font-size:9px;letter-spacing:-.035em;}.attn-reward-list li>b {font-size:15px;}
  .attn-list-head,.attn-list li {grid-template-columns:30px 120px minmax(0,1fr) 57px;gap:7px;}.attn-list-head>span:nth-child(4),.attn-list .attn-row-streak {display:none;}
  .attn-attendees {padding:19px 16px 10px;}.attn-list .member-identity {font-size:11px;gap:3px;}.attn-list li {font-size:11px;}
  .attn-streak {padding:15px 17px;}.attn-streak>div {gap:17px;}.attn-streak>p {font-size:10px;}.attn-footnote {font-size:10px;}
}
@media(max-width:430px){
  .attn-heading {gap:8px;}.attn-heading .attn-eyebrow {font-size:10px;}.attn-heading h1 {font-size:27px;}.attn-heading>div>p:last-child {font-size:10px;}.attn-heading>time {padding:6px 7px;font-size:9px;}.attn-heading>time svg {display:none;}
  .attn-calendar {padding:19px 13px 16px;}.attn-calendar-heading {margin-bottom:18px;}.attn-calendar-heading h2 {font-size:34px;}.attn-calendar-heading h2 span {font-size:13px;margin-left:5px;}.attn-calendar-heading>div>p {font-size:10px;}.attn-month-total {font-size:10px;padding:7px;}.attn-month-total b {font-size:14px;}
  .attn-calendar-table th {height:31px;font-size:10px;}.attn-calendar-table td {height:58px;}.attn-calendar-day time {font-size:11px;margin:5px 6px;}.attn-day-stamp {width:28px;height:28px;bottom:3px;}.attn-day-stamp>span {font-size:6px;}.attn-day-stamp svg {width:13px;height:13px;}.attn-today-label {font-size:9px;bottom:6px;right:6px;}
  .attn-calendar-legend {gap:12px;font-size:9px;margin-top:15px;}.attn-calendar-legend>span:last-child {font-size:9px;}
  .attn-check-card {padding:23px 19px;grid-template-columns:88px minmax(0,1fr);gap:0 20px;}.attn-check-card .attn-daily-points {font-size:39px;}.attn-check-card>h2 {font-size:11px;}.attn-metrics dd {font-size:24px;}.attn-metrics dt {font-size:10px;}
  .attendance-renewal .attendance-form input {font-size:11px;padding:9px;min-width:0;}.attendance-renewal .attn-action {font-size:12px;gap:5px;padding:9px 10px;}.attn-action svg {width:15px;height:15px;}
  .attn-rewards>h2 {font-size:14px;}.attn-reward-list {gap:4px;}.attn-reward-list li {padding:10px 3px;}.attn-reward-list li>span {font-size:9px;letter-spacing:-.035em;}.attn-reward-list li>b {font-size:14px;letter-spacing:-.04em;}
  .attn-attendees {padding:17px 12px 9px;}.attn-section-head h2 {font-size:17px;}.attn-count {font-size:10px;padding:3px 7px;}.attn-list-head,.attn-list li {grid-template-columns:27px 102px minmax(0,1fr) 49px;gap:5px;}.attn-list-head {font-size:10px;}.attn-list .member-identity {font-size:10px;gap:1px;}.attn-message {font-size:10px;}.attn-list time {font-size:9px;}.attn-list li {min-height:42px;}.attn-rank {font-size:9px;}
  .attn-streak {padding:14px;gap:9px 15px;}.attn-streak h2,.attn-streak>div>span {font-size:11px;}.attn-streak>div {gap:13px;}.attn-footnote {font-size:9px;}.attn-empty {font-size:12px;padding:30px 8px;}
}