/* fonts */
/* Pretendard */
@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard/PretendardVariable.woff2') format('woff2');
}


/* animations */
@keyframes cameImpact {
    from {
    }

    50% {
        color: #F48B0E;
        scale: 1;
        rotate: 0deg;
    }

    to {
        color: #F46224;
        scale: 3;
        rotate: -15deg;
    }
    
}


/* styles */

/* Current application customs */
html {

    --color-mango-archromatic-darker: #34373A;      --cmadr: 52 55 58;
    --color-mango-archromatic-dark: #4D5256;        --cmad: 77 82 86;
    --color-mango-archromatic-neutral: #949DA5;     --cman: 148 157 165;
    --color-mango-archromatic-lightness: #C5D2DD;   --cmaln: 197 210 221;
    --color-mango-archromatic-lightest: #F1F1F4;    --cmalt: 241 241 244;

    --color-mango-yellow-light: #FDD105;            --cmyl: 253 209 5;
    --color-mango-yellow-vivid-lightest: #FFEA47;   --cmyvlt: 255 234 71;
    --color-mango-yellow-vivid-lightness: #FFEB30;  --cmyvln: 255 235 48;
    --color-mango-yellow-vivid-lighter: #FFD930;    --cmyvlr: 255 217 48;
    --color-mango-yellow-vivid-light: #FFCC22;      --cmyvl: 255 204 34;
    --color-mango-yellow-vivid: #F7B500;            --cmyv: 247 181 0;
    --color-mango-yellow-dark: #FFB300;             --cmyd: 255 179 0;
    --color-mango-green-light: #50DB2D;             --cmgl: 80 219 45;
    --color-mango-green-vivid-lightest: #79F15B;    --cmgvlt: 121 241 91;
    --color-mango-green-vivid-lighter: #6CDD50;     --cmgvlr: 108 221 80;
    --color-mango-green-vivid-light: #5EC046;       --cmgvl: 94 192 70;
    --color-mango-green-vivid: #50A53B;             --cmgv: 80 165 59;
    --color-mango-green-dark: #39A020;              --cmgd: 57 160 32;
    --color-mango-light: var(--color-mango-yellow-light);                    --cml: var(--cmyl);
    --color-mango-vivid-lightest: var(--color-mango-yellow-vivid-lightest);  --cmvlt: var(--cmyvlt);
    --color-mango-vivid-lighter: var(--color-mango-yellow-vivid-lighter);    --cmvlr: var(--cmyvlr);
    --color-mango-vivid-light: var(--color-mango-yellow-vivid-light);        --cmvl: var(--cmyvl);
    --color-mango-vivid: var(--color-mango-yellow-vivid);                    --cmv: var(--cmyv);
    --color-mango-dark: var(--color-mango-yellow-dark);                      --cmd: var(--cmyd);
    --image-mango-gradate: var(--color-mango-light), var(--color-mango-dark);
    --image-mango-gradate-tp: rgb(var(--cml) / 50%), rgb(var(--cmd) / 50%);
    --image-mango-gradate-tpl: rgb(var(--cml) / 25%), rgb(var(--cmd) / 25%);
    --image-mango-gradate-tph: rgb(var(--cml) / 75%), rgb(var(--cmd) / 75%);
    --image-mango-vivid-gradate: var(--color-mango-vivid-lightest), var(--color-mango-vivid);
    --image-mango-vivid-gradate-tp: rgb(var(--cmvlt) / 50%), rgb(var(--cmv) / 50%);
    --image-mango-vivid-gradate-tpl: rgb(var(--cmvlt) / 25%), rgb(var(--cmv) / 25%);
    --image-mango-vivid-gradate-tph: rgb(var(--cmvlt) / 75%), rgb(var(--cmv) / 75%);
    --image-mango-gradient: linear-gradient(135deg, var(--image-mango-gradate));
    --image-mango-gradient-tp: linear-gradient(135deg, var(--image-mango-gradate-tp));
    --image-mango-gradient-tpl: linear-gradient(135deg, var(--image-mango-gradate-tpl));
    --image-mango-gradient-tph: linear-gradient(135deg, var(--image-mango-gradate-tph));
    --image-mango-vivid-gradient: linear-gradient(135deg, var(--image-mango-vivid-gradate));
    --image-mango-vivid-gradient-tp: linear-gradient(135deg, var(--image-mango-vivid-gradate-tp));
    --image-mango-vivid-gradient-tpl: linear-gradient(135deg, var(--image-mango-vivid-gradate-tpl));
    --image-mango-vivid-gradient-tph: linear-gradient(135deg, var(--image-mango-vivid-gradate-tph));
    --image-mango-edu-logo: url('../vactors/mango_edu.svg');

    --color-toss-blue: #0064FF; --ctb: 0 100 255;
    --color-toss-gray: #202632; --ctg: 32 38 50;
    --color-toss-active-blue: #3182F6; --ctab: 49 130 246;
    --color-toss-deactive-blue: #CADFFD; --ctdb: 202 223 253;
    --color-toss-active-gray: #F2F4F6; --ctag: 242 244 246;


    --color-point-dark: #1665D4;                        --cpd: 22 101 212;
    --color-point: var(--color-toss-active-blue);         --cp: var(--ctab);
    --color-point-light: #60A2FF;                       --cpl: 96 162 255;


    --top-pad: calc(env(safe-area-inset-top) + 0px);
    --bottom-pad: calc(env(safe-area-inset-bottom) + 0px);



    --svg-simple-checked: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 version=%271.1%27 viewBox=%270 0 18 18%27%3E%3Cpath fill=%27%233182F6%27 fill-rule=%27evenodd%27 d=%27M3.8,8.2c-.2.2-.2.4,0,.6l3.9,3.9c.2.2.4.2.6,0L17.7,3.3c.2-.2.2-.4,0-.6l-.8-.8c-.2-.2-.4-.2-.6,0l-8,8c-.2.2-.4.2-.6,0l-2.5-2.5c-.2-.2-.4-.2-.6,0l-.8.8Z%27/%3E%3C/svg%3E");
}

body {
    --common-bg-color: white;
    font-family: 'Pretendard';


    /* static color */
    --color-imported-kakao-yellow: #FEE500;     --ciky: 254 229 0;
    --color-imported-kakao-logo-black: #191600; --cik-lb: 25 22 0;
    --color-imported-kakao-text-black: #191919; --cik-tb: 25 25 25;
    
    --color-imported-naver-green: #03C75A;  --cing: 3 199 90;
    


    /* adaptive color (light/common) */
}

body[data-dark-mode="1"] {

    /* adaptive color (dark) */

}

main { font-family: 'Pretendard'; }
main button, main input, main textarea { font-family: 'Pretendard'; }

article { --article-theme-color: transparent; }

article button { padding: 1em; border-style: none; border-radius: 1em; }


/* override estreUi */
nav#mainMenu > section#menuArea ul > li > button { padding: 16px 22px; }

main > section#home > div.container[data-container-id="root"] { overflow: unset; }

main > section#home:not(:has(> div.container[data-container-id="root"] > article#app:empty)) > div.container[data-container-id="enterence"] { display: none; }
main > section#home > div.container[data-container-id="root"]:has(> article#app:empty) { display: none; }

footer#fixedBottom { transition-timing-function: ease; transition-duration: 0.3s; }
footer#fixedBottom:not(:hover) { bottom: -44px; opacity: 0; }


/* custom element styles */
article button.mango_rex { --disable-rate: 20%; --color: #222; --border-color: rgb(var(--cadm) / 20%); --bg-color: #FFF0; --apply-color: var(--color); --apply-border-color: var(--border-color); --apply-bg-color: var(--bg-color); --radius: 12px; height: 42px; padding: initial; border-style: none; border-radius: var(--radius); color: var(--apply-color); font-size: 1.125rem; }
article button.mango_rex:disabled { --apply-color: rgb(from var(--color) r g b / 50%); --apply-border-color: rgb(from var(--border-color) r g b / var(--disable-rate)); --apply-bg-color: rgb(from var(--bg-color) r g b / var(--disable-rate)); } 
article button.mango_rex:not(.bold) { --color: var(--color-grayscale-dark); border: solid 1px var(--apply-border-color); }
article button.mango_rex.bold { --color: var(--color-white); height: 44px; background-color: var(--apply-bg-color); }
article button.mango_rex.bold:disabled { --color: #888; }
article button.mango_rex.bold:not(.pointed) { --bg-color: var(--color-grayscale-darker); }
article button.mango_rex.bold.pointed { --bg-color: var(--color-point); }
article button.mango_rex > .logo_icon svg path { fill: var(--fill); transition-duration: 0.2s; }
article button.mango_rex:disabled > .logo_icon svg path { fill: rgb(from var(--fill) r g b / 50%); }

article .mango_enter_rex { --height: 46px; --pad-h: 24px; --border-color: rgb(var(--cadm) / 20%); --radius: 12px; position: relative; border: solid 1px var(--border-color); border-radius: var(--radius); cursor: text; }
article .mango_enter_rex > * { }
article .mango_enter_rex:focus-within { border-color: #000; }
article .mango_enter_rex > input { width: 100%; height: var(--height); padding-inline: var(--pad-h); border-style: none; border-radius: var(--radius); background-color: transparent; color: var(--color-text-darker); font-size: 1rem; }
article .mango_enter_rex > input::placeholder { color: #AAA; }
article .mango_enter_rex.emp_ph > input::placeholder { color: #555; }
article .mango_enter_rex > input:focus { box-shadow: none; }
article .mango_enter_rex > .condition_host { position: absolute; display: flex; flex-direction: column; flex-wrap: nowrap; top: 0; bottom: 0; right: 0; height: fit-content; margin: auto; margin-right: var(--pad-h); justify-content: center; align-items: flex-end; transition-timing-function: ease; transition-duration: 0.3s; }
article .mango_enter_rex:has(> button.right_side[data-show="1"]) > .condition_host { margin-right: var(--height); }
article .mango_enter_rex > .condition_host div { height: min-content; }
article .mango_enter_rex > .condition_host > .conditions { display: flex; flex-direction: row; flex-wrap: nowrap; width: max-content; height: fit-content; color: #999; font-size: 0.875rem; text-align: right; overflow: hidden; transform-origin: center right; transition-timing-function: ease; transition-duration: 0.5s; }
article .mango_enter_rex > .condition_host > .conditions.alert { color: #F46224; overflow: hidden; }
article .mango_enter_rex > .condition_host > .conditions[data-satisfy="1"] { height: 0; opacity: 0; }
article .mango_enter_rex > .condition_host > .conditions span { height: min-content; min-width: fit-content; text-wrap: nowrap; }
article .mango_enter_rex > .condition_host > .conditions .condition_set { display: flex; flex-direction: row; flex-wrap: nowrap; overflow: hidden; transition-timing-function: ease; transition-duration: 0.5s; }
article .mango_enter_rex > .condition_host > .conditions .condition_set:not(:last-child) > span::after { content: '\A0'; }
article .mango_enter_rex > .condition_host > .conditions .condition_set[data-satisfy="1"] { width: 0; opacity: 0; }
article .mango_enter_rex > .condition_host > .conditions .condition { overflow: hidden; transition-timing-function: ease; transition-duration: 0.5s; }
article .mango_enter_rex > .condition_host > .conditions .condition:not(:last-child) > span::after { content: '\A0'; }
article .mango_enter_rex > .condition_host > .conditions .condition[data-satisfy="1"] { width: 0; opacity: 0; }
article .mango_enter_rex > .condition_host[data-length] > .conditions:not(.alert) { text-shadow: 0 0 3px var(--common-bg-color); }
article .mango_enter_rex > .condition_host[data-length="5"] > .conditions:not(.alert) { color: #aaa094; }
article .mango_enter_rex > .condition_host[data-length="6"] > .conditions:not(.alert) { color: #b9a184; }
article .mango_enter_rex > .condition_host[data-length="7"] > .conditions:not(.alert) { color: #c49c70; }
article .mango_enter_rex > .condition_host[data-length="8"] > .conditions:not(.alert) { color: #cc9450; }
article .mango_enter_rex > .condition_host[data-length="9"] > .conditions:not(.alert) { color: #e0902f; }
article .mango_enter_rex > .condition_host[data-length="10"] > .conditions:not(.alert) { color: #F48B0E; }
article .mango_enter_rex > .condition_host[data-length="11"] > .conditions:not(.alert) { color: #f48224; font-weight: 400; scale: 1.25; rotate: -2deg; }
article .mango_enter_rex > .condition_host[data-length="12"] > .conditions:not(.alert) { color: #f47024; font-weight: 500; scale: 1.75; rotate: -6deg; }
article .mango_enter_rex > .condition_host[data-length="13"] > .conditions:not(.alert) { color: #F46224; font-weight: 600; scale: 2.3; rotate: -11deg; }
article .mango_enter_rex > .condition_host[data-length="14"] > .conditions:not(.alert) { color: #f44324; font-weight: 700; scale: 3; rotate: -15deg; }
article .mango_enter_rex > .right_side { --src: none; position: absolute; display: none; opacity: 0; height: var(--height); aspect-ratio: 1; top: 0; bottom: 0; right: 0; margin: auto; border-style: none; border-radius: var(--radius); background-color: transparent; background-image: var(--src); background-position: center; background-repeat: no-repeat; }
article .mango_enter_rex > .right_side[data-show] { display: block; }
article .mango_enter_rex > .right_side[data-show="1"] { opacity: 1; }
article .mango_enter_rex > .right_side.clear { --src: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg' style='width: 16px; height: 16px; '%3E%3Ccircle cx='8' cy='8' r='8' fill='%23CCCCCC'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.81804 4.11091L4.11094 4.81802L7.29292 8L4.11094 11.182L4.81804 11.8891L8.00002 8.70711L11.182 11.8891L11.8891 11.182L8.70713 8L11.8891 4.81802L11.182 4.11091L8.00002 7.29289L4.81804 4.11091Z' fill='white'/%3E%3C/svg%3E%0A"); }



article .line_block { border-bottom: none; border-radius: 0; }

article .bg_pointed { --bg-basic: rgb(var(--cpl) / 15%); --bg-hover: rgb(var(--cpl) / 30%); --bg-active: rgb(var(--cpl) / 60%); }


article nav.head_block { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; height: var(--appbar-height); padding-left: var(--left-pad); padding-right: var(--right-pad); justify-content: center; user-select: none; }
article nav.head_block > * { max-height: 100%; margin-top: auto; margin-bottom: auto; }
article nav.head_block > * > * { max-height: 100%; }
article nav.head_block > button { height: 100%; }
article nav.head_block > button.square { aspect-ratio: 1; }
article nav.head_block > .float_area { position: absolute; top: 0; bottom: 0; margin: 0; }
article nav.head_block > .float_area > button { height: 100%; margin: 0; font-size: 1rem; }
article nav.head_block > nav { }
article nav.head_block > nav > button { }
article nav.head_block > nav > button#mainMenuBtn { overflow: hidden; }
article nav.head_block > nav > button#mainMenuBtn dotlottie-player { --extend: 24px; --size: calc(var(--appbar-height) + (var(--extend) * 2)); width: var(--size); height: var(--size); margin: calc(var(--extend) * -1); translate: 0 3.8%; }
article nav.head_block > nav.appbarLeft { flex-direction: row; flex-wrap: nowrap; left: 0; }
article nav.head_block > nav.appbarLeft > button { }
article nav.head_block > nav.appbarLeft > button.back_nav {  }
article nav.head_block > nav.appbarLeft > button.back_nav > span { font-size: 26px; }
article nav.head_block > nav.appbarRight { flex-direction: row-reverse; flex-wrap: nowrap; right: 0; }
article nav.head_block > nav.appbarRight > button { }
article nav.head_block > button.home { }
article nav.head_block > button.home img { height: 86%; }

article nav.foot_block { height: 64px; }


article .head_box { display: flex; flex-flow: column nowrap; min-height: 160px; justify-content: center; }

article .pointed_comment { color: #0BAEAE; font-size: 16px; font-weight: 600; text-align: center; line-height: 2em; }
article .head_guide { font-size: 28px; font-weight: 600; text-align: center; }

article .input_display { --font-size: 32px; --line-height: 1.2em; position: relative; display: flex; flex-flow: row nowrap; margin: 8px 24px; font-size: var(--font-size);}
article .input_display > * { }
article .input_display > span { display: inline-block; flex-grow: 0; flex-shrink: 0; border-bottom: solid 2px var(--color-toss-blue); line-height: var(--line-height); }
article .input_display > input { width: 100%; flex-grow: 1; flex-shrink: 1; border-style: none; border-bottom: solid 2px var(--color-toss-blue); font-size: var(--font-size); line-height: var(--line-height); appearance: none; }
article .input_display > button { }
article .input_display > button > div { margin: auto 0.25em; color: #FFF; font-size: 1.5rem; }
article .input_display > button > div.circled { border-radius: 100%; background-color: #BEBEBE; height: 1em; line-height: 0.9em; translate: 0 -0.07em; }
article .input_display > button > div > span { }

article .num_keypad > button { font-size: 28px; font-weight: 600; }

article ul.blocked_list { }
article ul.blocked_list:empty:before { content: attr(data-placeholder); color: #444; text-align: center; }
article ul.blocked_list > li { position: relative; margin: 6px 24px; border-bottom-style: none; }
article ul.blocked_list > li > :is(div, button) { position: relative; display: flex; flex-flow: column nowrap; width: -webkit-fill-available; padding: 16px 24px; border-radius: 24px; background-color: var(--color-toss-active-gray); text-align: left; }
article ul.blocked_list > li > div { }
article ul.blocked_list > li > div > span {  } 
article ul.blocked_list > li > button { }
article ul.blocked_list > li > button > span {  } 
article ul.blocked_list > li .item_subject { font-size: 24px; font-weight: 500; line-height: 1.4em; }
article ul.blocked_list > li .item_details { display: flex; flex-flow: row wrap; color: #666; line-height: 1.4em; }
article ul.blocked_list > li .item_details > span { }
article ul.blocked_list > li .item_details > span:not(:last-child)::after { content: '\A0|\A0'; }



article > section > .basic > .label { width: max(240px, 75%); padding: 8px 24px 10px; border-radius: 40% 30% 50% 32px; /* border-top-left-radius: 48px; */ background-image: linear-gradient(-10deg, var(--image-mango-gradate-tph)); box-shadow: inset -25px -9px 15px 1px var(--color-mango-vivid-lightest), inset 4px 4px 12px 1px var(--color-mango-vivid), -4px -4px 4px -1px var(--color-mango-vivid); }
article > section.collapsible > button.toggle { margin-top: -1px; margin-right: 5px; border: none; }
article > section.collapsible > .basic button.toggle { margin-top: -1px; margin-right: 5px; border: none; }




/* Data related styles */
article .block_box { margin: 16px; }
article .block_box.line_block { padding: 0; }
article .block_box > * { margin: 0; }
article .block_box > *:first-child { margin-top: 0; }
article .block_box.line_block > *:not(:first-child) { margin-left: 8px; }
article .block_box:not(.line_block) > *:not(:first-child) { margin-top: 16px; }
article .block_box > *:last-child { margin-bottom: 0; }


article ul.payment_history_list {}
article ul.payment_history_list > li {}
article ul.payment_history_list > li > div {}
article ul.payment_history_list > li > div > span {}
article ul.payment_history_list > li > div > span.item_subject { display: flex; flex-flow: row wrap; margin: 2px 0 8px; justify-content: space-between; align-items: center; line-height: 1.5em; }
article ul.payment_history_list > li > div > span.item_details {}
article ul.payment_history_list > li > div span.row_index { color: #72A7F9; font-size: 20px; }
article ul.payment_history_list > li > div button.cancel_payment { --height: 42px; height: var(--height); margin: calc((var(--height) - 1em)* -0.5) 0; color: #FFF; background-color: var(--color-toss-active-blue); }


article button.attend_commit { background-color: var(--color-toss-active-blue); }
article button.attend_commit:disabled { background-color: var(--color-toss-deactive-blue); }
article button.attend_commit > span {}
article button.attend_commit:not(:disabled) > span.placeholder { display: none; }
article button.attend_commit:disabled > span:not(.placeholder) { display: none; }




/* extra preset */

.mango_edu_id_login {}
.mango_edu_id_login #login_submit { cursor: pointer; }

.mango_user_handle { }
.mango_user_handle label { min-width: fit-content; overflow: hidden; }
.mango_user_handle .sign_out { cursor: pointer; }

button.external_service { --pad-l: var(--pad-h); --pad-r: var(--pad-h); position: relative; align-items: center; text-align: center; }
button.external_service:not(.max_width) { display: flex; flex-direction: row; flex-wrap: nowrap; flex-grow: 1; justify-content: center; }
button.external_service > .logo_icon { height: 24px; aspect-ratio: 1; margin: auto 0; }
button.external_service.max_width > .logo_icon { position: absolute; top: 0; bottom: 0; left: var(--pad-l); }
button.external_service:not(.max_width) > .logo_icon { position: relative; margin-right: 8px; } 
button.external_service > .logo_icon > * { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: fit-content; height: fit-content; max-width: 100%; max-height: 100%; }
button.external_service > span { font-size: 1rem; }


/* ===== npc 재브랜딩 오버라이드 (2026-08-06, 002 설계 §5) =====
   Toss blue 축 제거 → mango 축 재배선. 위의 계승 베이스는 무수정 유지(원본 대조 용이)하고 여기서만 덮는다. */
html {
    --color-point-dark: var(--color-mango-yellow-vivid);        /* #F7B500 */
    --color-point: var(--color-mango-yellow-dark);              /* #FFB300 */
    --color-point-light: var(--color-mango-yellow-vivid-light); /* #FFCC22 */
    --color-point-deactive: #FFE7A3;
    --color-point-text: #2A2114;   /* point(옐로) 배경 위 텍스트용 다크 */
    --color-accent: var(--color-mango-green-dark);              /* 성공/확정 액센트 #39A020 */
}
/* 입력 밑줄 — Toss blue → point */
article .input_display > span,
article .input_display > input { border-bottom-color: var(--color-point); }
/* 출결 확정 버튼 — green 축(흰 글자 대비 확보) */
article button.attend_commit { background-color: var(--color-mango-green-dark); }
article button.attend_commit:disabled { background-color: rgb(var(--cmgvl) / 35%); }
/* 결제취소 버튼 — 중립 다크 */
article ul.payment_history_list > li > div button.cancel_payment { background-color: var(--color-mango-archromatic-dark); }
/* point 배경 CTA 의 글자색 (index.html 인라인에서 var(--color-point-text) 참조) */
/* fixedBottom(rootbar) 상시 표시 — tossfront 의 hover-reveal 숨김 정책(위 137행) 해제 (사용자 지시 2026-08-06) */
footer#fixedBottom:not(:hover) { bottom: 0; opacity: 1; }

/* ── MangoPOS 구성 이식 (2026-08-06, 실화면 플로우 레퍼런스 — 002 §5b) ── */
html { --color-brand: #FFD300; }   /* MangoPOS colors.xml main */

/* 앱바 — 옐로 바 + 좌 로고 + 중앙 학원명 + 우 터미널/메뉴 (MangoPOS 상단 바 동형) */
header#fixedTop { background-color: var(--color-brand); }
header#fixedTop nav#appbar > nav#appbarLeft { left: 0; display: flex; align-items: center; }
header#fixedTop .appbar_logo { padding: 0 16px; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; color: #232014; }
header#fixedTop #appbarTitle { align-self: center; font-size: 17px; font-weight: 600; color: #232014; }
header#fixedTop nav#appbar > nav#appbarRight { right: 0; display: flex; align-items: center; }
header#fixedTop #terminalBtn { padding: 0 6px; }
header#fixedTop #terminalBtn > img { height: calc(var(--appbar-height) * 0.58); }
header#fixedTop #terminalBtn:disabled { opacity: 0.45; }

/* 홈 — 서비스 선택 카드 (MangoPOS MainActivity 동형) */
article.home .service_choose_guide { margin: max(6vh, 40px) 16px 28px; text-align: center; font-size: clamp(22px, 3.4vw, 30px); font-weight: 400; word-break: keep-all; }
article.home .service_choose_guide b { font-weight: 800; }
article.home .service_cards { display: flex; flex-flow: row wrap; gap: clamp(14px, 2.5vw, 26px); justify-content: center; margin: 0 24px; }
article.home button.service_card {
    display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; gap: 12px;
    width: min(300px, 40vw); aspect-ratio: 1 / 0.92;
    border: 1px solid #E4E4EA; border-radius: 14px; background-color: #FFF;
    font-size: clamp(19px, 2.6vw, 25px); font-weight: 600; color: #232014;
    transition-duration: 0.15s;
}
article.home button.service_card:active { background-color: rgb(var(--cmyd) / 12%); border-color: var(--color-point); }
article.home button.service_card > img { width: 38%; }
/* 앱바 상시 표시에 따른 본문 상단 여백 보정 (홈·출결·납부·내역 공통) */
main#staticDoc > section.root_tab_content > .container > article { padding-top: calc(var(--appbar-height) + env(safe-area-inset-top)); }
article.home .service_choose_guide { margin-top: clamp(12px, 4vh, 44px); }

/* ── 반응형 재배치 (2026-08-06, 002 §5b — orientation 기준 = MangoPOS 동형 aspect-ratio 5/4) ── */

/* 앱바 우측 정렬 — 메뉴 버튼이 우측 «끝», 터미널 아이콘은 그 왼쪽 */
header#fixedTop nav#appbar > nav#appbarRight { left: auto; right: 0; flex-direction: row; }
header#fixedTop nav#appbarRight > #terminalBtn { order: 0; }
header#fixedTop nav#appbarRight > #mainMenuBtn { order: 1; }

/* 홈 서비스 카드 — 화면을 채우도록 성장, 세로에선 세로 스택 */
article.home { display: flex; flex-flow: column nowrap; }
article.home .service_cards { flex: 1 1 auto; min-height: 0; align-items: stretch; padding-bottom: 8px; }
article.home button.service_card { flex: 1 1 0; width: auto; max-width: none; aspect-ratio: auto; min-height: 0; }
article.home button.service_card > img { width: auto; height: clamp(56px, 28%, 150px); }
@media (min-aspect-ratio: 5/4) {
    article.home .service_cards { flex-flow: row nowrap; margin: 0 clamp(24px, 5vw, 72px); }
}
@media (max-aspect-ratio: 5/4) {
    article.home .service_cards { flex-flow: column nowrap; margin: 0 clamp(20px, 6vw, 48px); gap: 16px; }
}

/* 출결·납부 2단 본문 — 가로에서 좌측 패널(출결 기록/조회 안내) + 우측 기존 UI */
.attend_body, .paybill_body { display: flex; flex-flow: column nowrap; flex: 1 1 auto; min-height: 0; }
.attend_main_col, .paybill_main_col { display: flex; flex-flow: column nowrap; flex: 1 1 auto; min-width: 0; min-height: 0; }
.attend_main_col > *, .paybill_main_col > * { flex-shrink: 0; }
.attend_main_col > .num_keypad, .paybill_main_col > .num_keypad { flex-shrink: 1; }
.attend_log_panel, .paybill_guide_panel { display: none; }
@media (min-aspect-ratio: 5/4) {
    .attend_body, .paybill_body { flex-flow: row nowrap; gap: 18px; padding: 6px 16px 0; }
    .attend_log_panel, .paybill_guide_panel {
        display: flex; flex-flow: column nowrap; flex: 0 0 32%; min-width: 220px; max-width: 380px;
        border: 1px solid #E4E4EA; border-radius: 12px; background-color: #FBFBFD; overflow: hidden;
    }
    .attend_main_col, .paybill_main_col { flex: 1 1 0; }
}
.side_panel_title { flex-shrink: 0; padding: 12px 16px; border-bottom: 1px solid #EEEEF2; font-size: 16px; font-weight: 700; color: #232014; }
/* 출결 기록 리스트 */
.attend_log_list { flex: 1 1 auto; overflow-y: auto; margin: 0; padding: 6px 12px; list-style: none; }
.attend_log_list > li { display: flex; align-items: center; gap: 10px; padding: 9px 6px; border-bottom: 1px solid #F0F0F4; font-size: 15px; }
.attend_log_list > li > .log_name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.attend_log_list > li > .log_type { flex-shrink: 0; padding: 2px 8px; border-radius: 999px; background-color: rgb(var(--cmgd) / 12%); color: var(--color-mango-green-dark); font-size: 12.5px; font-weight: 700; }
.attend_log_list > li > .log_type[data-type="하원"], .attend_log_list > li > .log_type[data-type="퇴근"] { background-color: rgb(var(--cman) / 16%); color: var(--color-mango-archromatic-dark); }
.attend_log_list > li > .log_time { flex-shrink: 0; color: #9AA0A8; font-size: 13px; font-variant-numeric: tabular-nums; }
.attend_log_panel.empty .attend_log_list { display: none; }
.attend_log_panel:not(.empty) .attend_log_empty { display: none; }
.attend_log_empty { margin: auto; padding: 24px; color: #A6ACB4; font-size: 14.5px; text-align: center; }
/* 납부 안내 패널 */
.paybill_guide_body { display: flex; flex-flow: column nowrap; flex: 1 1 auto; padding: 14px 16px; }
.paybill_guide_body ol { margin: 0; padding-left: 22px; color: #4D5256; font-size: 14.5px; line-height: 1.9; }
.paybill_guide_placeholder { margin: auto; padding: 24px 0; color: #A6ACB4; font-size: 14.5px; text-align: center; }
article.home { padding-bottom: calc(var(--root-menu-height) + 12px); }
/* 보정 3종 (2026-08-06 사용자 지시) */
/* ① 터미널 아이콘 선명하게 — disabled 흐림 해제 (아이콘 자체 #2C2C2C) */
header#fixedTop nav#appbarRight > #terminalBtn:disabled { opacity: 1; }
/* ② 홈 카드 하단 rootbar 가림 — estreUi article.constraint 의 padding 쇼트핸드에 밀리지 않게 특이성 상향 */
main#staticDoc > section.root_tab_content > .container > article.home { padding-bottom: calc(var(--root-menu-height) + env(safe-area-inset-bottom) + 12px); }
/* ③ 하단 탭바 우측 ⋮(더보기) 버튼·스페이서 숨김 */
footer#fixedBottom nav#rootbar > button[data-tab-id="more"],
footer#fixedBottom nav#rootbar > .dummy_spacer { display: none; }
/* 결제내역 하단 집계 — rootbar 겹침 여백 (테이블화 리스타일은 S3) */
main#staticDoc > section#paymentHistory > .container > article { padding-bottom: calc(var(--root-menu-height) + env(safe-area-inset-bottom) + 8px); }
/* 출결·납부 섹션도 rootbar 가림 방지 — 하단 CTA(fixed_bottom·attend_commit)가 탭바 뒤로 들어가지 않게 (2026-08-12 캡처 검수에서 발견) */
main#staticDoc > section#attend > .container > article,
main#staticDoc > section#paybill > .container > article { padding-bottom: calc(var(--root-menu-height) + env(safe-area-inset-bottom) + 8px); }
/* .fixed_bottom 은 viewport 기준 position:fixed(estreUi.css:859) — 루트 탭 안에서는 rootbar 높이만큼 띄운다 */
main#staticDoc > section.root_tab_content article .fixed_bottom { bottom: calc(var(--root-menu-height) + env(safe-area-inset-bottom)); }
/* fixed_bottom 인라인 width:100% + padding 16px 이 content-box 로 계산돼 뷰포트를 32px 초과(우측 잘림) — border-box 로 교정 */
article .fixed_bottom { box-sizing: border-box; }

/* ── S2 터미널 EZ (MangoPOS TerminalActivity dumb 모드 이식, 002 §4) ── */
.terminal_badge { align-self: center; padding: 4px 12px; border-radius: 999px; background-color: rgb(var(--cmyd) / 14%); color: #6B5A00; font-size: 13.5px; font-weight: 700; }
.terminal_body { display: flex; flex-flow: column nowrap; flex: 1 1 auto; min-height: 0; gap: 12px; padding: 6px 16px 0; }
.terminal_side { display: flex; flex-flow: row nowrap; gap: 8px; }
.terminal_side button { flex: 1 1 0; padding: 13px 8px; border: 1px solid #E4E4EA; border-radius: 10px; background-color: #FFF; font-size: 15.5px; font-weight: 600; color: #333; }
.terminal_side button.active { border-color: var(--color-point); background-color: rgb(var(--cmyd) / 11%); color: #232014; }
.terminal_main { display: flex; flex-flow: column nowrap; gap: 10px; min-width: 0; }
.terminal_display { border: 1px solid #E4E4EA; border-radius: 12px; background-color: #FBFBFD; padding: 14px 18px; }
.terminal_amount_label { color: #8A9098; font-size: 13.5px; font-weight: 600; }
.terminal_amount { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; margin-top: 4px; padding: 8px 14px; border-radius: 8px; background-color: rgb(var(--cmyv) / 13%); font-size: clamp(30px, 4.6vw, 44px); font-weight: 800; font-variant-numeric: tabular-nums; }   /* EZ 포커스 옐로 (MangoPOS mangoYellowVividA22 동형) */
.terminal_amount .won { font-size: 0.5em; font-weight: 700; color: #6B5A00; }
.terminal_extra { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 15.5px; color: #4D5256; }
.terminal_extra small { color: #9AA0A8; }
article.terminal[data-tmode="CREDIT"] .terminal_extra.cash { display: none; }
article.terminal[data-tmode="CASH"] .terminal_extra.credit { display: none; }
#terminalInstallment { padding: 6px 10px; border: 1px solid #DDD; border-radius: 8px; font-size: 15px; }
.terminal_msg { min-height: 1.5em; margin-top: 10px; color: #C0392B; font-size: 14px; font-weight: 600; text-align: right; }
.terminal_msg.info { color: var(--color-mango-green-dark); }
.terminal_actions { display: flex; gap: 10px; }
.terminal_actions button { flex: 1 1 0; padding: 15px 8px; border-radius: 10px; font-size: 17px; font-weight: 700; }
#terminalReset { background-color: #EFEFF3; color: #444; }
#terminalPay { background-color: var(--color-point); color: var(--color-point-text); }
.terminal_keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex: 1 1 auto; min-height: 0; }
.terminal_keypad button { border: 1px solid #ECECF1; border-radius: 10px; background-color: #FFF; font-size: clamp(22px, 3vw, 30px); font-weight: 600; color: #232014; }
.terminal_keypad button:active { background-color: rgb(var(--cmyv) / 18%); }
.terminal_keypad button[data-key="BS"] { grid-column: span 3; font-size: clamp(17px, 2.2vw, 22px); color: #555; }
main#staticDoc > section#terminal > .container > article { padding-bottom: calc(var(--root-menu-height) + env(safe-area-inset-bottom) + 10px); }
@media (min-aspect-ratio: 5/4) {
    .terminal_body { flex-flow: row nowrap; gap: 16px; }
    .terminal_side { flex: 0 0 176px; flex-flow: column nowrap; }
    .terminal_side button { flex: 0 0 auto; padding: 18px 10px; }
    #terminalHistoryBtn { margin-top: auto; }
    .terminal_main { flex: 1 1 0; }
    .terminal_actions { margin-top: auto; }
    .terminal_keypad { flex: 0 0 36%; }
}
@media (max-aspect-ratio: 5/4) {
    .terminal_keypad { min-height: 40vh; }
}

/* ── S3 결제 진행 오버레이 (npcPayChannel.js — 네이티브 alert 금지 대응, 002 §5b 시퀀스) ── */
.npc_pay_stage { position: fixed; inset: 0; z-index: 9000; display: none; align-items: center; justify-content: center; background-color: rgb(0 0 0 / 62%); }
.npc_pay_stage.on { display: flex; }
.npc_pay_stage_box { min-width: min(420px, 78vw); padding: 32px 30px; border-radius: 18px; background-color: #FFF; box-shadow: 0 12px 40px rgb(0 0 0 / 28%); text-align: center; }
.npc_pay_stage_title { font-size: clamp(20px, 2.6vw, 26px); font-weight: 700; color: #232014; }
.npc_pay_stage_desc:not(:empty) { margin-top: 12px; font-size: clamp(14px, 1.8vw, 17px); color: #6B6B75; }
.npc_pay_stage_box::before { content: ""; display: block; width: 42px; height: 42px; margin: 0 auto 18px; border: 4px solid rgb(var(--cmyv) / 28%); border-top-color: var(--color-point); border-radius: 50%; animation: npc_pay_spin 0.9s linear infinite; }
@keyframes npc_pay_spin { to { transform: rotate(360deg); } }

/* ── S4 터미널 결제내역 패널 (터미널 축 전용 — pay_npcterminal_S1, 취소는 2-탭 확인) ── */
.terminal_body { position: relative; }
.terminal_history { position: absolute; inset: 0; z-index: 40; display: none; flex-flow: column nowrap; gap: 10px; padding: 14px 16px; border-radius: 12px; background-color: #FFF; box-shadow: 0 8px 30px rgb(0 0 0 / 18%); }
.terminal_history.on { display: flex; }
.th_head { display: flex; align-items: center; gap: 8px; }
.th_title { flex: 1 1 auto; font-size: 16.5px; font-weight: 700; color: #232014; }
.th_head button { padding: 8px 14px; border: 1px solid #E4E4EA; border-radius: 8px; background-color: #FFF; font-size: 14px; font-weight: 600; color: #333; }
.th_list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-flow: column nowrap; gap: 6px; }
.th_empty { padding: 26px 0; text-align: center; color: #9AA0A8; font-size: 15px; }
.th_row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #ECECF1; border-radius: 10px; background-color: #FBFBFD; font-size: 14.5px; }
.th_row.canceled { opacity: 0.55; }
.th_dt { flex: 0 0 auto; color: #6B6B75; font-variant-numeric: tabular-nums; }
.th_state { flex: 0 0 auto; font-weight: 700; color: #232014; }
.th_row.canceled .th_state { color: #C0392B; }
.th_card { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8A9098; font-size: 13px; }
.th_price { flex: 0 0 auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.th_cancel { flex: 0 0 auto; padding: 8px 13px; border: 1px solid #E5B9B4; border-radius: 8px; background-color: #FFF; color: #C0392B; font-size: 13.5px; font-weight: 700; }
.th_cancel.armed { background-color: #C0392B; border-color: #C0392B; color: #FFF; }

/* ── 기기 결제내역 오버레이 (PM/013 후속 6 — npcDeviceHistory.js) ─────────── */
.npc_devhist { position: fixed; inset: 0; z-index: 8800; display: none; flex-direction: column; background-color: #fff; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.npc_devhist.on { display: flex; }
.npc_devhist .dh_head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #e6e6ec; }
.npc_devhist .dh_head .dh_title { flex: 1 1 auto; font-size: 20px; font-weight: 600; }
.npc_devhist .dh_filters { display: flex; align-items: center; gap: 6px; padding: 8px 14px; flex-wrap: wrap; border-bottom: 1px solid #f0f0f4; }
.npc_devhist .dh_filters input[type="date"] { font-size: 15px; border: 1px solid #d7d7de; border-radius: 6px; padding: 4px 6px; }
.npc_devhist .dh_filters .dh_search { flex: 1 1 160px; min-width: 140px; font-size: 15px; border: 1px solid #d7d7de; border-radius: 6px; padding: 6px 10px; }
.npc_devhist .dh_guide { padding: 6px 14px; font-size: 13px; color: #888; }
.npc_devhist .dh_list { flex: 1 1 auto; overflow-y: auto; padding: 4px 10px 16px; }
.npc_devhist .dh_empty { padding: 28px 0; text-align: center; color: #999; }
.npc_devhist .dh_row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 6px; border-bottom: 1px dotted #ddd; font-size: 14px; }
.npc_devhist .dh_row.canceled { opacity: 0.55; }
.npc_devhist .dh_dt { color: #666; min-width: 132px; }
.npc_devhist .dh_kind { min-width: 56px; font-weight: 600; }
.npc_devhist .dh_price { min-width: 76px; text-align: right; font-weight: 600; }
.npc_devhist .dh_card { flex: 1 1 140px; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.npc_devhist .dh_state { min-width: 62px; text-align: center; font-size: 12px; color: #999; border: 1px solid #e2e2e8; border-radius: 10px; padding: 2px 8px; }
.npc_devhist .dh_state.ok { color: #26793A; border-color: #bfe0c8; background: #f0f9f2; }
.npc_devhist .dh_state.warn { color: #B3261E; border-color: #ecc7c4; background: #fdf3f2; }
.npc_devhist .dh_act button { margin-left: 4px; padding: 5px 12px; border-radius: 7px; }
.npc_devhist .dh_restore { background: #FFB300; }
.npc_devhist .dh_cancel.armed { background: #B3261E; color: #fff; }

/* ── 기기 결제내역 v2 — 상세·후보 선택 (PM/013 후속 6b) ─────────── */
.npc_devhist .dh_row { cursor: pointer; }
.npc_devhist .dh_detail { flex-basis: 100%; margin: 6px 0 0; padding: 8px; background: #f6f6f9; border-radius: 8px; font-size: 11px; line-height: 1.45; white-space: pre-wrap; word-break: break-all; color: #555; cursor: auto; }
.npc_devhist .dh_pick { flex-basis: 100%; margin: 6px 0 0; padding: 8px; background: #fff8e6; border: 1px solid #f0dfa8; border-radius: 8px; }
.npc_devhist .dh_pick_head { font-size: 13px; color: #7a6a2f; margin-bottom: 6px; }
.npc_devhist .dh_pick_item { display: block; width: 100%; text-align: left; margin: 4px 0; padding: 8px 10px; border-radius: 7px; }

/* ── 우측 상단 버튼 — 네이버 커넥트 설정 진입 버튼(단말 우상단)과 겹침 방지 (사용자 지시 2026-08-20) ── */
/* 버튼 폭(≈ 앱바 높이)의 1.5배만큼 우측 여백을 둬 커넥트 버튼 자리를 비운다 */
header#fixedTop nav#appbar > nav#appbarRight { padding-right: calc(var(--appbar-height) * 1.5); }