:root {
  --font-color: #333;
  --b-color: #fff;
  --b2-color: #f0f0fa;
  --border-color: #ddd;
}
/* 다크 모드 */
@media (prefers-color-scheme: dark) {
	:root {
    --font-color: #eee;
    --b-color: #000;
    --b2-color: #222;
    --border-color: rgba(185,185,185,.5);
  }
}


button[disabled], 
input[type="button"][disabled] {
opacity: .3 !important;
}


/* 
  == 기본 검색 필드 UI 제거하기 ==
  [type="search"]에 대한 스타일을 설정합니다. 
  -webkit-appearance: textfield;는 기본 검색 입력 필드의 네이티브 UI를 제거하는 역할을 합니다.
  이를 통해 돋보기 아이콘이나 기본적인 X 버튼과 같은 브라우저 기본 스타일이 제거됩니다.
*/
[type="search"] {
    -webkit-appearance: textfield; /* 기본(네이티브) 모양을 제거 */
}
/* 
  == X 버튼과 검색 결과 버튼 숨기기 ==
  WebKit 및 Blink 엔진을 사용하는 브라우저에서 검색어를 지울 수 있는 X 버튼과 
  검색 결과 버튼을 숨깁니다. 
  이 두 선택자는 'X' 버튼과 검색 기록을 표시하는 버튼을 제어합니다.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-results-button {
    display: none; /* X 버튼 및 검색 결과 버튼 숨기기 */
}


/* 포인팅 장치가 있음(터치스크린, 모션 감지 센서) */
@media (pointer: coarse) { 

}
/* 포인팅 장치가 있음(마우스, 터치패드, 타블렛 펜) */
@media (pointer: fine) {

}
:root {
    --bottom-nav-height: 49px;
}
/* 스마트폰 세로모드 */
@media screen and (orientation: portrait) {

}
/* 스마트폰 가로모드 */
@media screen and (orientation: landscape) and (min-height: 1024px)  { 
    :root {
        --bottom-nav-height: 32px;
    }
}








body {
  background-color: black;
}

#view {
  background-color: white;
  color: #333;


  display: flex;
  flex-direction: column;
  
  min-height: calc(100dvh);
  max-width: 480px;

  position: relative;
  
  margin: 0 auto;
  padding: 52px 20px calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
  
  overflow: hidden;
}

nav {
  background-color: white;
}




#view article {
  max-width: 600px;

  margin: 0 auto;
}





#view #game-event-tile-wrap.list2 .game-event-tile-item {
  width: 100%;

  padding: 20px 0;

  border-bottom: 1px solid #ddd;

  position: relative;
}
#view #game-event-tile-wrap.list2 .event-name {
  line-height: 1.4;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#view #game-event-tile-wrap.list2 > div > button {
  width: 100%;
  height: 100%;

  padding: 0;

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  background-color: transparent;
}

#view #game-event-tile-wrap.list {
  display: flex;
  flex-wrap: wrap;

  width: 100%;
}
#view #game-event-tile-wrap.list .game-event-tile-item {
  width: 25%;
  margin-bottom: 16px;

  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
}
#view #game-event-tile-wrap.list .event-icon {
  opacity: .5;

  border: 4px solid;
  border-radius: 8px;

  width: 52px;
  height: 52px;

  margin: 0 auto;
  margin-bottom: 8px;
}
#view #game-event-tile-wrap.list .game-event-tile-item.selected .event-icon {
  opacity: .5;
}
#view #game-event-tile-wrap.list .event-name {
  padding: 4px;
}
#view #game-event-tile-wrap.list .game-event-tile-item.selected .event-name {
  color: #fff;
  background-color: #3391ff;
}
#view #game-event-tile-wrap.list > div > button {
  width: 100%;
  height: 100%;

  padding: 0;

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  background-color: transparent;
}

















#view .window {
  display: block;
}
#view .window {
  display: none;
}

#view .window-nav {
  max-width: 480px;
  width: 100%;

  margin: 0 auto;

  position: fixed;
  top: 0;
  right: 0;
  left: 0;

  z-index: 10;
}
#view .window-nav-content {
  width: 100%;
  height: 52px;

  display: flex;
  justify-content: space-between;
}
#view .window-nav-content button {
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 52px;
  padding: 20px;

  color: #3391ff;
  font-weight: bold;
}

#view .window-content > header {
  display: flex;
}
#view .window-content > header h2 {
  font-size: 40px;
  line-height: 1.6;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#view .window-content > header .the_textarea {
  font-size: 40px;
  line-height: 1.4;

  font-weight: bold;
  width: 100%;
  height: calc(40px * 1.4);
}

#view .window-footer {
  max-width: 480px;
  margin: 0 auto;

  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;

  z-index: 10;

  padding-bottom: env(safe-area-inset-bottom);

  border-top: 1px solid #ddd;
}
#view .window-footer-content {
  width: 100%;
  height: 52px;

  display: flex;
}
#view .window-footer-content button {
  min-width: 52px;
  height: 100%;

  color: #3391ff;
  font-weight: bold;
}
#view .window-footer-content *:last-child {
  margin-left: auto;
}




#view .event-nayong {
  margin-top: 52px;
}
#view .event-nayong:last-child {
  margin-bottom: 52px;
}
#view .event-nayong > header {
  display: flex;
  justify-content: space-between;

  margin-bottom: 12px;
}
#view .event-nayong > header .event-item-order-button {
  color: #3391ff;
  font-size: 14px;
}
#view .event-run-wrap {
  border: 1px solid #ddd;
}
#view .add-event-item-button-wrap {
  border-bottom: 1px solid #ddd;
}
#view .add-event-item-button {
  width: 100%;
  height: 52px;

  font-size: 28px;
}

#view .event-item {
  font-size: 14px;

  border-bottom: 1px solid #ddd;

  position: relative;

  padding: 20px;
}
#view .event-item-condition {
  padding: 0;
}
#view .event-condition {
  padding: 20px;

  border-bottom: 1px solid #ddd;
}
#view .event-item header {
  display: flex;
  justify-content: space-between;
}
#view .event-item header h3 {
  color: #808080;
}
#view .event-item-header-button-wrap {
  display: flex;

  position: absolute;
  top: 0;
  right: 0;
}
#view .event-item-header-button-wrap button {
  color: #3391ff;

  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 28px;

  z-index: 1;
}
#view .event-item-header-button-wrap button:last-child {
  padding-right: 20px;
}
#view .event-item section {
  margin-top: 8px;
  line-height: 1.6;
}
#view .event-item textarea,
#view .event-item input:not(input[type*=checkbox]) {
  width: 100%;

  line-height: 1.6;
}
#view .event-item textarea {
  height: 66px;
}
#view .event-item-full-click-button {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  width: 100%;
  height: 100%;
}


#view button:not(.event-window-open-button):not(.add-event-item-button):not(.event-item-full-click-button):not(.popup-disable-button):not(.popup-list button) {
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
#view button:not(.event-window-open-button):not(.add-event-item-button):not(.event-item-full-click-button):not(.popup-disable-button):not(.popup-list button):active {
  opacity: .3;
}
@media (any-hover: hover) {
  #view button:not(.event-window-open-button):not(.add-event-item-button):not(.event-item-full-click-button):not(.popup-disable-button):not(.popup-list button):hover {
    opacity: .3;
  }
}





#view .theme-button {
  border: 1px solid rgba(185,185,185,.5);
  border-radius: 4px;
  padding: 8px;
  margin-right: 8px;
}
#view .theme-button.on {
  border: 3px solid #3391ff;
}
#view .theme-light-button {
  background-color: #fff;
  color: #333;
}
#view .theme-sepia-button {
  background-color: rgb(248, 241, 227);
  color: rgb(79, 50, 28);
}
#view .theme-gray-button {
  background-color: #808080;
  color: lightgray;
}
#view .theme-dark-button {
  background-color: #000;
  color: #eee;
}




#view .event-first-event-wrap input[type*=checkbox] {
  appearance: auto;
  -webkit-appearance: checkbox;
  -moz-appearance: auto;
}




#view .round-button-wrap {
  padding-top: 8px;
  margin-bottom: 24px;

  white-space: nowrap;
  overflow: auto;

  margin-left: -20px;
  margin-right: -20px;
  padding-left: 20px;
  padding-right: 20px;

  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
#view .round-button-wrap::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera*/
}
#view .round-button {
  border: 1px solid rgba(185,185,185,.5);
  border-radius: 100%;
  padding: 8px;
  margin-right: 8px;

  width: 36px;
  height: 36px;
}
#view .round-button.on {
  border: 3px solid #3391ff;
}
#view .round-button[data-splashbackground*="brown"] {
  background-color: #231704;
  color: #fff9d4;
}
#view .round-button[data-splashbackground*="green"] {
  background-color: #273829;
  color: #fff9d4;
}
#view .round-button[data-splashbackground*="red"] {
  background-color: #921008;
  color: #fff9d4;
}
#view .round-button[data-splashbackground*="blue"] {
  background-color: #050239;
  color: #fff9d4;
}
#view .round-button[data-splashbackground*="yellow"] {
  background-color: #d48207;
  color: #fff9d4;
}
#view .round-button[data-splashbackground*="orange"] {
  background-color: #e36942;
  color: #fff9d4;
}
#view .round-button[data-splashbackground*="purple"] {
  background-color: #353a71;
  color: #fff9d4;
}



.view-game .round-button-wrap {
  padding-top: 8px;
  margin-bottom: 24px;

  white-space: nowrap;
  overflow: auto;

  margin-left: -20px;
  margin-right: -20px;
  padding-left: 20px;
  padding-right: 20px;

  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.view-game .round-button-wrap::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera*/
}
.view-game .round-button {
  border: 1px solid rgba(185,185,185,.5);
  border-radius: 100%;
  padding: 8px;
  margin-right: 8px;

  width: 36px;
  height: 36px;
}
.view-game .round-button.on {
  border: 3px solid #3391ff;
}
.view-game .round-button[data-splashbackground*="brown"] {
  background-color: #231704;
  color: #fff9d4;
}
.view-game .round-button[data-splashbackground*="green"] {
  background-color: #273829;
  color: #fff9d4;
}
.view-game .round-button[data-splashbackground*="red"] {
  background-color: #921008;
  color: #fff9d4;
}
.view-game .round-button[data-splashbackground*="blue"] {
  background-color: #050239;
  color: #fff9d4;
}
.view-game .round-button[data-splashbackground*="yellow"] {
  background-color: #d48207;
  color: #fff9d4;
}
.view-game .round-button[data-splashbackground*="orange"] {
  background-color: #e36942;
  color: #fff9d4;
}
.view-game .round-button[data-splashbackground*="purple"] {
  background-color: #353a71;
  color: #fff9d4;
}