@font-face {
    font-family: "MTC 7 Segment";
    src: url("/assets/font/MTC 7 Segment-8bff862f9aa44bfc66f4e1d10179ad32.woff2") format("woff2"),
    url("/assets/font/MTC 7 Segment-17b3faf2609d1ffcea14d95704afc9dc.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --sand-color: #FFAA01;
    --anim-duration: 5s;
    --size: 100px;
    --thickness: 14px;
    --rim: 10px;
    --accent: #9fd3ff;
    --shock-stroke: rgba(35, 125, 255, .85);
    --shock-glow:   rgba(35, 125, 255, .45);
    --shock-fill:   rgba(35, 125, 255, .10);
}
html,body {min-height:calc(var(--vh, 1vh) * 100); height: calc(var(--vh, 1vh) * 100); overflow: hidden; background-color:#eee;}
html ::-webkit-scrollbar {width: 4px; background-color: rgba(32, 32, 32, 0.1);}
html ::-webkit-scrollbar-thumb {background-color: rgba(32, 32, 32, 0.4); border-radius: 12px;}
html ::-webkit-scrollbar-thumb:hover {background-color: rgba(32, 32, 32, 0.8);}
html ::-webkit-scrollbar:horizontal {height: 4px; background-color: rgba(32, 32, 32, 0.1);}
html ::-webkit-scrollbar-thumb:horizontal {background-color: rgba(32, 32, 32, 0.4); border-radius: 12px;}
html ::-webkit-scrollbar-thumb:horizontal:hover {background-color: rgba(32, 32, 32, 0.8);}


body {min-width:auto; min-height:auto; overflow:hidden; transform-origin: 0 0; background-color:#fff;}

.font-time {font-family: "MTC 7 Segment";}

input[type="number"] {appearance: textfield; -moz-appearance: textfield;}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}

#iframe-contents-wrap {padding:20px 0 20px 20px; height:100%; display: flex; flex-direction: column; overflow:hidden;}
#iframe-contents-wrap .iframe-save-area {margin:-20px -20px 10px; padding:10px 10px 0 20px;}
#iframe-contents-wrap .iframe-save-area {display:flex; align-items: center; justify-content: space-between;}
#iframe-contents-wrap .iframe-save-area .iframe-header {display:flex; gap:0 6px; align-items: center;}
#iframe-contents-wrap .iframe-save-area .iframe-header .iframe-header-title {color: #000; font-size: 16px; font-weight: 700; letter-spacing: -0.32px;}
#iframe-contents-wrap .iframe-save-area .iframe-header img,
#iframe-contents-wrap .iframe-save-area .iframe-header svg {width:16px; height:16px;}
#iframe-contents-wrap .iframe-save-area .iframe-header .logo-iframe-toolbox {width:50px; display:block; margin-right:10px;}
#iframe-contents-wrap .iframe-save-area .iframe-header .logo-iframe-toolbox img {width:100%;}
#iframe-contents-wrap .iframe-save-area .iframe-save-inner {height:20px; margin-left:auto; padding:0 20px; display:flex; gap:0 4px; align-items: center; justify-content: flex-end;}
#iframe-contents-wrap .iframe-save-area .iframe-save-inner .icon-tooltip-iframe {width:20px; height:20px; display:flex; align-items: center; justify-content: center;}
html.is-iframe #iframe-contents-wrap .iframe-save-area .iframe-header { display: none; }
#iframe-contents-wrap.no-right-area {padding:20px;}
#iframe-contents-wrap.no-right-area .iframe-save-inner {padding:0;}
#iframe-contents-wrap.setting-hide {padding:20px;}
#iframe-contents-wrap.setting-hide .iframe-inner-contents .iframe-left {margin-right:0;}
#iframe-contents-wrap.setting-hide .iframe-inner-contents .iframe-right {display:none;}

#iframe-contents-wrap.total-score .left-contents-inner {max-width:488px !important; min-width:488px !important;}

.iframe-inner-contents {height:100%; margin-right:-1px; display:flex; overflow:hidden; padding-top:1px;}
.iframe-inner-contents .iframe-left {min-width: 0; margin-right:40px; flex: 1 1 auto; display:flex; flex-direction: column; gap:20px 0;}
.iframe-inner-contents .iframe-left:has(.player-set-layer.active) {position:relative; border-radius:20px; overflow:hidden;}
.iframe-inner-contents .iframe-left:has(#playerSetNumberLayer.player-set-layer.active),
.iframe-inner-contents .iframe-left:has(#playerNumLayer.player-set-layer.active) {border-radius:0; overflow:visible;}
.iframe-inner-contents .iframe-left .left-contents-inner {overflow-y:auto; flex-grow: 1;}
.iframe-inner-contents .iframe-right {position:relative; max-height:100%; border-radius: 0 0 0 10px; border-width: 0px 0 1px 0px; border-style:solid; border-color:var(--mono-ddd); background: var(--mono-fa);}
.iframe-inner-contents .iframe-right .btn-aside-toggle {width:30px; height:30px; position:absolute; left:-30px; top:-1px; display:flex; align-items: center; justify-content: center; border-radius:8px 0 0 8px; background-color:#000; color:#fff;}
.iframe-inner-contents .iframe-right:has(.common-tab-btn) .btn-aside-toggle {top:0}
.iframe-inner-contents .iframe-right .iframe-right-outer {width:0px; height:100%; max-height: 100%; overflow-x:hidden; overflow-y:auto; transition: max-height .3s ease-in-out, width .3s ease-in-out;}
.iframe-inner-contents .iframe-right.active {border-width: 1px 0 1px 1px;}
.iframe-inner-contents .iframe-right.active:has(.common-tab-btn) {border-width: 0px 0 1px 1px;}
.iframe-inner-contents .iframe-right.active .iframe-right-outer {width:250px; transition: max-height .3s ease-in-out, width .3s ease-in-out;}
.iframe-inner-contents .iframe-right .iframe-right-outer .iframe-right-inner {min-width:250px; padding:10px;}
.iframe-inner-contents .iframe-right .iframe-right-outer.btn-area-show {max-height:calc(100% - 30px); transition: max-height .3s ease-in-out, width .3s ease-in-out;}
.iframe-inner-contents .iframe-right .iframe-right-outer .right-btn-area {width:100%; height:40px; padding:10px 0; overflow:hidden; position:absolute; left:0; bottom:-100%; display:flex; justify-content: center; gap:0 10px; transition:bottom .3s ease-in-out; background: var(--mono-fa); z-index: 2; border-radius:0 0 10px 10px; overflow:hidden;}
.iframe-inner-contents .iframe-right .iframe-right-outer.btn-area-show .right-btn-area {bottom:0; transition:bottom .3s ease-in-out}
.iframe-inner-contents .iframe-right .iframe-right-outer .right-btn-area .btn-right-setting-refresh {position:absolute; right:10px; top:10px;}

#iframe-contents-wrap.layerGroupMaker .iframe-inner-contents .iframe-right .iframe-right-outer.btn-area-show:has(.common-select.active) {max-height:calc(100% - 40px);}

.iframe-right-inner .common-tab-area .common-tab-btn {margin:-10px -10px 10px; position:sticky; top:0; z-index: 5;}
.iframe-right-inner .common-tab-area .common-tab-btn button {width:50%; height:30px; border-radius:0; border-width:1px 0 1px 0; line-height:28px; font-size: 12px; letter-spacing: -0.24px; }
.iframe-right-inner .common-tab-area .common-tab-btn button.active {color: var(--mono-fff); font-weight: 500;}

.right-setting-inner {}
.right-setting-inner .setting-block {display:flex; flex-direction: column; border-radius:10px; border:1px solid var(--mono-ddd); background-color:#fff;}
.right-setting-inner .setting-block + .setting-block {margin-top:10px;}
.right-setting-inner .setting-block .setting-block-head {height:30px; margin:-1px -1px 0; display:flex; justify-content: center; align-items: center; border-radius: 10px 10px 4px 4px; border: 1px solid rgba(0, 0, 0, 0.10); background: var(--mono-999);}
.right-setting-inner .setting-block .setting-block-head .setting-block-head-title {color: #FFF; font-size: 12px; font-weight: 700; line-height: 100%; letter-spacing: -0.24px;}
.right-setting-inner .setting-block .setting-block-head .setting-label-area {display:flex; justify-content: space-between;}
.right-setting-inner .setting-block .setting-block-head .setting-label-area .setting-label {display:flex; align-items: center; gap:0 5px; color: var(--mono-000); font-size: 12px; font-weight: 700; letter-spacing: -0.24px;}
.right-setting-inner .setting-block .setting-block-head .setting-label-area .setting-label::before {content:''; width:5px; height:5px; display:block; border-radius:2px; background-color:var(--tool-primary-default);}
.right-setting-inner .setting-block .setting-block-body {padding:10px; display:flex; flex-direction: column; gap:6px 0;}
.right-setting-inner .setting-block .setting-block-body .setting-label-area {display:flex; justify-content: space-between; align-items: center;}
.right-setting-inner .setting-block .setting-block-body .setting-label-area .setting-label {display:flex; align-items: center; gap:0 5px; color: var(--mono-000); font-size: 12px; font-weight: 700; letter-spacing: -0.24px;}
.right-setting-inner .setting-block .setting-block-body .setting-label-area .setting-label::before {content:''; width:5px; height:5px; display:block; border-radius:2px; background-color:var(--tool-primary-default);}

.setting-dash-line {width:100%; height:1px; margin:4px 0; display:block; border:0; border-top:1px dashed var(--mono-ddd);}
.setting-dash-line.type-999 {margin:0; border-color:var(--mono-999)}
.setting-dash-line.type-ddd {margin:0; border-color:var(--mono-ddd)}

.number-control {width:100%; display:flex; border-radius: 10px; border: 1px solid var(--mono-ddd); background: var(--mono-fff);}
.number-control .number-value-minus,
.number-control .number-value-plus {width:36px; min-width:36px; display:flex; align-items: center; justify-content: center;}
.number-control .number-value-minus:disabled,
.number-control .number-value-plus:disabled {opacity:0.1}
.number-control .number-value-minus,
.number-control .number-value-plus,
.number-control .number-value-input {height:36px;}
.number-control .number-value-minus {}
.number-control .number-value-plus {}
.number-control .number-value-input {width:100%; border:0; outline:0; text-align: center; color: var(--mono-000); font-size: 24px; letter-spacing: -0.48px;}

.setting-infor-text {padding-left:10px; position:relative; color: var(--mono-666); font-size: 10px; line-height: 16px; letter-spacing: -0.2px;}
/* .setting-infor-text::before {content:''; width:3px; height:3px; display:block; position:absolute; left:3px; top:6px; border-radius:50%; background-color:var(--mono-666);} */
.setting-infor-text strong {font-weight:700;}
.setting-infor-text + .setting-infor-text {margin-top:-6px}

.group-maker-area {display: grid; grid-template-columns: repeat(3, minmax(0, 156px)); gap: 10px; justify-content: center;}
.group-maker-area .group-maker-items {width: 100%;}
.group-maker-area .group-maker-items input {width:100%; height:30px; padding: 0px 28px; outline:0; border:0; text-align: center; line-height:30px; white-space: nowrap; text-overflow: ellipsis;}
.group-maker-area .group-maker-items .group-maker-subj {border-radius:6px; position:relative; overflow:hidden;}
.group-maker-area .group-maker-items .group-maker-subj input {font-size:12px; font-weight:700; color:#fff; letter-spacing: -0.24px;}
.group-maker-area .group-maker-items .group-maker-subj .icon-group-maker-bg {position:absolute; right:10px; top:50%; transform:translateY(-50%)}
.group-maker-area .group-maker-items .group-maker-list {margin-top:5px; overflow:hidden; border-radius:6px; border:1px solid var(--mono-ddd); }
.group-maker-area .group-maker-items .group-maker-list li {list-style:none; border-top:1px solid var(--mono-ddd)}
.group-maker-area .group-maker-items .group-maker-list li:first-child {border-top:0;}
.group-maker-area .group-maker-items .group-maker-list li input {color: #000; font-size: 12px; letter-spacing: -0.24px;}

.total-score-area {display: grid; grid-template-columns: repeat(2, minmax(0, 239px)); gap: 10px; justify-content: center;}
.total-score-area .btn-score {height:194px; border-radius:40px; box-sizing: border-box; display:flex; flex-direction: column; justify-content: center; gap:24px 0;}
.total-score-area .btn-score .point-wrap {margin-top:10px; position:relative; display:flex; flex-direction: column; gap:10px 0;}
.total-score-area.type-more .btn-score .point-wrap {top:33%}
.total-score-area .btn-score .point-wrap .point-change {position:absolute; left:50%; top:-25px; transform:translateX(-50%); color: #FFF; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.30); font-size: 32px; font-weight: 600; letter-spacing: -0.64px; line-height: 100%; opacity:0;}
.total-score-area .btn-score .point-wrap .point-change.is-animating {animation: pointChange 0.6s ease-out;}
.total-score-area.type-more[data-cols="5"] .btn-score .point-wrap .point-change {top:-35%;}
.total-score-area.type-more[data-cols="5"] .btn-score .point-wrap .point-change.is-animating {animation: pointChange-col-5 0.6s ease-out;}
.total-score-area.type-more[data-cols="3"] .btn-score .point-wrap {top:43%;}
.total-score-area.type-more[data-cols="6"] .btn-score .point-wrap {top:28%;}
.total-score-area.type-more[data-cols="7"] .btn-score .point-wrap {top:26%;}
.total-score-area.type-more[data-cols="8"] .btn-score .point-wrap {top:26%;}
.total-score-area.type-more[data-cols="6"] .btn-score .point-wrap .point-change,
.total-score-area.type-more[data-cols="7"] .btn-score .point-wrap .point-change,
.total-score-area.type-more[data-cols="8"] .btn-score .point-wrap .point-change {top:-60%;}
.total-score-area.type-more[data-cols="4"] .btn-score .point-wrap .point-change.is-animating {animation: pointChange-col-4 0.6s ease-out;}
.total-score-area.type-more[data-cols="5"] .btn-score .point-wrap .point-change.is-animating {animation: pointChange-col-5 0.6s ease-out;}
.total-score-area.type-more[data-cols="6"] .btn-score .point-wrap .point-change.is-animating {animation: pointChange-col-6 0.6s ease-out;}
.total-score-area.type-more[data-cols="7"] .btn-score .point-wrap .point-change.is-animating {animation: pointChange-col-7 0.6s ease-out;}
.total-score-area.type-more[data-cols="8"] .btn-score .point-wrap .point-change.is-animating {animation: pointChange-col-8 0.6s ease-out;}
.total-score-area .btn-score .point-wrap .current-point {color: #FFF; text-align: center; font-size: 68px; font-weight: 600; letter-spacing: -1.36px; line-height: 100%;}
.total-score-area .btn-score .group-name {max-width:85px; margin: 0 auto; display: block; color: #FFF; font-size: 16px; font-weight: 500; letter-spacing: -0.32px; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}

.total-score-area.type-more {grid-template-columns: repeat(3, minmax(0, 194px));}
.total-score-area.type-more .btn-score {border-radius:50%; gap:0; padding-top:20px; }
/*.total-score-area.type-more .btn-score .group-name {max-width:80px; min-height:48px; margin-top:15px;}  */   /* 모둠명위치 오류로 삭제 */

.setting-form {}
.setting-form .setting-fieldset {display:flex; flex-direction: column; gap:6px 0;}
.setting-form .setting-fieldset .setting-fieldset-head {height:30px; display:flex; justify-content:space-between; align-items: center;}
.setting-form .setting-fieldset .setting-fieldset-head.between {justify-content:space-between;}
.setting-form .setting-fieldset .setting-fieldset-head .setting-fieldset-title {color: #000; font-size: 12px; line-height: 100%; letter-spacing: -0.24px;}

.setting-text-field {height:30px; border-radius: 6px; outline:0; text-align: center; border: 1px solid var(--mono-ddd); background: var(--mono-fff); color: var(--mono-000); font-size: 12px; line-height: 100%; letter-spacing: -0.24px;}
.setting-text-field.w-60 {max-width:60px;}

.setting-text-form {display:flex; flex-wrap:wrap; gap:6px;}
.setting-text-form .setting-text-fieldset {width:calc(50% - 3px); display:flex; gap:4px;}
.setting-text-form .setting-text-fieldset input[type="text"],
.setting-text-form .setting-text-fieldset input[type="number"] {width:100%; height:30px; border-radius: 6px; border: 1px solid var(--mono-ddd); background: var(--mono-fff); color: var(--mono-000); text-align: center; font-size: 12px; line-height:30px; letter-spacing: -0.24px; }
.setting-text-form .setting-text-fieldset button {width:30px; min-width:30px; height:30px; border-radius:6px; display:flex; align-items: center; justify-content: center;}
.setting-text-form.type-time-input {gap:0 10px;}
.setting-text-form.type-time-input .setting-text-fieldset {display:flex; flex:1; gap:0 6px; align-items: center;}
.setting-text-form.type-time-input .setting-text-fieldset .time-text {color: #000; font-size: 12px; letter-spacing: -0.24px;}

.ranking-view-area {padding:20px 20px 0;}
.ranking-view-area .rank-area-head {display:flex; padding-bottom:10px; align-items: flex-end; gap:0 10px;}
.ranking-view-area .rank-area-head .rank-head-left {height:46px; position:relative; flex:1; border-radius: 20px 20px 10px 10px; background: var(--tool-primary-light); box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.10);}
.ranking-view-area .rank-area-head .rank-head-left .rank-top-text {position:absolute; left:50%; top:-22px; transform:translateX(-50%)}
.ranking-view-area .rank-area-head .rank-head-left .rank-top-name {padding-top:18px; color: var(--mono-fff); text-align: center; font-size: 16px; font-weight: 500; letter-spacing: -0.32px;}
.ranking-view-area .rank-area-head .rank-head-right {}
.ranking-view-area .rank-body {margin:0 -10px; padding:0 10px;}
.ranking-view-area .rank-view-list {max-height: 235px; padding: 0 10px 0; margin: 0 -10px 0; overflow-y: auto;}
.ranking-view-area .rank-view-list li {margin-bottom:6px; padding-bottom:6px; display:flex; align-items: center; list-style:none; border-bottom:1px dashed var(--mono-eee);}
.ranking-view-area .rank-view-list li:last-child {margin-bottom:0;}
.ranking-view-area .rank-view-list li .rank-icon {width:30px; text-align: center;}
.ranking-view-area .rank-view-list li .rank-icon img {}
.ranking-view-area .rank-view-list li .rank-icon .rank-round-box {width:20px; height:20px; margin:0 auto; border-radius: 4px 8px; background: var(--mono-eee); display:flex; align-items: center; justify-content: center; color: var(--mono-666); font-size: 10px; font-weight: 600; letter-spacing: -0.2px;}
.ranking-view-area .rank-view-list li .rank-text-wrap {height:20px; padding:0 10px; display:flex; align-items: center; flex:1;}
.ranking-view-area .rank-view-list li .rank-text-wrap .rank-group-name {color: #000; font-size: 11px; letter-spacing: -0.22px;}
.ranking-view-area .rank-view-list li .rank-text-wrap .rank-point {margin-left:auto; color: var(--tool-primary-light); font-size: 12px; font-weight: 600; letter-spacing: -0.24px;}
.ranking-view-area .rank-view-list li.highlight {padding-bottom:0; border-bottom:0;}
.ranking-view-area .rank-view-list li.highlight:first-child {margin-top:0;}
.ranking-view-area .rank-view-list li.highlight .rank-icon {}
.ranking-view-area .rank-view-list li.highlight .rank-text-wrap {height:30px; padding:0 12px; border-radius: 4px 10px; border: 1px solid #FEC300;}
.ranking-view-area .rank-view-list li.highlight .rank-text-wrap .rank-group-name {font-size: 12px; font-weight: 500; letter-spacing: -0.24px;}
.ranking-view-area .rank-view-list li.highlight .rank-text-wrap .rank-point {color: var(--tool-primary-light); font-size: 14px; font-weight: 600; letter-spacing: -0.28px;}

@keyframes pointChange {
    0% {opacity: 0; top: -25px;}
    50% {opacity: 1; top: -35px;}
    100% {opacity: 0; top: -40px;}
}

@keyframes pointChange-col-4 {
    0% {opacity: 0; top: -25%;}
    50% {opacity: 1; top: -45%;}
    100% {opacity: 0; top: -50%;}
}

@keyframes pointChange-col-5 {
    0% {opacity: 0; top: -35%;}
    50% {opacity: 1; top: -45%;}
    100% {opacity: 0; top: -65%;}
}

@keyframes pointChange-col-6 {
    0% {opacity: 0; top: -40%;}
    50% {opacity: 1; top: -65%;}
    100% {opacity: 0; top: -70%;}
}

@keyframes pointChange-col-7 {
    0% {opacity: 0; top: -45%;}
    50% {opacity: 1; top: -60%;}
    100% {opacity: 0; top: -65%;}
}

@keyframes pointChange-col-8 {
    0% {opacity: 0; top: -55%;}
    50% {opacity: 1; top: -70%;}
    100% {opacity: 0; top: -75%;}
}

@keyframes pointChange1 {
    0% {
        opacity: 0;
        top: -15px;
    }
    50% {
        opacity: 1;
        top: -20px;
    }
    100% {
        opacity: 0;
        top: -20px;
    }
}

/* 아날로그 시계 */
.analog-clock-container {display: flex; flex-direction: column; align-items: center; gap:15px 0;}
.analog-clock-container #date-display {color: var(--mono-222); text-align: center; font-family: Outfit; font-size: 36px; font-weight: 600; line-height: 50px; letter-spacing: -0.72px;}
.analog-clock-container #date-display span {color: var(--mono-222); text-align: center; font-size: 32px; font-weight: 400; line-height: 50px; letter-spacing: -0.64px;}
.analog-clock-container #analog-clock {width: 300px; height: 300px; border-radius: 50%; position: relative; overflow: hidden; background:url(/assets/images/svg/clock_bg-b0c8a06752a91c2ec2ea497fbd085129.svg) center center no-repeat;}
.analog-clock-container .clock-arrow {position: absolute; bottom: 50%; left: 50%; transform-origin: bottom center; border-radius: 50px 50px 0 0; z-index: 10;}
.analog-clock-container .hour-arrow {width: 6px; height: 22%; background-color: #000; margin-left:-3px; z-index: 11;}
.analog-clock-container .min-arrow {width: 4px; height: 33%; background-color: #000; margin-left:-2px; z-index: 12;}
.analog-clock-container .sec-arrow {width: 2px; height: 32%; background-color: #FFBB00; margin-left: -1px; z-index: 13; border-radius: 4px;}
.analog-clock-container .center-dot {position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; background-color: #000; border-radius: 50%; transform: translate(-50%, -50%); z-index: 14;}
.analog-clock-container .center-dot::before {content:''; width:4px; height:4px; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background-color:#fff; border-radius:50%;}
.analog-clock-container #digital-clock {margin-top:-10px; display:flex; align-items: center; gap:0 10px; color: var(--mono-222); text-align: center; font-size: 64px; font-style: normal; font-weight: 400; line-height: 50px; letter-spacing: 2px;}
.analog-clock-container #digital-clock span {margin-top:14px; color: var(--mono-222); text-align: center; font-family: "Noto Sans KR"; font-size: 36px; font-weight: 400; letter-spacing: -0.72px;}

/* 스탑워치 */
.stop-watch-area {height:100%; display:flex; justify-content: center;}
.stop-watch-area .stop-watch-time {width:450px; display:flex; color: var(--mono-222); text-align: center; font-size: 130px; font-weight: 400; line-height:0.5; letter-spacing: 2px;}

/* 디지털 타이머 */
.time-set-btns {display:flex; flex-wrap:wrap; gap:6px;}
.time-set-btns .common-btn {flex:1;}
.time-set-btns .common-btn.c-neutral-line:hover,
.time-set-btns .common-btn.c-neutral-line:focus {color: var(--mono-666); border-color: var(--mono-666); background-color:#fff;}
.time-set-btns .common-btn.c-neutral-line:active {color:#fff; border: 1px solid var(--tool-primary-default); background: var(--tool-primary-default);}

.digital-timer-area {height:100%; display:flex; align-items: center; justify-content: center;}
.digital-timer-area .digital-timer-num {height:100%; color: var(--mono-222); font-size: 164px; font-weight: 400; letter-spacing: 2px;}

/* 아날로그 / 파이 타이머 */
.analog-timer-area {}
.analog-timer-area .analog-timer-inner {width: 240px; height: 240px; margin:0 auto; border-radius: 50%; position: relative; overflow: hidden; background:url(/assets/images/svg/timer_analog_bg-c3ec275c9fbeb2716edcdd4677376662.svg) center center no-repeat;}
.analog-timer-area.pie-timer .analog-timer-inner {background-image:url(/assets/images/svg/timer_pie_bg-e211d7df88149538f62bcb5910cee78f.svg)}
.analog-timer-area.pie-timer .analog-timer-inner::before {content:''; width:100%; height:100%; display:block; background:url(/assets/images/svg/timer-pie-layer-32c7981bca5bc086275cb605f1e4627d.svg) center center no-repeat; position:absolute; z-index:1;}
.analog-timer-area .analog-timer-inner .clock-arrow {position: absolute; bottom: 50%; left: 50%; transform-origin: bottom center; border-radius: 50px 50px 0 0; z-index: 10;}
.analog-timer-area .analog-timer-inner .clock-arrow.sec-arrow {width: 4px; height: 80px; background-color:var(--tool-secondary-default); margin-left: -2px; z-index: 13; border-radius: 4px;}
.analog-timer-area .analog-timer-inner .center-dot {position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; background-color:var(--tool-secondary-default); border-radius: 50%; transform: translate(-50%, -50%); z-index: 14;}
.analog-timer-area .font-time {color: var(--mono-222); text-align: center; font-size: 48px; font-weight: 400; letter-spacing: 2px; line-height:1.2}
.analog-timer-area.pie-timer .timer-progress {width: 75%; height: 75%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); aspect-ratio: 1 / 1; pointer-events: none;}
.analog-timer-area.pie-timer .timer-progress-svg {width: 100%; height: 100%; display: block;}
.analog-timer-area.pie-timer .timer-progress-fill{fill: #FFE44A;}

/* 붗꽃 타이머 */
.candle-container {position: relative; width: 240px; height: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;}
.candle-container .candle {position: relative; width: 45px; height: 155px; background: url(/assets/images/svg/candle_body-c1de38d582d4c719474e0b345bd4cb27.svg) center bottom no-repeat;}
.candle-container .candle::before {content: ""; position: absolute; top: -20px; left: 50%; width: 49px; padding:0 5px; height: 50px; transform: translateX(-50%); background: url(/assets/images/svg/candle_top-24acfcd6f7dca5abf2d96c86e28cbb51.svg) center top no-repeat; z-index: 3;}
.candle-container .candle .flame {position: absolute; bottom: calc(100% + 8px); left: 50%; width: 30px; height: 48px; transform: translateX(-50%); z-index: 4; pointer-events: none;}
.candle-container .candle .flame-svg {width: 100%; height: 100%; padding-top:2px; backface-visibility: hidden; overflow: initial;}
.candle-container .candle .flame-g {transform-origin: 50% 100%; transform-box: fill-box; animation: flameFlicker 0.9s infinite alternate ease-in-out;}
.candle-container .candle .flame.is-off .flame-g {animation: none;}
.candle-container .candle .flame.is-off {animation: flameOut 0.35s ease-out forwards;}
.candle-container .candle .smoke-svg {position: absolute; bottom: calc(100% + 6px); left: 50%; width: 40px; height: 60px; transform: translateX(-50%); z-index: 5; pointer-events: none;}
.candle-container .candle .smoke-svg .puff {fill: rgba(200, 200, 200, 0.6); transform-box: fill-box; transform-origin: center; opacity: 0; animation: puffRise 2s ease-out forwards; animation-delay: var(--delay, 0s);}
.candle-container .font-time {color: var(--mono-222); text-align: center; font-size: 48px; font-weight: 400; letter-spacing: 2px;}
.candle-container .candle.is-burnt {width:54px; filter: brightness(0.9) saturate(0.8);}
@keyframes flameFlicker {
    0%   { transform: translateX(-0.5px) rotate(-2deg) scale(1.00) scaleY(1.02); opacity: 1; }
    45%  { transform: translateX( 0.7px) rotate( 2deg) scale(1.06) scaleY(0.98); opacity: 0.95; }
    100% { transform: translateX(-0.2px) rotate( 1deg) scale(1.02) scaleY(1.00); opacity: 1; }
}
@keyframes flameOut {
    0%   { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) scale(0.15) translateY(10px); }
}
@keyframes puffRise {
    0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
    12%  { opacity: 0.55; }
    100% { opacity: 0; transform: translate(var(--dx, 0px), -80px) scale(1.6); }
}

/* 모래시계 타이머 */
.hourglass-timer-area {height:100%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.hourglass-timer-area .hourglass {width: 166px; height: 240px; position: relative; overflow:hidden; background-color:#FFF6E5;}
.hourglass-timer-area .hourglass::before{content:''; width:166px; height:240px; display:block; position:absolute; left:0; top:0; background:url(/assets/images/svg/hourglass-timer-bg-7717f9bf1b38ec18810accd364f82eb4.svg) 0 0 no-repeat; z-index:10}
.hourglass-timer-area .hourglass .frame {position: absolute; width: 166px; height: 240px; border-radius: 6px; border-top: 10px solid var(--sand-color); border-bottom: 10px solid var(--sand-color);}
.hourglass-timer-area #sand-canvas {position: absolute; left: 50%; top: 105px; transform: translateX(-50%); width: 6px; height: 100px; pointer-events: none; z-index: 3;}
.hourglass-timer-area .hourglass .top {position: absolute; top:20px; left: 50%; transform: translateX(-50%); width: 160px; height: 86px; overflow: hidden; z-index: 1;}
.hourglass-timer-area .hourglass .top::before {content: ''; position: absolute; width: 160px; height: 86px; background: var(--sand-color); transform: translateY(0);}
.hourglass-timer-area .hourglass .bottom {position: absolute; left: 50%; top: 112px; transform: translateX(-50%); width: 160px; height: 88px; overflow:hidden; z-index: 1;}
.hourglass-timer-area .hourglass .bottom::before {content: ''; position: absolute; left: 50%; width: 160px; height: 88px; background: var(--sand-color); border-radius: 50% 50% 0 0; transform: translate(-50%, 100%);}
.hourglass-timer-area .hourglass .bottom .glass {position: absolute; top: -85px; left: -15px; width: 190px; height: 190px; transform: rotate(-270deg); opacity: 0.35; z-index: 2;}
.hourglass-timer-area .font-time {color: var(--mono-222); text-align: center; font-size: 48px; font-weight: 400; letter-spacing: 2px; line-height:50px;}
/* 상단 모래 가상 요소 */
.hourglass-timer-area .hourglass .top::before {content: ''; position: absolute; width: 160px; height: 86px; background: var(--sand-color); transform: translateY(var(--top-y, 0%)); transition: transform 0.5s linear;}
/* 하단 모래 가상 요소 */
.hourglass-timer-area .hourglass .bottom::before {content: ''; position: absolute; left: 50%; width: 160px; height: 88px; background: var(--sand-color); border-radius: 50% 50% 0 0; transform: translate(-50%, var(--bottom-y, 100%)); transition: transform 0.5s linear;}

.hourglass.is-reset .top::before {transform: translate(-50%, 0%) !important; animation: none !important;}
.hourglass.is-reset .bottom::before, .hourglass.is-reset .bottom .glass::before {transform: translate(-50%, 100%) !important; animation: none !important;}
.hourglass .top::before, .hourglass .bottom::before {transition: transform 0.3s ease-in-out;}

@keyframes Sand-Falling {
    0% {transform: translateY(0);}
    100% {transform: translateY(100%);}
}

@keyframes Sand-Filling {
    0% {transform: translate(-50%, 100%);}
    100% {border-radius: 50% 50% 0 0; transform: translate(-50%, 0);}
}

/* 달성 점수판 */
.progress-score-board-area {}

.progress-score-board-head {}
.progress-score-board-head .progress-top-point {width:100%; display:flex;}
.progress-score-board-head .progress-top-point .progress-label,
.progress-score-board-head .progress-top-point .progress-point {width:100px; height:36px; text-align: center;}
.progress-score-board-head .progress-top-point .progress-label {border-radius: 6px 0 0 6px; background: #8A5C1E; color: #FFF; font-size: 14px; font-weight: 700; letter-spacing: -0.28px; line-height:38px;}
.progress-score-board-head .progress-top-point .progress-point {color: var(--mono-000); font-size: 24px; letter-spacing: -0.48px; border-radius: 0 6px 6px 0; border: 1px solid var(--mono-ddd); background: var(--mono-fff); line-height:34px;}

.progress-score-board-body {margin-top:20px; position:relative;}
.progress-score-board-inner {max-height:396px; overflow-y:auto; position:relative;}
.progress-score-board-body .progress-score-item {height:99px; padding-left:20px; display:flex; gap:0 10px; position:relative; background-color:#F2E4D1; border-top:2px solid #fff;}
.progress-score-board-body .progress-score-item:first-child {border-radius:10px 10px 0 0; border-top:0;}
.progress-score-board-body .progress-score-item:last-child {border-radius:0 0 10px 10px;}
.progress-score-board-body .progress-score-item::before {content:''; width:2px; height:100%; display:block; position:absolute; left:240px; top:0; background-color:#fff; z-index: 1;}
.progress-score-board-body .progress-score-item::after{content:''; width:20px; height:100%; display:block; position:absolute; right:30px; top:0; background:url(/assets/images/svg/bg-progress-line-967fb59541e65ca06c70f254c4b8c281.svg) 0 0 repeat-y; z-index: 2; pointer-events: none;}

.progress-left {width:163px; min-width:163px; display:flex; align-items: center; justify-content: center; flex-direction: column; gap:5px;}
.progress-left .progress-group-name {color: var(--mono-000); font-size: 18px; font-weight: 700; letter-spacing: -0.36px; line-height:18px;}

.progress-get-point {width:130px; height:50px; padding:9px 8px; display:flex; align-items: center; gap:4px; border-radius: 10px; border: 1px solid var(--mono-ddd); background: var(--mono-fff);}
.progress-get-point .btn-get-point {width:18px; height:100%; position:relative; display:flex; align-items: center; justify-content: center; border-radius: 4px; background: var(--mono-eee);}
.progress-get-point .btn-get-point .get-point {position:absolute; left:50%; top:-15px; transform:translateX(-50%); color: var(--mono-000); text-align: center; font-size: 14px; font-weight: 600; letter-spacing: -0.28px; opacity:0;}
.progress-get-point .btn-get-point .get-point.is-animating {animation: pointChange1 0.6s ease-out;}
.progress-get-point .progress-current-point {flex:1; color: var(--mono-000); text-align: center; font-size: 24px; font-weight: 400; letter-spacing: -0.48px; line-height:29px;}
.progress-line {width:100%; flex:1; display:flex; align-items: center; padding-left:40px;}
.progress-line .progress-line-inner {position:relative; transition:width ease-out .3s;}
.progress-line .progress-line-inner .player-box {min-width:46px; position:absolute; right:0; top:50%; transform:translateY(-50%); z-index:3;}
.progress-complete-animation-layer {width:100%; height:100%; position:absolute; left:0; top:0; background-color:rgba(0,0,0,0.5); z-index: 5; border-radius:10px; overflow:hidden; display:none; opacity:0;}
.progress-complete-animation-layer .progress-complete-animation-inner {width:503px; height:380px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index: 10;}
.progress-complete-animation-layer .front-animation-box {width:158px; height:162px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; opacity:0;}
.progress-complete-animation-layer .back-animation-box {width:100%; height:100%; position:absolute; left:0; top:0; z-index:1; opacity:0;}

/* 메모 */
.tools-memo-area {height:100%; overflow:hidden;}
.tools-memo-area .memo-textarea {height:100%;}
.tools-memo-area .memo-textarea textarea {width:100%; height:100%; max-height: calc(100% - 62px); padding-right:20px; border:0; background-color:transparent; resize: none; font-size:14px;}
.tools-memo-area .memo-textarea textarea.text-bold {font-weight:700;}
.tools-memo-area .memo-textarea textarea.text-italic {font-style:italic}
.tools-memo-area .memo-textarea textarea.text-underline {text-decoration: underline;}
.tools-memo-area .memo-textarea textarea.text-line-through {text-decoration:line-through;}
.tools-memo-area .memo-textarea textarea.text-underline.text-line-through {text-decoration: underline line-through;}
.tools-memo-area .memo-textarea textarea.text-align-left {text-align: left;}
.tools-memo-area .memo-textarea textarea.text-align-center {text-align: center;}
.tools-memo-area .memo-textarea textarea.text-align-right {text-align:right;}
.tools-memo-area.fold .memo-textarea textarea {max-height:100%; overflow-y: auto;}
.tools-memo-area .memo-textarea textarea:focus {outline:0;}
.tools-memo-area .memo-textarea textarea::placeholder {color: #000;}
.tools-memo-area .memo-tools-area {width:calc(100% - 40px); height:50px; padding:10px; display:flex; justify-content: space-between; align-items: center; gap:9px; position:absolute; left:20px; bottom:20px; border-radius: 10px; border: 1px solid var(--tool-glass-effect-white-border, rgba(255, 255, 255, 0.70)); background: rgba(255, 255, 255, 0.50); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10); transition:bottom ease-in-out .3s;}
.tools-memo-area.fold .memo-tools-area {bottom:-100px; transition:bottom ease-in-out .3s;}
.tools-memo-area .memo-line-vertical {width:1px; min-width:1px; height:30px; display:block; border:0; background-color:rgba(0,0,0,0.15)}
.tools-memo-area .memo-tools-btn-area {display:flex; align-items: center; gap:6px}
.tools-memo-area .tools-toggle-groups {display:flex; align-items: center; gap:6px}

.btn-memo-tool {width:24px; height:24px; border-radius: 4px; border: 1px solid transparent; display:flex; align-items: center; justify-content: center; color:#999;}
.btn-memo-tool svg {color:inherit;}
.btn-memo-tool:hover {color:var(--tool-primary-default);}
.btn-memo-tool.active {border-color:var(--tool-primary-default); background: #FFF; color:var(--tool-primary-default);}

.btn-color-change {width:20px; height:20px; position:relative; border-width:1px; border-style:solid; border-color:rgba(0, 0, 0, 0.10); border-radius:50%;}
.btn-color-change:hover,
.btn-color-change.active {border-color:#000;}
.btn-color-change.active::before {content: ''; width: 10px; height:8px; display: block; position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); background: url(/assets/images/svg/icon-memo-color-selected-50198e4405a4898057248408358239e6.svg) center center no-repeat;}

.btn-color-change.color1 {background-color:#FFF8E2}
.btn-color-change.color2 {background-color:#DBF0FF}
.btn-color-change.color3 {background-color:#EBF5E2}
.btn-color-change.color4 {background-color:#FFEEEE}

.btn-memo-tools-fold,
.btn-memo-tools-unfold {width:30px; min-width:30px; height:30px; display:flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid rgba(102, 102, 102, 0.50); background: rgba(102, 102, 102, 0.25); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10); backdrop-filter: blur(7.5px); }
.btn-memo-tools-unfold {position:absolute; right:10px; top:-100px; opacity:0; transition:opacity ease-in-out .1s;}
.btn-memo-tools-unfold.show {opacity:1; transition:opacity ease-in-out .3s;}
.btn-memo-tools-fold svg {transform:rotate(-90deg)}
.btn-memo-tools-unfold svg {transform:rotate(90deg)}

.coin-flip-area {height:100%; display:flex; flex-direction: column; overflow:hidden;}
.coin-flip-area .coin-flip-inner {height:100%;}

.coin-flip-area .coin-flip-result {width:57px; height:24px; margin:0 auto; display:inline-flex; align-items: center; justify-content: center; background-color:#FFF5BF; border-radius: 12px; color: var(--mono-000); font-size: 12px; font-weight: 500; letter-spacing: -0.24px; line-height:24px;}

.coin-flip-area .coin-info-row {visibility: hidden;}
.coin-flip-area .coin-info-row.show {visibility: visible;}
.coin-flip-area .coin-info-row .counts {max-width:278px; margin:0 auto; display:flex; gap:0 10px;}
.coin-flip-area .coin-info-row .counts .counts-items {display:flex; flex:1; align-items: center; border-radius: 12px; border: 1px solid var(--mono-ddd); overflow:hidden; }
.coin-flip-area .coin-info-row .counts .counts-items .counts-items-label {min-width:60px; height:24px; text-align: center; background-color:var(--mono-ddd); border-radius:0 12px 12px 0; color: #000; font-size: 10px; font-weight: 400; letter-spacing: -0.2px; line-height:25px;}
.coin-flip-area .coin-info-row .counts .counts-items .counts-items-value {flex:1; text-align: center; color: #000; font-size: 12px; font-weight: 400; letter-spacing: -0.24px;}
.coin-flip-area .scene{position:relative; width:100%; height:100%; }
.coin-flip-area .coin{position:absolute; left:50%; top:50%; width:var(--size); height:var(--size); transform-style:preserve-3d; transform: translate(-50%,-50%) scale(1) rotateX(10deg) rotateY(0deg); z-index: 1;}
.coin-flip-area .face {position:absolute; inset:0; display:grid; place-items:center; border-radius:50%; transform-style:preserve-3d; width:var(--size); height:var(--size); background:url(/assets/images/svg/coin-500-front-d075915f41289328f3610f6388aee0f4.svg) center center no-repeat; backface-visibility: hidden; }
.coin-flip-area .coin.coin-10 .face {background-image:url(/assets/images/svg/coin-10-front-6d7506733100dfb6aa0e775c85b36d06.svg)}
.coin-flip-area .coin.coin-50 .face {background-image:url(/assets/images/svg/coin-50-front-62b5bb69a4f9e93857579a3fb3026bd3.svg)}
.coin-flip-area .coin.coin-100 .face {background-image:url(/assets/images/svg/coin-100-front-578150efda9dfe78a39a62945f58ef78.svg)}

.coin-flip-area .back{background:url(/assets/images/svg/coin-500-back-bf5654f16cb22bead6b833f3d6921d09.svg) center center no-repeat; transform:translateZ(0px); transform: rotateY(180deg) translateZ(calc(var(--thickness) / 2));}
.coin-flip-area .coin.coin-10 .back {background-image:url(/assets/images/svg/coin-10-back-91f0142b773b9fc61477072931e23030.svg)}
.coin-flip-area .coin.coin-50 .back {background-image:url(/assets/images/svg/coin-50-back-bc78170c15f114433a2c4f4b491dfd6b.svg)}
.coin-flip-area .coin.coin-100 .back {background-image:url(/assets/images/svg/coin-100-back-dd55d054641bb000257c1f6d02b2c398.svg)}
.coin-flip-area .middle {position:absolute; top:0;}
.coin-flip-area .middle:nth-child(1){ transform: translateZ(-6px); }
.coin-flip-area .middle:nth-child(2){ transform: translateZ(-4px); }
.coin-flip-area .middle:nth-child(3){ transform: translateZ(-2px); }
.coin-flip-area .middle:nth-child(4){ transform: translateZ(0px); }
.coin-flip-area .middle:nth-child(5){ transform: translateZ(2px); }
.coin-flip-area .middle:nth-child(6){ transform: translateZ(4px); }
.coin-flip-area .middle:nth-child(7){ transform: translateZ(6px); }
.coin-flip-area .front{position:absolute; top:0; transform:translateZ(14px); transform: translateZ(calc(var(--thickness) / 2));}
/* 2D / 3D 모드 */
.coin-flip-area .coin.design-2d .middle{ display:none; }
/* 그림자 */
.coin-flip-area .shadow{position:absolute; left:50%; top:50%; width:var(--size); height:var(--size); transform: translate(-50%,-50%) scale(1); border-radius:50%; background: radial-gradient(50% 50% at 50% 50%, #000000b0 0%, transparent 70%); opacity:.34; pointer-events:none; will-change:transform,opacity;}
.coin-flip-area .shockwave {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none; width:1px; height:1px; }
.coin-flip-area .ring{position:absolute; left:50%; top:50%; width: calc(var(--size)*0.9); height: calc(var(--size)*0.9); transform: translate(-50%,-50%) scale(0.3); border-radius:50%; border: 3px solid var(--shock-stroke); background: radial-gradient(circle, var(--shock-fill) 0%, transparent 65%); box-shadow:0 0 26px var(--shock-glow), 0 0 10px rgba(0,0,0,.18), inset 0 0 12px rgba(255,255,255,.25); opacity:0; }
.coin-flip-area .ring2{ width: calc(var(--size)*0.65); height: calc(var(--size)*0.65); }
@keyframes boom{
    0%   { transform: translate(-50%,-50%) scale(0.3); opacity:0; }
    18%  { opacity:1; }     /* 기존 0.75 -> 1 */
    100% { transform: translate(-50%,-50%) scale(1.7); opacity:0; }
}
.coin-flip-area .ring.go{ animation: boom 560ms cubic-bezier(.11,.7,0,1) both; }
.coin-flip-area .ring2.go{ animation-delay:80ms; }
/* 바운스 */
@keyframes bounceCoin {
    0% { transform: var(--t0); }
    45%{ transform: var(--t1); }
    100%{ transform: var(--t0); }
}
@keyframes bounceShadow {
    0% { transform: var(--s0); opacity: var(--o0); }
    45%{ transform: var(--s1); opacity: calc(var(--o0) + .08); }
    100%{ transform: var(--s0); opacity: var(--o0); }
}
.coin-flip-area .coin.bounce{ animation: bounceCoin 400ms cubic-bezier(.25,.8,.25,1); }
.coin-flip-area .shadow.bounce{ animation: bounceShadow 400ms cubic-bezier(.25,.8,.25,1); }

.radio-group-box {display:flex;}
.radio-group-box .radio-group-item {flex:1; margin-right:-1px;}
.radio-group-box .radio-group-item:has(input[type="radio"]:disabled) {opacity:0.5}
.radio-group-box .radio-group-item:has(input[type="radio"]:disabled) input[type="radio"] + label {cursor:not-allowed}
.radio-group-box .radio-group-item input[type="radio"] {display:none;}
.radio-group-box .radio-group-item input[type="radio"] + label {height:30px; display:flex; align-items: center; justify-content: center; cursor:pointer; color: var(--mono-666); font-size: 12px; font-weight: 400; letter-spacing: -0.24px; border: 1px solid var(--mono-ddd)}
.radio-group-box .radio-group-item:first-child input[type="radio"] + label {border-radius:6px 0 0 6px;}
.radio-group-box .radio-group-item:last-child input[type="radio"] + label {border-radius: 0 6px 6px 0;}
.radio-group-box .radio-group-item input[type="radio"]:checked + label {color:#fff; border-color: var(--tool-primary-default); background: var(--tool-primary-default);}

/* 주사위 */
.dice-app {height:100%;}
.dice-app .play-area {height:100%; flex:auto; display:flex; align-items: center; flex-direction: column;}
.dice-app .dice-wrapper {display: flex; flex:auto; gap: 30px; justify-content: center; align-items: center; min-height: 120px;}
.dice-app .dice {position: relative; width: 90px; height: 90px; transform-style: preserve-3d;}
.dice-app .play-area .result {min-width: 40px; height: 24px; padding:0 10px; margin: 0 auto; display: inline-flex; align-items: center; justify-content: center; background-color: #FFF5BF; border-radius: 12px; color: var(--mono-000); font-size: 12px; font-weight: 500; letter-spacing: -0.24px; line-height: 24px;}
@keyframes rolling {
    50% {transform: rotateX(455deg) rotateY(455deg);}
}

.dice-app .face {position: absolute; width: 100%; height: 100%; border-radius: 20px; border: 3px solid var(--mono-ccc); transform-style: preserve-3d; background: var(--mono-fff); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 9px;}
.dice-app .face::before {position: absolute; content: ''; inset: 0; border-radius: 18px; background: var(--mono-fff); transform: translateZ(-1px);}
.dice-app .pip {align-self: center; justify-self: center; width: 14px; height: 14px; border-radius: 50%; background: #131210; z-index: 1; display: flex; align-items: center; justify-content: center; font-size: 14px;}
.dice-app .pos-1 { grid-area: 1 / 1; }
.dice-app .pos-2 { grid-area: 1 / 2; }
.dice-app .pos-3 { grid-area: 1 / 3; }
.dice-app .pos-4 { grid-area: 2 / 1; }
.dice-app .pos-5 { grid-area: 2 / 2; }
.dice-app .pos-6 { grid-area: 2 / 3; }
.dice-app .pos-7 { grid-area: 3 / 1; }
.dice-app .pos-8 { grid-area: 3 / 2; }
.dice-app .pos-9 { grid-area: 3 / 3; }

.dice-app .face-label {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #000; font-size: 40px; font-weight: 700; letter-spacing: -0.8px; opacity: 0; pointer-events: none; }
.dice-app .front  { transform: translateZ(45px); }
.dice-app .back   { transform: rotateX(180deg) translateZ(45px); }
.dice-app .top    { transform: rotateX(90deg) translateZ(45px); }
.dice-app .bottom { transform: rotateX(-90deg) translateZ(45px); }
.dice-app .right  { transform: rotateY(90deg) translateZ(45px); }
.dice-app .left   { transform: rotateY(-90deg) translateZ(45px); }

.dice-app[data-theme="basic"] .pip {background: #131210; border-radius: 50%;}
.dice-app[data-theme="number"] .pip {display: none;}
.dice-app[data-theme="number"] .face-label {opacity: 1;}
.dice-app[data-theme="animal"] .pip,
.dice-app[data-theme="fruit"] .pip { background: none; width: 20px; height: 20px; border-radius:0;}
.dice-app[data-theme="animal"] .face .pip,
.dice-app[data-theme="fruit"] .face .pip {background-position:center center; background-repeat:no-repeat;}
/* 1 */
.dice-app[data-theme="animal"] .face.front .pip {background-image:url(/assets/images/svg/icon-dice-1-bird-b9ab67868833757cf295aa8880530fbc.svg)}
/* 2 */
.dice-app[data-theme="animal"] .face.top .pip {background-image:url(/assets/images/svg/icon-dice-2-pig-3833be08cf3839671ff12fd3be42e75b.svg)}
/* 3 */
.dice-app[data-theme="animal"] .face.right .pip {background-image:url(/assets/images/svg/icon-dice-3-monkey-8c1423966712d3a307d29d621b80b858.svg)}
/* 4 */
.dice-app[data-theme="animal"] .face.left .pip {background-image:url(/assets/images/svg/icon-dice-4-cat-0f7413934d0e4c9f5c194ec25fd44227.svg)}
/* 5 */
.dice-app[data-theme="animal"] .face.bottom .pip {background-image:url(/assets/images/svg/icon-dice-5-frog-b5b377946fa07565db2c9a9e4764d623.svg)}
/* 6 */
.dice-app[data-theme="animal"] .face.back .pip {background-image:url(/assets/images/svg/icon-dice-6-bear-748dfa573f14a45b034874ada8f52144.svg)}

/* 1 */
.dice-app[data-theme="fruit"] .face.front .pip {background-image:url(/assets/images/svg/icon-dice-1-cherries-cc05d7f6f902be0f8296d81c86440dbd.svg)}
/* 2 */
.dice-app[data-theme="fruit"] .face.top .pip {background-image:url(/assets/images/svg/icon-dice-2-kiwi-7fbe8702d9e30fd04761599afe997981.svg)}
/* 3 */
.dice-app[data-theme="fruit"] .face.right .pip {background-image:url(/assets/images/svg/icon-dice-3-red-apple-e98ce0699d386beea794f2f2ead8c17f.svg)}
/* 4 */
.dice-app[data-theme="fruit"] .face.left .pip {background-image:url(/assets/images/svg/icon-dice-4-watermelon-48ece9b8d57551f8548202ad71f726de.svg)}
/* 5 */
.dice-app[data-theme="fruit"] .face.bottom .pip {background-image:url(/assets/images/svg/icon-dice-5-lemon-02d7d2252ea9774473d51e9b82c55804.svg)}
/* 6 */
.dice-app[data-theme="fruit"] .face.back .pip {background-image:url(/assets/images/svg/icon-dice-6-tangerine-6d0992e7f2e1fae28936b837df1c7f23.svg)}

.dice-app[data-theme="animal"] .face-label,
.dice-app[data-theme="fruit"]  .face-label {
    display: none;
}

/* 사다리타기 */
.canvas-area {height:100%; position:relative; overflow:hidden; border-radius:20px; border: 1px solid var(--mono-ddd);}
.canvas-area .canvas-inner {height:100%; overflow-x:auto; position:relative; overflow-y:hidden;}
.canvas-area .canvas-inner:has(.player-set-layer.active) {overflow-x:hidden;}
.canvas-area #ladderRail {height: 100%; position: relative; margin:0 auto;}
.canvas-area #ladderCanvas {width:100%; height:100%; aspect-ratio: inherit;}
.player-set-layer {width:100%; height:100%; display:none; position:absolute; left:0; top:0; z-index:1;}
.player-set-layer.active {display:flex; align-items: center; justify-content: center;}
.player-set-layer::before {content:''; width:100%; height:100%; display: block; position:absolute; left:0; top:0; background: rgba(0, 0, 0, 0.70); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10); backdrop-filter: blur(7.5px); z-index: -1;}

.set-layer-inner {padding:25px; display:flex; flex-direction: column; gap:10px 0; border-radius: 10px; background:#fff;}
.set-layer-inner .number-control {max-width:210px;}
.set-layer-inner .common-select,
.set-layer-inner .common-select-button {width:100%;}
.set-layer-inner .set-layer-title {color: var(--mono-000); text-align: center; font-size: 16px; font-weight: 700; letter-spacing: -0.32px;}
.set-layer-inner .set-layer-title.players-number {display:flex; align-items: center; gap:0 10px;}
.set-layer-inner .set-layer-title .players-total {height:20px; padding:0 6px; display:flex; align-items: center; color: var(--mono-fff); font-size: 14px; font-weight: 400; letter-spacing: -0.28px; border-radius: 10px; background: var(--tool-primary-default);}
.set-layer-inner .set-layer-title .players-total strong {color: var(--mono-fff); font-size: 14px; font-weight: 700;}
.set-layer-inner .set-layer-desc {color: var(--mono-999 ); text-align: center; font-size: 10px; letter-spacing: -0.2px;}
.set-layer-inner .set-layer-desc2 {color: var(--mono-999); font-size: 12px; letter-spacing: -0.24px;}
.set-layer-inner .players-textarea {width:200px; height:200px; border-radius: 5px; background: var(--mono-fff); overflow-y:hidden; overflow-x:hidden; border: 1px solid var(--mono-ddd);}
.set-layer-inner .players-textarea textarea {width:100%; height:100%; padding:10px; border:0; outline:0; color: #000; font-size: 14px; line-height: 20px; letter-spacing: -0.28px; resize: none;}
.set-layer-inner .players-btns {display:flex; align-items: center; gap:0 10px; justify-content: center;}

.result-value-list-area {padding:10px 0; display:flex; flex-direction: column; border-radius: 6px; border: 1px solid var(--mono-ddd); background: var(--mono-fa);}
.result-value-list-area .result-value-head {display:flex; margin-bottom:6px;}
.result-value-list-area .result-value-head .result-label {flex:1; color: #000; text-align: center; font-size: 12px; font-weight: 500; letter-spacing: -0.24px;}

.result-value-list-area .result-value-scroll {max-height:182px; padding:0 10px; overflow-y:auto; overflow-x:hidden; display:flex; gap:0 6px;}
.result-value-list-area .result-value-scroll > .result-label-list,
.result-value-list-area .result-value-scroll > .result-value-list {flex: 0 0 50%; width: 50%; min-width: 0;}
.result-value-list-area .result-label-list {display:flex; flex-direction: column; gap:6px 0; margin:0; padding:0; list-style:none; flex:1;}
.result-value-list-area .result-value-list {max-height:none; padding:0; overflow:visible; display:flex; flex-direction: column; gap:6px 0; margin:0; list-style:none; flex:1;}
.result-value-list-area .result-label-list > li,
.result-value-list-area .result-value-list > li {display:flex;}
.result-value-list-area .result-value-box {min-height:30px; border-radius: 5px; border: 1px solid rgba(0, 0, 0, 0.10); background: var(--tool-neutral-default); text-align: center; line-height:29px; color: #000; font-size: 12px; letter-spacing: -0.24px;}
.result-value-list-area .result-label-list .result-value-label {padding:0 6px; flex:1; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.result-value-list-area .result-value-input {flex:1; min-width:0; border: 1px solid var(--mono-666); background: #FFF; outline:0; color:#666; white-space: nowrap; text-overflow:ellipsis; cursor:grab;}
.result-value-list-area .result-value-input:active {cursor:grabbing}
.result-value-list-area .common-btn {max-width: max-content; margin: 10px auto 0;}
.is-highlight {outline:1px dashed #000;}

#ladderTop, #ladderBottom {width: 100%; position: absolute; left: 0; height: 40px; display: block;}
#ladderTop { top: 20px; }
#ladderBottom { bottom: 20px; }
#ladderCanvas {display: block; width: 100%; height: 100%; min-height: 300px;}
#ladderTop button,
#ladderBottom button {width: 80px; height: 40px; padding: 0 9px; border-radius:6px;}
#ladderTop button span,
#ladderBottom button span {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; white-space: normal; overflow-wrap: anywhere; font-size: 12px; line-height: 1.2; letter-spacing: -0.24px;}
#ladderTop button span { color: #fff; }
#ladderBottom button { border: 1px solid #ddd; background: #fff; position:relative;}
#ladderBottom button span {color: #000;}
#ladderBottom button.show-tooltip::before {content:attr(data-result-name); max-width:84px; height:32px; padding:0 10px; display:block; line-height:31px; position:absolute; left:50%; top:-28px; transform:translateX(-50%); border-radius: 5px; background: rgba(0, 0, 0, 0.70); color: var(--mono-fff); font-size: 12px; font-weight: 400; letter-spacing: -0.24px; white-space: nowrap; text-overflow: ellipsis; overflow:hidden;}
#ladderBottom button.show-tooltip::after {content:''; width: 8px; height: 6px; display: inline-block; position:absolute; left:50%; top:4px; transform:translateX(-50%); background: none; border: none; clip-path: polygon(50% 100%, 0 0, 100% 0); background-color: rgba(0, 0, 0, 0.70); }

.select-result-area {max-height:268px; overflow-y:auto; overflow-x:hidden;}
.select-result-area .select-result-list {padding:20px 20px 0; list-style:none;}
.select-result-area .select-result-list li {position:relative; display:flex; justify-content: space-between; align-items: center;}
.select-result-area .select-result-list li::before {content:''; width:100%; height:1px; display:block; position:absolute; left:0; top:50%; transform:translateY(-50%); border-top:1px dashed var(--mono-ccc); z-index:-1}
.select-result-area .select-result-list li + li {margin-top:10px;}
.select-result-area .select-result-list li > p {width:145px; height:40px; padding:0 9px; line-height:39px; border-radius:6px; text-align: center; font-size: 14px; font-weight: 400; letter-spacing: -0.28px; overflow:hidden; white-space:nowrap; text-overflow: ellipsis;}
.select-result-area .select-result-list li .select-result-name {color: var(--mono-fff);}
.select-result-area .select-result-list li .select-result-value {color: var(--mono-000); border: 1px solid var(--mono-ccc); background: var(--mono-fff);}

/* 캡슐 뽑기 */
.gacha-machine-area {height:100%; overflow: hidden; position: relative; }
.gacha-machine-area:has(#playerSetNumberLayer.player-set-layer.active) { border-radius: 20px; }

.gacha-machine-area .gacha-machine { width: 300px; height: 340px; text-align: center; position: relative; margin: 0 auto; }
.gacha-machine-area .machine-container { position: relative; display: inline-block; width: 620px; height: 340px; max-width: 100%; }

.gacha-machine-area .mask {position: absolute; top: -150px; left: 50%; transform: translateX(-50%); width: 400px; height: 200px; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; z-index: 1000;}
.gacha-machine-area .mask.show { opacity: 1; }
.gacha-machine-area .mask svg { width: 100%; height: 100%; }

.gacha-machine-area .winner {position: absolute; top: 50%; left: 35%; transform: translate(-50%, -50%); font-size: 72px; font-weight: bold; color: #333333; z-index: 10;}

.gacha-machine-area .gachapon { position: relative; width: 100%; height: 100%; }
.gacha-machine-area .machine { width: 100%; height: 100%; }

#capsulesGroup .capsule-item {cursor: pointer; transition: transform 0.3s ease; transform-origin: center;}
#capsulesGroup .capsule-item:hover { transform: scale(1.05); }

#capsulesGroup.shaking .capsule-item { animation: capsuleShake 0.8s ease-in-out; }
#capsulesGroup.shaking .capsule-item:nth-child(1) { animation-delay: 0s; }
#capsulesGroup.shaking .capsule-item:nth-child(2) { animation-delay: 0.05s; }
#capsulesGroup.shaking .capsule-item:nth-child(3) { animation-delay: 0.1s; }
#capsulesGroup.shaking .capsule-item:nth-child(4) { animation-delay: 0.15s; }
#capsulesGroup.shaking .capsule-item:nth-child(5) { animation-delay: 0.08s; }
#capsulesGroup.shaking .capsule-item:nth-child(6) { animation-delay: 0.12s; }
#capsulesGroup.shaking .capsule-item:nth-child(7) { animation-delay: 0.06s; }
#capsulesGroup.shaking .capsule-item:nth-child(8) { animation-delay: 0.14s; }
#capsulesGroup.shaking .capsule-item:nth-child(9) { animation-delay: 0.09s; }
#capsulesGroup.shaking .capsule-item:nth-child(10) { animation-delay: 0.11s; }
#capsulesGroup.shaking .capsule-item:nth-child(11) { animation-delay: 0.07s; }
#capsulesGroup.shaking .capsule-item:nth-child(12) { animation-delay: 0.13s; }
#capsulesGroup.shaking .capsule-item:nth-child(13) { animation-delay: 0.04s; }
#capsulesGroup.shaking .capsule-item:nth-child(14) { animation-delay: 0.10s; }

@keyframes capsuleShake {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-3px, -3px); }
    20% { transform: translate(3px, 2px); }
    30% { transform: translate(-2px, 3px); }
    40% { transform: translate(2px, -2px); }
    50% { transform: translate(-3px, 2px); }
    60% { transform: translate(3px, -3px); }
    70% { transform: translate(-2px, 2px); }
    80% { transform: translate(2px, -1px); }
    90% { transform: translate(-1px, 1px); }
}

.gacha-machine-area .start-button {position: absolute; bottom: 55px; left: 128px; border-radius: 18px; border: 2px solid #000; transition: transform 0.2s;}
.gacha-machine-area .start-button:active {transform:scale(0.95);}
.gacha-machine-area .start-button span {height: 30px; padding: 0 6px; display: flex; align-items: center; justify-content: center; border-radius: 15px; border: 3px solid #FFF; background: #FFE44A; color: #000; font-size: 14px; font-weight: 700; letter-spacing: -0.28px;}

.result-exclude-btns {max-height:146px; display:flex; flex-wrap:wrap; gap:6px;}
.result-exclude-btns button {max-width:84px; padding:0 9px; border-radius: 5px; border: 1px solid var(--mono-666); background: #FFF; color: var(--mono-666); font-size: 12px; font-weight: 400; letter-spacing: -0.24px; white-space: nowrap; text-overflow: ellipsis; overflow:hidden; line-height:29px; }
.result-exclude-btns button {max-width:84px; padding:0 9px; border-radius: 5px; border: 1px solid var(--mono-666); background: #FFF; color: var(--mono-666); font-size: 12px; font-weight: 400; letter-spacing: -0.24px; white-space: nowrap; text-overflow: ellipsis; overflow:hidden; line-height:29px; cursor:grab;}
.result-exclude-btns button.active {border-radius: 5px; border: 1px solid var(--tool-primary-default); background: var(--tool-primary-default); color:#fff;}
.result-exclude-btns button:active {cursor:grabbing}
.random-result-area {width:260px; height:180px; margin:20px auto 0; display:flex; align-items: center; justify-content: center; background:url(/assets/images/svg/bg-capsule-e699a24431270b551379538504d54189.svg) center center no-repeat; background-size:cover;}
.random-result-area .random-result-text {max-width:88%; text-align:center; color: #000; font-size: 42px; font-weight: 700; letter-spacing: -0.84px; white-space: nowrap; text-overflow: ellipsis; overflow:hidden;}
.random-result-top {padding:20px 20px 0; display:flex; justify-content: space-between; gap:0 10px;}
.random-result-top p {height:30px; display:flex; align-items: center; justify-content: center; flex:1; border-radius: 10px 10px 4px 4px; border: 1px solid rgba(0, 0, 0, 0.10); background: var(--mono-999); color: var(--mono-fff); font-size: 12px; font-weight: 400; letter-spacing: -0.24px;}
.random-result-body {}
.random-result-list {max-height:160px; padding:0 20px; list-style:none; overflow-y:auto; overflow-x:hidden;}
.random-result-list li {margin-top:10px; display:flex; justify-content: space-between; gap:0 10px;}
.random-result-list li p {min-width: 0; height:30px; padding:0 9px; display:block; flex:1; border-radius: 5px; border: 1px solid rgba(0, 0, 0, 0.10); color: #000; text-align: center; font-size: 12px; font-weight: 400; letter-spacing: -0.24px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; line-height:29px;}
.random-result-list li .select-result-name {background: var(--tool-neutral-default);}
.random-result-list li .select-result-value {}

.roulette-area {position: relative; overflow: hidden; height:100%;}
.roulette-area:has(#playerNumLayer.player-set-layer.active) {border-radius: 20px; overflow: hidden;}
.roulette-area #wheelContainer {position: relative; width:320px; height:320px; margin: 20px auto 0;}
.roulette-area #pointer {position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 20px; height: 30px; background: url(/assets/images/svg/icon-roulette-pin-d701a0b4f491b51fc8dbce2e4f6215bb.svg) 0 0 no-repeat; z-index:1;}
.roulette-area #wheel {position: absolute; inset: 0; margin: auto; width:320px; height:320px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; transition: transform 3.5s cubic-bezier(0.25, 0.1, 0.25, 1); }
.roulette-area #wheel .wheel-separators {position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.roulette-area #wheel .wlabel {min-width:64px; text-align: center; position: absolute; left: 50%; top: 50%; user-select: none; pointer-events: none; color: var(--mono-000); font-size: 11px; font-weight: 700; letter-spacing: -0.24px; padding:1px 3px; border-radius: 2px; border: 1px solid var(--mono-ccc); background: var(--mono-fff);}
.roulette-area #wheel.no-input .wlabel {padding:0; border-radius:0; padding:0; border:0; background-color:transparent; }
.roulette-area #wheel.len-30 .wlabel {font-size:10px}
.roulette-area #wheel.len-40 .wlabel {min-width:56px; font-size:9px; line-height:1;}
.roulette-area #wheel.len-50 .wlabel {min-width:51px; font-size:8px; line-height:1;}
.roulette-area #wheel.len-60 .wlabel {min-width:45px; font-size:7px; line-height:1;}
.roulette-area #wheel.no-input.len-30 .wlabel {font-size:11px}
.roulette-area #wheel.no-input.len-40 .wlabel {font-size:10px;}
.roulette-area #wheel.no-input.len-50 .wlabel {font-size:9px;}
.roulette-area #wheel.no-input.len-60 .wlabel {font-size:8px;}
.roulette-area #wheel .wlabel {z-index: 1;}
.roulette-area .start-btn {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 62px; height: 62px; background: url(/assets/images/svg/btn-roulette-start-a9b5e7732b55b1c968a0265001dfaac3.svg) center center no-repeat; transition: transform ease-in-out 0.3s; color: var(--mono-fff); text-align: center; font-size: 13px; font-weight: 700; letter-spacing: -0.26px;}
.roulette-area .start-btn:active {transform: translate(-50%, -50%) scale(0.95);}
.roulette-area .start-btn:disabled {cursor: not-allowed;}
/*#numberGrid button.active {background: #666; color: #fff; border-color: #666;}*/

/* 주의집중 */
html:has(body.is-attention) {height:100vh; /*background: linear-gradient(180deg,rgba(255, 247, 237, 1) 75%, rgba(253, 237, 237, 1) 25%); background-repeat:no-repeat; background-position:center center; background-size: cover; */}
body.is-attention #iframe-contents-wrap {padding:20px 0 0 0;}
body.is-attention #iframe-contents-wrap .iframe-inner-contents {margin-right:0;}
body.is-attention #iframe-contents-wrap .iframe-inner-contents .left-contents-inner {display:flex;}
body.is-attention #iframe-contents-wrap .iframe-left {margin-right:0;}

.attention-area {position:relative; flex-grow: 1;}
.attention-area::before {content:''; width:100%; height:100%; display:block; position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); background:url(/assets/images/common/bg-attention-8ab09b570978fcd9ac59dc4bdf431855.png) center 0 repeat-x; background-size:cover; z-index:-1}
.attention-area .btn-attention-area {width:100%; padding-top:20px; display:flex; gap:0 20px; justify-content: center;}
.attention-area .btn-attention-area .btn-attention {width:135px; height:120px; background-repeat:no-repeat; background-position:center;}
.attention-area .btn-attention-area .btn-attention.type-01 {background-image:url(/assets/images/svg/ico-fan-01-f0e7470d39abd2bcb63bca97a62a4e3a.svg)}
.attention-area .btn-attention-area .btn-attention.type-02 {background-image:url(/assets/images/svg/ico-fan-02-52037e9a7436d462f7d0fe6b84b50d14.svg)}
.attention-area .btn-attention-area .btn-attention.type-03 {background-image:url(/assets/images/svg/ico-fan-03-30a76fd578b690bb6305208f132a3550.svg)}
.attention-area .btn-attention-area .btn-attention.type-01.active {background-image:url(/assets/images/svg/ico-fan-01-active-09e00682e5b82e6c40dfaf6e53169e33.svg)}
.attention-area .btn-attention-area .btn-attention.type-02.active {background-image:url(/assets/images/svg/ico-fan-02-active-8a3ab488e0d612c8395570d49e3f2200.svg)}
.attention-area .btn-attention-area .btn-attention.type-03.active {background-image:url(/assets/images/svg/ico-fan-03-active-0751db077011655a5aef4e0726689cec.svg)}

.attention-contents {}
.attention-contents .btn-sound-area {position:absolute; right:20px; top:0px;}
.attention-contents .btn-sound-area .btn-sound {display: flex; width: 32px; height: 32px; padding: 7px; justify-content: center; align-items: center; border-radius: 17px; border: 2px solid var(--tool-primary-light); background:url(/assets/images/svg/icon-audio-mute-95e01f2cbc0c5e45cdf36f55c45f4de0.svg) var(--mono-fff) center center no-repeat; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.10); }
.attention-contents .btn-sound-area .btn-sound.active {background-image:url(/assets/images/svg/icon-audio-active-474f88a1d2c38ec97b5be3d599a9c8a8.svg); background-color:var(--tool-primary-light);}

.attention-contents .attention-box {display:none;}
.attention-contents .attention-box.active {display:block;}

.attention-contents .attention-character {position:absolute; left:50%; bottom:80px; transform:translateX(-50%); background-color:transparent; opacity:1;}
.attention-contents .attention-character img {vertical-align: top; opacity:1;}
.attention-contents .attention-character.is-animation {}
.attention-contents .attention-character.is-animation img {width:558px;}
.attention-contents .attention-character.is-animation .image-a {display:block}
.attention-contents .attention-character.is-animation .image-b {display:none}

.attention-contents .attention-text {display: flex; justify-content: center;}
.attention-contents .attention-text img {width:558px;}

[data-tippy-root].is-login {display:none !important;}

#target-layer-03.common-tool-layer {}