/* 주아체 구글 폰트 */
/* @import url('https://fonts.googleapis.com/css2?family=Jua&display=swap'); */

/* 고운돋움 구글 폰트 */
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');

/* ChivoMono 구글 폰트 (스코어보드용) */
@import url('https://fonts.googleapis.com/css2?family=Chivo+Mono:wght@600&display=swap');


* {
    /* 주아체 */
    /* font-family: 'Jua', sans-serif; */

    /* 고운돋움 */
    font-family: 'Gowun Dodum', sans-serif;

    /* padding/border를 width에 포함해 100% 열이 가로로 넘치지 않게 */
    box-sizing: border-box;
}

body {
    color: white;
    overflow: hidden;
    /* overflow-y: scroll; */
    margin: 0;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

/* 2열(.left/.right)만 flex로 배치.
   body를 flex로 만들면 오버레이의 display:inherit가 flex로 바뀌어 깨지므로
   래퍼에만 적용한다. fixed 오버레이는 흐름 밖이라 영향 없음. */
.stage {
    display: flex;
    width: 100%;
}

::-webkit-scrollbar {
    display: none;
}

ion-icon {
    pointer-events: none;
}




/* Slowhide, Hide Effect */
.slowhide {
    opacity: 0;
    transition: 40s all;
    text-decoration: line-through;
}

.hidden {
    display: none;
}



/* Half Line */
.left {
    flex: 0 0 50%;
    width: 50%; 
    height: 100vh;
    height: 100dvh; /* 모바일 주소창 포함 뷰포트 대신 실제 보이는 높이 */
    text-align: center;
    margin: 0;
    position: relative;
}



.right {
    flex: 0 0 50%;
    width: 50%; 
    height: 100vh;
    height: 100dvh;
    margin: 0;
    overflow: hidden;
    /* 입력창 + 목록을 세로로 쌓고, 목록이 남은 높이를 채우게 */
    display: flex;
    flex-direction: column;
}


/* Information */
.info {
    text-align: left;
}

.info button {
    opacity: 20%;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    margin-top: 0.5vw;
    margin-left: 0.5vw;
    margin-right: 0;
    line-height: 0%;
    font-size: 2vw;
    width: 2vw;
    color: white;
    background-color: transparent;
    border: none;
    padding: 0;
}


/* PWA Install */
#install {
    width: auto;
    border: 2px solid #ffffff99;
    border-radius: 8px;
    padding: 3px 15px;
    background-color: black;
    color: white;
    font-size: 0.8em;
    opacity: 80%;
}


/* Background Wallpaper */
.bglist {
    margin-bottom: 3vh;
}

.bglist > button {
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    color: white;
    background-color: transparent;
    cursor: pointer;
    opacity: 30%;
    border: 0;
    outline: none;
}

.bglist span {
    pointer-events: none;
}

.bgButton {
    font-size: 1vw;

}

.bgShuffle {
    font-size: 1.5vw !important;
    opacity: 100% !important;
}


/* Weather : disabled */
.weather {
    font-size: 1.2vw;
    line-height: 1em;
}

.weather button {
    background-color: transparent;
    border: none;
    color: white;
}


/* Date, Week */
.calen {
    text-align: center;
}

.calen h3 {
    line-height: 100%;
    font-size: 2vw;
    text-align: center;
    opacity: 50%;
    margin: 0;
    cursor: pointer;
}


/* Digital Clock */
.clock {
    width: 100%;
    padding: 0;
    text-align: center;
    margin-top: 2vh;
    margin-right: 10vw;
    cursor: pointer;
    user-select: none;
}

/* h1 기본 마진(em 기준)이 12vw 글자와 함께 세로를 잡아먹지 않게 리셋 */
#clock {
    margin: 0;
}

.hourmin {
    margin-left: 5vw;
    line-height: 100%;
    letter-spacing: 0.1ch;
    /* 가로만 보고 커지지 않게 세로(vh)로도 상한을 건다 */
    font-size: min(12vw, 20vh);
}

.second {
    display: inline-block;
    width: 8vw;
    line-height: 100%;
    font-size: min(6vw, 10vh);
    text-align: left;
    opacity: 30%;
    margin: 0;
}



/* Greeting */
.greeting {
    text-align: center;
    display: inline-block;
}

.greeting h3 {
    font-size: 3vw;
    margin: 0;
}

.greeting h4 {
    font-size: 2.5vw;
    opacity: 50%;
    margin: 0;
}

.greeting button {
    font-size: 2vw;
    background-color: transparent;
    color: white;
    opacity: 20%;
    border: none;
    cursor: pointer;
}


/* What is your name */
.login-form {
    text-align: center;
}

.login-form > input {
    width: 70%;
    font-size: 2vw;
}

.login-name {
    margin: 0 auto;
    border: none;
    outline: none;
    border-bottom: 2px solid white;
    padding: 10px;
    font-size: 3vw;
    color: white;
    text-align: center;
    background-color: transparent;
}

.login-name::placeholder {
    color: gray;
}

.login-submit {
    border: none;
    outline: none;
    font-size: 3vw;
    color: white;
    text-align: center;
    padding: 10px;
    background-color: transparent;
}


/* Left bottom objects */
.leftbottom {
    position: absolute;
    width: 100%;
    bottom: 2vmin;
    overflow: hidden;
}



.quote {
    padding: 0;
    text-align: center;
    bottom: 2vmax;
}

.quote p {
    font-size: 1.5vw;
    line-height: 1.2;
    letter-spacing: -0.1vw;
}

.quote span {
    font-size: 1vw;
}

/* 빌드 버전 : 왼쪽 맨 아래 작은 글씨 */
.version {
    position: absolute;
    left: 1vw;
    bottom: 1vh;
    font-size: 0.8vw;
    color: white;
    opacity: 20%;
    pointer-events: none;
}


/* To Do List */
.todo-top{
    width: 100%;
    display: inline-block;
}

.todo {
    width: 100%;
    /* 형제(입력창) 높이를 뺀 나머지를 채워 낮은 창에서도 넘치지 않게 */
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.todo-input {
    width: 100%;
    border: none;
    border-bottom: 2px solid white;
    padding: 10px;
    font-size: 2vw;
    outline: none;
    background-color: transparent;
    color: white;
}

.todo-input::placeholder {
    color: silver;
}

.todo-list li {
    font-size: 2vw;
    font-weight: bold;
    border-bottom: 1px solid #909090;
    padding: 1vw 0.5vw 1vw 3vw;
    list-style: none;
    word-break: break-all;
    word-wrap: break-word;
    text-indent: -3vw;
    text-decoration-color: #00000077;
    text-decoration-thickness: 0.35vw;
}

.todo-list button {
    text-align: center;
    vertical-align: middle;
    background-color: transparent;
    border: 0.2vw solid #ffffff99;
    border-radius: 0.5vw;
    font-size: 3vw;
    color: lime;
    width: 2vw;
    height: 2vw;
    margin-right: 1vw;
    margin-bottom: 0.5vw;
    cursor: pointer;
    position: relative;
}

.todo-list button span {
    position: absolute;
    transform: translate(-40%, -50%);
}


/* Fullscreen mode */
.screen {
    padding: 5px;
    position: fixed;
    right: 0px;
    bottom: 0px;
}

.screen button {
    color: white;
    font-size: 2.5vw;
    line-height: 0%;
    text-align: center;
    vertical-align: middle;
    border: none;
    background: transparent;
    opacity: 50%;
    cursor: pointer;
    outline: none;
}



/* Tool Belt */
.toolbelt {
    width: 100%;
    overflow: hidden;
    padding: 1vh 0;
    text-align: center;
}

.toolbelt button {
    display: inline-block;
    height: 4vw;
    width: 4vw;
    border: 0px solid white;
    border-radius: 50%;
    background-color: transparent;
    font-size: 2vw;
    color: white;
    cursor: pointer;
    line-height: 80%;
    opacity: 50%;
}


/* Analog Clock */
.analogclock {
    position: relative;
    /* 정사각 유지 + 세로가 짧아도 넘치지 않게 두 축 중 작은 값 */
    width: min(33vw, 70vh);
    height: min(33vw, 70vh);
    margin: 0 auto;
    border: 0.3vw solid silver;
    /* border: none; */
    background-color: transparent;
    border-radius: 50%;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center left;
    background-size: cover;
    opacity: 100%;
}

.anhrs,
.anmin,
.ansec {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    transform-origin: bottom;
}

.anhrs {
    width: 4%;
    height: 30%;
    transform-origin: 50% 85%;
    border: 0.25vw solid white; /* em 고정폭 대신 시계와 함께 스케일 */
    background-color: transparent;
    border-radius: 1vw;
}

.anmin {
    width: 3%;
    height: 50%;
    background-color: white;
    transform-origin: 50% 85%;
    border-radius: 1vw;
    opacity: 80%
}

.ansec {
    width: 1%;
    height: 55%;
    background-color: red;
    transform-origin: 50% 85%;
    border-radius: 1vw;
}

.anpin {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 1.5%;
    height: 1.5%;
    margin: auto;
    border: 0.25vw solid red;
    border-radius: 50%;
    background-color: black;
}



/* Tool 1 - Timer */
.timer-modal {
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
    display: none;
}

/* Music Player Modal */
.music-modal {
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000000;
    opacity: 80%;
    display: none;
}

.music-close {
    position: absolute;
    z-index: 10;
    right: 2vw;
    top: 2vw;
}

.music-close button {
    color: white;
    border: 0;
    background-color: transparent;
    font-size: 4vw;
    cursor: pointer;
}

.music-close button:hover {
    color: #44ff44;
}

.music-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
}

.music-iframe-container {
    width: 100%;
    height: 100%;
}

.music-iframe-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    background-color: black;
    object-fit: cover;
}

.music-controls {
    position: absolute;
    bottom: 7vh;
    right: 4vw;
    background-color: rgba(0, 0, 0, 0.9);
    border-radius: 15px;
    padding: 2vw 3vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vw;
    min-width: 30vw; /* px 대신 화면과 함께 스케일, 좁은 가로에서 넘침 방지 */
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    transition: all 0.5s ease;
}

.music-controls.collapsed {
    min-width: auto;
    padding: 1vw;
    gap: 0;
}

.music-controls.collapsed .music-url,
.music-controls.collapsed .music-message,
.music-controls.collapsed .music-loop-btn {
    display: none;
}

.music-controls.collapsed .music-play-btn {
    width: 4vw;
    height: 4vw;
    font-size: 4vw;
}

.music-url {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5vw;
}

.music-clear-btn {
    border: none;
    background: transparent;
    color: #d5d5d5;
    font-size: 1.5vw;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

.music-clear-btn:hover {
    color: #ff4444;
}

.music-url input {
    width: auto;
    min-width: 24vw;
    max-width: 60vw;
    height: 3vw;
    border: none;
    border-bottom: 1px solid #d5d5d5;
    color: white;
    background-color: transparent;
    text-align: center;
    font-size: 1.2vw;
    outline: none;
    padding: 0 1vw;
    overflow: hidden;
}

.music-url input::placeholder {
    color: #d5d5d5;
}

.music-message {
    width: 100%;
    text-align: center;
    margin: 0;
}

.music-play-section {
    display: flex;
    justify-content: center;
    width: 100%;
}

.music-play-btn {
    width: 6vw;
    height: 6vw;
    border: none;
    background: transparent;
    font-size: 5vw;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.music-play-btn:disabled {
    color: #ff4444;
    cursor: not-allowed;
    opacity: 0.7;
}

.music-play-btn:not(:disabled) {
    color: #44ff44;
    cursor: pointer;
    opacity: 1;
}

.music-play-btn:not(:disabled):hover {
    color: #33cc33;
    transform: scale(1.05);
}

.music-loop-btn {
    width: 4vw;
    height: 4vw;
    border: none;
    background: transparent;
    font-size: 1.8vw;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: white;
    margin-left: 1vw;
    align-self: center;
}

.music-loop-btn.active {
    color: #44ff44;
}

.music-loop-btn:hover {
    color: #33cc33;
    transform: scale(1.05);
}

.music-message-text {
    font-size: 1vw;
    text-align: center;
    min-height: 1.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5vw;
    color: #ff4444;
}

.music-message-text ion-icon {
    font-size: 1vw;
}

.music-message-text.success {
    color: #44ff44;
}

/* 뮤직 URL 히스토리 : 오른쪽 세로 중앙에 쌓는 반투명 목록 */
.music-history {
    position: absolute;
    z-index: 5;
    right: 2vw;
    top: 50%;
    transform: translateY(-50%); /* 오른쪽 세로 중앙 정렬 */
    max-width: 33vw; /* 가로의 약 1/3 */
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end; /* 오른쪽 정렬 */
    text-align: right;
}

.music-history li {
    max-width: 33vw; /* 화면 가로의 1/3 이내로 제한, 중앙 재생 버튼과 겹침 방지 */
    color: white;
    opacity: 30%; /* 반투명 */
    font-size: 1.1vw;
    line-height: 200%; /* 줄 간격 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 넘치면 "..."으로 자름 */
    cursor: pointer;
    padding: 0 0.6vw;
    border-radius: 0.3vw;
}

.music-history li:hover {
    opacity: 100%; /* 배경 위에서 흰 글자 100% */
    background-color: rgba(0, 0, 0, 0.5); /* 반투명 검정 배경 */
}

.music-history li.current {
    opacity: 80%; /* 현재 재생 중은 진하게 */
    font-size: 1.32vw; /* 기본(1.1vw)보다 약 20% 크게 */
}

/*************************
 Timer style : window
 *************************

.timer-body {
    z-index: 2;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    border-radius: 30px;
    margin: 3vw auto;
    padding: 20px;
    border: 1px solid black;
    width: 60vw;
    height: 80vh;
    box-shadow: 7px 7px 20px 5px gray;
} */

/* Timer style : fullscreen */
.timer-body {
    z-index: 2;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    /* border-radius: 30px; */
    /* margin: 3vw auto; */
    padding: 0px;
    border: none;
    width: 100%;
    height: 100%;
    opacity: 90%;
    /* box-shadow: 7px 7px 20px 5px gray; */
}

.timer-close {
    position: absolute;
    z-index: 10;
    float: right;
    right: 10px;
    top: 10px;
}

.timer-close button {
    color: black;
    border: 0;
    background-color: transparent;
    font-size: 4vw;
    font-weight: bold;
    cursor: pointer;
}

.timer-close button:hover {
    color: #bb0000;
    text-decoration: none;
}

.timer {
    position: relative;
    width: 60vw;
    height: min(45vw, 90vh); /* 세로만 상한, 너비는 제목이 들어갈 여유 유지 */
    border-radius: 20px;
}

.timer-title > input {
    width: 100%;
    height: 3vw;
    margin-bottom: 3vw;
    border: none;
    color: black;
    background: transparent;
    text-align: center;
    font-size: 3vw;
    outline: none;
    cursor: pointer;
}

.timer-circle {
    position: relative;
    /* 원형 유지 + 세로 상한 */
    width: min(35vw, 55vh);
    height: min(35vw, 55vh);
    margin: 0 auto;
    border-radius: 50%;
    background-color: #bb0000;
    background: conic-gradient(#bb0000 70%, white 30%);
}

.timer-time {
    position: absolute;
    background-color: white;
    top: 50%;
    left: 50%;
    width: min(10vw, 16vh);
    height: min(10vw, 16vh);
    border-radius: 50%;
    text-align: center;
    line-height: min(10vw, 16vh);
    transform: translate(-50%, -50%);
}

.timer-time span {
    color: black;
    font-size: 2.5vw;
    font-family: 'Chivo Mono', monospace;
    letter-spacing: -0.1ch;
}

.timer-control {
    position: absolute;
    z-index: 11;
    float: right;
    right: 10px;
}

.timer-control button {
    display: block;
    border-radius: 50%;
    height: 4vw;
    width: 4vw;
    color: black;
    border: none;
    background-color: transparent;
    font-size: 1.5vw;
    pointer-events: auto;
    cursor: pointer;
    line-height: 80%;
    text-align: center;
    padding: 0;
}

.timer-control button:hover {
    border: 1px solid silver;
}

.timer-control button:active {
    color: red;
}

.timer-reset > ion-icon ,
.timer-pause > ion-icon {
    color: red;
    cursor: pointer;
}

.timer-reset:hover,
.timer-pause:hover {
    background-color: #ececec;
    cursor: pointer;
}

.timer-timeup-dialog {
    z-index: 9;
    display: flex;
    justify-content: center;
    position: fixed;
    width: min(20vw, 32vh);
    height: min(20vw, 32vh);
    align-items: center;
    text-align: center;
    border-radius: 30px;
    background-color: yellow;
    background: repeating-linear-gradient(
        -40deg,
        #EC7FA9,
        #EC7FA9 20px,
        #FFB8E0 20px,
        #FFB8E0 40px
    );
    animation: blink-blink 1s step-end infinite;
    /* margin: 0 auto; */
    margin-top: 3vw;
    padding: 20px;
    visibility: hidden;
}

.timer-timeup-dialog button {
    width: 100%;
    height: 100%;
    background-color: #BE5985;
    color: white;
    padding: 20px;
    border: 0;
    border-radius: 20px;
    font-size: 8vw;
    line-height: 80%;
    cursor: pointer;
}

.timer-alarms {
    width: 100%;
    padding: 1vw 0;
    text-align: center;
    border: 0;
}

.timer-alarms > button {
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    background-color: transparent;
    cursor: pointer;
    opacity: 40%;
    border: 0;
    outline: none;
}

.timer-alarms > button > span {
    pointer-events: none;
}

.timer-alarm {
    font-size: 1vw;
    color: gray;
}

.timer-alarm-mute {
    font-size: 1.5vw;
    color: black;
}


/* Tool 2 - Scoreboard, Scorecounter */
.score {
    position: fixed;
    left: 0px;
    top: 0px;
    background-color: black;
    margin: 0px;
    border: 0px;
    width: 100%;
    height: 100%;
    display: none;
    user-select: none;
}

.score-body {
    position: relative;
    width: 100%;
    height: 100%;
}

.teamblack,
.teamwhite {
    position: absolute;
    display: block;
    border: 2px solid black;
    width: 50%;
    height: 100%;
}

.teamblack {
    background-color: black;
    color: white;
}

.teamwhite {
    background-color: white;
    color: black;
}

.teamblack span,
.teamwhite span {
    font-family: 'Chivo Mono', monospace;
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    /* 극단 와이드에서 숫자 높이가 패널을 넘지 않게 세로 상한 */
    font-size: min(30vw, 60vh);
    letter-spacing: -0.1ch;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.teamblack input,
.teamwhite input {
    position: absolute;
    top: 0px;
    left: 50%;
    text-align: center;
    font-size: 4vw;
    opacity: 40%;
    transform: translate(-50%);
    white-space: nowrap;
    border: none;
    background-color: transparent;
    z-index: 11;
    outline: none;
    cursor: pointer;
}

.teamblack input {
    color: white;
}

.teamwhite input {
    color: black;
}

.tbup,
.twup,
.tbdn,
.twdn {
    cursor: pointer;
}
.tbup, 
.twup {
    position: absolute;
    display: inline-block;
    height: 50%;
    width: 100%;
    top: 0px;
    background-color: transparent;
    z-index: 10;
    border: 0px;
    border-bottom: 2px solid white;
    background: linear-gradient( to bottom, transparent 20%, #dedede, #686868);
    opacity: 20%;
}
.tbup {
    left: 0px;
}
.twup {
    right: 0px;
}

.tbdn, 
.twdn {
    position: absolute;
    display: inline-block;
    height: 50%;
    width: 100%;
    bottom: 0px;
    background-color: transparent;
    z-index: 10;
    border: 0px;
    border-top: 2px solid black;
    background: linear-gradient( to top, transparent 10%, #FFFFFF, #EEEEEE);
    opacity: 15%;
}

.tbdn {
    left: 0px;
}
.twdn {
    right: 0px;
}

.twscore {
    display: inline-block;
    width: 100%;
    height: 100%;
    border: 1px solid yellow;
    text-align: center;
    vertical-align: middle;
}

.sbclose,
.sbreset,
.sbchange,
.sbwhistle {
    position: fixed;
    display: flex; /* 아이콘 정렬 스타일 */
    width: 7vw;
    height: 7vw;
    background-color: transparent;
    border: 0;
    border-radius: 50%;
    padding: 0px;
    font-size: 4vw;
    align-items: center; /* 세로 중간정렬 */
    justify-content: center; /* 가로 중앙정렬 */
    z-index: 20;
    opacity: 75%;
    color: gray;
    cursor: pointer;
}

.sbreset {
    top: 0px;
    left: 0px;
}

.sbclose {
    top: 0px;
    right: 0px;
}

.sbclose:hover {
    color: #bb0000;
}

.sbchange {
    bottom: 0px;
    left: 0px;
}

.sbwhistle {
    bottom: 0px;
    right: 0px;
}


/******************************************************************/
/* chalk BOARD                                                    */
/******************************************************************/
.chalk {
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    display: none; 
    text-align: center;
}

.chalk-title {
    position: relative;
    z-index: 10;
    float: right;
    right: 10px;
    top: 10px; 
}

.chalk-body {
    z-index: 2;
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    font-size: 4vw;
    justify-content: center;
    align-items: center;
    border: 0;
}

.chalk-msg {
    z-index: 20;
    position: absolute;
    display: flex;
    width: 100%;
    height: auto;
    font-size: 4vw;
    border: 0;
    background-color: transparent;
    color: white;
    outline: none;
    text-align: center;
    vertical-align: middle;
    resize: none;
    caret-color: lime;
}

.chalk-edit {
    position: fixed;
    display: flex;
    width: 7vw;
    height: 7vw;
    background-color: transparent;
    border: 0;
    border-radius: 50%;
    padding: 0px;
    font-size: 4vw;
    align-items: center;
    justify-content: center;
    z-index: 22;
    opacity: 30%;
    color: white;
    cursor: pointer;
    bottom: 0px;
    right: 0px;
    outline: 0;
}

.chalk-close {
    position: fixed;
    display: flex; /* 아이콘 정렬 스타일 */
    width: 7vw;
    height: 7vw;
    background-color: transparent;
    border: 0;
    border-radius: 50%;
    padding: 0px;
    font-size: 4vw;
    align-items: center; /* 세로 중간정렬 */
    justify-content: center; /* 가로 중앙정렬 */
    z-index: 20;
    opacity: 40%;
    color: white;
    cursor: pointer;
    top: 0px;
    right: 0px;
}




/******************************************************************/
/* Simple Calendar                                                */
/******************************************************************/
.calendar {
    z-index: 2;
    position: fixed;
    left: 0;
    top: 0;
    display: none;
    justify-content: center;
    align-items: center;
    background-color: white;
    border: none;
    width: 100%; /* 100vw는 스크롤바 폭까지 포함해 가로 넘침 유발 */
    height: 100vh;
    height: 100dvh;
    opacity: 95%;
}
.cal-head {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr 3fr;
    height: 10vh;
    width: 80vw;
    align-items: center;
    margin-top: 2vh;
    margin-left: 10vw;
}
.cal-head div:nth-child(1) {
    padding: 0 2vh;
    text-align: center;
    font-size: 6vh;
    color: black;
}
.cal-head div:nth-child(3) {
    text-align: center;
}
.cal-head div:nth-child(3) button {
    color: black;
    border: 0;
    background-color: transparent;
    font-size: 9vh;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}
.cal-head div:nth-child(2n) {
    text-align: center;
    font-size: 4vh;
}
.cal-head div:nth-child(5) {
    position: absolute;
    z-index: 10;
    float: right;
    right: 10px;
    top: 10px;
}
.cal-head div:nth-child(5) button {
    color: black;
    border: 0;
    background-color: transparent;
    font-size: 4vw;
    font-weight: bold;
    cursor: pointer;
}
.cal-head div:nth-child(2n) button {
    color: silver;
    border: 0;
    background-color: transparent;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
}
.cal-body {
    display: grid;
    grid-template-columns: repeat( 7, 1fr );
    grid-template-rows: 1fr repeat( 6, 3fr );
    width: 80vw;
    height: 80vh;
    justify-content: center;
    align-items: stretch;
    margin-top: 5vh;
    margin-left: 10vw;
}
.cal-label {
    margin: 0.2vh;
    padding: 0.2vh 1vh;
    border-radius: 1%;
    text-align: right;
    font-size: 3vh;
    color: black;
    background-color: #ECECEC;
}
.cal-grid {
    border: 1px solid black;
    padding: 0.1em 0.3em;
    margin: 0.2em;
    border-radius: 0.3em;
    font-size: 4vh;
    text-align: right;
    color: black;
}






/******************************************************************/
/* Rotation icon                                                  */
/******************************************************************/
.rotation {
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.8);
    display: none;
}

.rotation > div {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translate(0, -50%);
}

.rotation-icon {
    text-align: center;
    font-size: 5vh;
    line-height: 1.1em;
    margin-bottom: 0em;
}

.rotation-msg {
    text-align: center;
    font-size: 2vh;
    line-height: 1em;
}
/*********************************************************/

@keyframes blink-blink {
    30% {
        opacity: 20%;
    }
}


@media only screen and (orientation: portrait) {
/*    html {
        transform: rotate(-90deg);
        transform-origin: top left;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100vh;
        height: 100vw;
    }
*/
    .right {
        height: 100vw;
        display: none;
    }

    .left {
        flex-basis: 100%;
        width: 100%;
    }
    .rotation {
        display: inherit;
    }
}

/*
@media( orientation: portrait ){
    html {
      transform: rotate(-90deg);
      transform-origin: top left;
      position: absolute;
      top: 100%;
      left: 0;
      width: 100vh;
      height: 100vw;
    }
    .quote {
        bottom: 2vmax;
    }
}
*/

/*

@media screen and (max-width: 480px) {
    .left { width: 100%; height: 40vh; }
    .right { width: 100%; height: 50vh; position: fixed; top: 40vh; }
    .hourmin { margin-left: 30%; }
    .todo-list button { height: 3vw; width: 3vw; }
    .todo-list li { font-size: 3vw; }
    .todo-input { font-size: 3vw; }
    .toolbelt button { font-size: 5vw; }
}

@media screen and (min-width: 480px) and (max-width: 800px) {
    body { background-size: auto 100%; }
    .left { width: 100%; height: 50vh; }
    .right { width: 100%; height: 50vh; position: fixed; top: 50vh; }
    .hourmin { margin-left: 30%; }
    .todo-list button { height: 3vw; width: 3vw; }
    .todo-list li { font-size: 3vw; }
    .todo-input { font-size: 3vw; }
    .toolbelt button { font-size: 4vw; }
}

@media screen and (min-width: 800px) {
    body { background-size: cover; }
    .left { width: 50%; height: 100vh; }
    .right { width: 50%; height: 100vh; }
    .hourmin { margin-left: 15%; }
    .todo-list button { height: 2vw; width: 2vw; }
    .todo-list li { font-size: 2vw; }
    .todo-input { font-size: 2vw; }
    .toolbelt button { font-size: 2vw; }
}
*/