/* Shared UI rhythm for the home, tools, games and informational pages. */
#site[data-page]{
  --ui-control-height:48px;
  --ui-control-radius:10px;
  --ui-card-radius:16px;
  --ui-card-padding:24px;
  --ui-field-gap:18px;
  --ui-section-gap:20px;
  --ui-action-gap:12px;
}

/* Keep the dimensions of boards, targets, tiles, metrics and color/range inputs. */
#site[data-page] :is(#main,.result-dialog) :is(
  .primary-action,.salary-secondary,.spell-secondary,.calendar-actions button,
  .bg-btn,.image-upload-button,.result-dialog-close,.load-more,.bg-choice,.spell-choice,[data-wage-mode]
){
  min-height:var(--ui-control-height);
  border-radius:var(--ui-control-radius);
  padding:11px 14px;
  font:550 0.9375rem/1.5 Pretendard,sans-serif;
  gap:8px;
}
#site[data-page] :is(#main,.result-dialog) .bg-btn.bg-arrow{
  min-width:var(--ui-control-height);
  padding:10px;
  font-size:1.25rem;
}
#site[data-page] .editor-actions button{
  min-height:var(--ui-control-height);
  border-radius:var(--ui-control-radius);
  font-size:0.875rem;
  min-width:0;
  height:auto;
  white-space:normal;
  word-break:keep-all;
  overflow-wrap:anywhere;
}
#site[data-page] :is(#main,.result-dialog) :is(
  input:not(:is([type=hidden],[type=radio],[type=checkbox],[type=range],[type=color],[type=file],[type=button],[type=submit],[type=reset],[type=image])),
  select,.salary-input
){
  min-height:var(--ui-control-height);
  border-radius:var(--ui-control-radius);
  font-size:1rem;
}
#site[data-page] :is(#main,.result-dialog) .salary-input>input{
  min-height:calc(var(--ui-control-height) - 2px);
}
#site[data-page] :is(#main,.result-dialog) :is(input,select,textarea){
  font-family:Pretendard,sans-serif;
}
#site[data-page] :is(#main,.result-dialog) :is(.salary-fields,.calculator-fields,.power-fields){
  gap:var(--ui-field-gap);
  align-items:start;
}
#site[data-page] :is(#main,.result-dialog) :is(
  .salary-actions,.wizard-actions,.calendar-actions,.bg-actions,.spell-toolbar
){
  gap:var(--ui-action-gap);
  flex-wrap:wrap;
}
#site[data-page] :is(#main,.result-dialog) :is(.salary-card,.calculator-box,.calendar-results,.calculation-output,.spell-results,.editor,.rules,.body-copy){
  border-radius:var(--ui-card-radius);
}
#site[data-page] :is(#main,.result-dialog) :is(.salary-card,.calculator-box,.calendar-results):not(details){
  padding:var(--ui-card-padding);
}
#site[data-page] .result-dialog .calculation-output{padding:var(--ui-card-padding)}
#site[data-page] #main :is(#salary-form,.severance-form){
  gap:var(--ui-section-gap);
}
#site[data-page] #main .calculator-panel-body{
  padding:var(--ui-card-padding);
  gap:var(--ui-field-gap);
}
#site[data-page] :is(#main,.result-dialog) details>summary{
  min-height:52px;
  padding:14px 16px;
  font-size:1.125rem;
  gap:12px;
}
#site[data-page] :is(#main,.result-dialog) :is(.check,.inline-check,.salary-check,.password-options label){
  min-height:var(--ui-control-height);
}
#site[data-page] .tool-categories{gap:var(--ui-action-gap)}
#site[data-page] .advert>:is(small,span){
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
  text-align:center;
}
#site[data-page]:not([data-page=home]) .tool-card{
  grid-template-columns:max-content minmax(0,1fr);
}
#site[data-page] .tool-categories a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  box-sizing:border-box;
  border-radius:var(--ui-control-radius);
}
#site[data-page] :is(.header-games,.header-toolbox,.footer-inner nav a){
  min-height:44px;
  display:inline-flex;
  align-items:center;
  box-sizing:border-box;
}

/* Home search uses the same field, blue action and paper edge as tool pages. */
#site[data-page] :is(.header-search,.home-search){gap:var(--ui-action-gap)}
#site[data-page] :is(.header-search,.home-search) input{
  min-height:var(--ui-control-height);
  min-width:0;
  font-size:1rem;
}
#site[data-page] :is(.header-search,.home-search) button{
  min-height:var(--ui-control-height);
  padding:11px 14px;
  border:1px solid #1a56b1;
  border-radius:var(--ui-control-radius);
  background:#1c62cd;
  color:#fff;
  box-shadow:0 3px 0 #17488c;
  font:550 0.9375rem/1.5 Pretendard,sans-serif;
}
#site[data-page=home] .home-fields{gap:12px}
#site[data-page=home] .home-fields a{min-height:var(--ui-control-height)}
#site[data-page=home] .home-hero>p{font-size:0.8125rem;line-height:1.8}
#site[data-page] .footer-inner nav{font-size:0.8125rem;flex-wrap:wrap;row-gap:8px}

@media(max-width:600px){
  #site[data-page]{--ui-card-padding:18px}
  #site[data-page] :is(#main,.result-dialog) details>summary{
    padding:14px;
    font-size:1.0625rem;
  }
  #site[data-page] :is(#main,.result-dialog) textarea{padding:14px}
}
@media(max-width:400px){
  #site[data-page=home] .home-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  #site[data-page=character-count] .editor-actions{
    grid-template-columns:repeat(auto-fit,minmax(min(100%,4.5rem),1fr));
  }
}

#site[data-sticker][data-page=character-count] #main .language select{
  min-width:min(11rem,100%);
}

/* Follow the visible viewport when a software keyboard covers the layout. */
@media(max-width:1024px){
  html{scroll-padding-block:16px var(--hd-scroll-inset,24px)}
  html:focus-within{scroll-behavior:auto}
  #site[data-page] :is(input,textarea){scroll-margin-block:16px}
  #site[data-page] :is(.salary-actions,.calendar-actions,.wizard-actions,.spell-toolbar){
    scroll-margin-bottom:24px;
    padding-bottom:max(20px,env(safe-area-inset-bottom));
  }
  #site[data-page] :is(.result-dialog,.result-dialog-shell){
    max-height:min(88dvh,calc(var(--hd-visible-height,100dvh) - 32px));
  }
  #site[data-compact-viewport] .result-dialog{
    position:fixed;
    top:calc(var(--hd-visible-top,0px) + 12px);
    bottom:auto;
    margin-block:0;
  }
  #site[data-page][data-compact-viewport] .result-dialog-header{padding:10px 12px}
  #site[data-page][data-compact-viewport] .result-dialog-header h2{
    font-size:1rem;
    line-height:1.2;
    word-break:keep-all;
  }
  #site[data-page][data-compact-viewport] .result-dialog-kicker{
    font-size:0.5rem;
    line-height:1.2;
    margin-bottom:3px;
  }
  #site[data-page][data-compact-viewport] .result-dialog-content{padding:10px 12px 14px}
  #site[data-compact-viewport] .wizard-stage{height:auto;max-height:none;overflow:visible}
  #site[data-page][data-compact-viewport] :is(#main,.result-dialog) textarea:not([readonly]):focus{
    min-height:120px;
    max-height:max(120px,calc(var(--hd-visible-height,100dvh) - 160px));
  }
}