/* ORUMUP_MY_INFO_COMPACT_V1: layout only; keep every control and saved preference. */
@media screen {
  /* Only the My Info dialog: cut container/card whitespace, not hit targets. */
  #memberTestModal .member-test-card { box-sizing: border-box; padding: 12px 14px; }
  #memberTestModal .modal-head { gap: 8px; padding-bottom: 7px; }
  #memberTestModal .modal-head p { margin-top: 2px; line-height: 1.3; }
  #memberTestModal :is(#fontSizeSettings, #displayThemeSettings, #pcAppInfo, #memberSelfInfo, #memberFeatureStatus, #memberLocalData) {
    margin: 9px 0;
    padding: 11px 12px;
    border-radius: 14px;
  }
  #memberTestModal :is(.font-size-heading, .display-theme-heading, .pcapp-info-head, .member-self-head, .member-section-head) { gap: 6px; }
  #memberTestModal :is(.font-size-heading h3, .display-theme-heading h3, .pcapp-info h3, .member-self-head h3, .member-section-head h3) {
    font-size: calc(16px * var(--oreumup-font-scale, 1));
    line-height: 1.25;
  }
  #memberTestModal :is(.font-size-auto, .display-theme-auto, .pcapp-mode, .member-self-badge) {
    padding: 3px 7px;
    font-size: calc(10px * var(--oreumup-font-scale, 1));
    line-height: 1.25;
  }
  #memberTestModal :is(.font-size-help, .display-theme-help) {
    margin: 4px 0 8px;
    font-size: calc(12px * var(--oreumup-font-scale, 1));
    line-height: 1.3;
  }
  /* Two-line size buttons stay intact; larger chosen text can still grow. */
  #memberTestModal .font-size-stepper { gap: 7px; }
  #memberTestModal .font-size-step {
    min-height: 44px !important;
    padding: 4px 6px;
    gap: 1px;
    font-size: calc(13px * var(--oreumup-font-scale, 1));
    line-height: 1.15;
  }
  #memberTestModal .font-size-symbol { font-size: calc(18px * var(--oreumup-font-scale, 1)); line-height: 1.1; }
  #memberTestModal .font-size-value { gap: 2px; }
  #memberTestModal #fontSizeValue { font-size: calc(21px * var(--oreumup-font-scale, 1)); line-height: 1.15; }
  #memberTestModal #fontSizeLabel { line-height: 1.2; }
  #memberTestModal .font-size-preview { margin-top: 8px; padding: 8px 10px; border-radius: 11px; }
  #memberTestModal .font-size-preview-label { margin-bottom: 3px; line-height: 1.2; }
  #memberTestModal .font-size-preview strong { line-height: 1.3; }
  #memberTestModal .font-size-preview p { margin-top: 3px; line-height: 1.35; }
  #memberTestModal .font-size-bottom { margin-top: 7px; gap: 6px; }
  #memberTestModal .font-size-bottom > span { line-height: 1.25; }
  #memberTestModal #fontSizeReset { min-height: 44px !important; padding: 6px 10px; line-height: 1.2; }
  #memberTestModal .font-size-save-note { margin-top: 5px; line-height: 1.3; }
  #memberTestModal .my-info-test { padding-top: 2px; }
  #memberTestModal .my-info-test > summary { min-height: 44px; padding: 6px 2px; line-height: 1.25; }
  #memberTestModal .my-info-test[open] > summary { margin-bottom: 3px; }

  /* Tone: preserve 0–100% steps, slider touch area, and endpoint buttons. */
  #memberTestModal .display-tone-controls { margin: 5px 0; gap: 6px; }
  #memberTestModal .display-tone-step {
    min-height: 44px !important;
    padding: 5px 6px;
    font-size: calc(13px * var(--oreumup-font-scale, 1));
    line-height: 1.2;
  }
  #memberTestModal .display-tone-readout { gap: 2px; }
  #memberTestModal #displayToneValue { font-size: calc(16px * var(--oreumup-font-scale, 1)); line-height: 1.2; }
  #memberTestModal #displayToneLabel { line-height: 1.2; }
  #memberTestModal .display-tone-endpoints { margin-bottom: 6px; line-height: 1.2; }
  #memberTestModal .display-tone-help { margin-top: 5px; line-height: 1.3; }
  #memberTestModal .display-theme-note { margin-top: 5px; line-height: 1.3; }
  #memberTestModal .display-theme-options { gap: 7px; }
  #memberTestModal #displayThemeSettings .display-theme-choice {
    min-height: 44px;
    padding: 6px 7px;
    gap: 2px;
    line-height: 1.2;
  }
  #memberTestModal .display-theme-choice small { line-height: 1.2; }
  /* #displayToneRange already has a 44px interactive area: don't shrink it. */

  /* PC app description and controls: same actions, less empty space. */
  #memberTestModal .pcapp-info p { margin: 4px 0 8px; line-height: 1.35; }
  #memberTestModal .pcapp-info :is(.pcapp-primary, .pcapp-secondary) {
    min-height: 44px;
    padding: 6px 10px;
    line-height: 1.2;
    margin-bottom: 3px;
  }
  #memberTestModal .pcapp-help { margin-top: 8px; padding-top: 6px; line-height: 1.3; }
  #memberTestModal .pcapp-help p { margin: 4px 0; }

  /* Keep all member information fields and actions visible, just denser. */
  #memberTestModal :is(.member-self-head p, .member-section-head p) { margin-top: 2px; line-height: 1.3; }
  #memberTestModal .member-self-identity { gap: 8px; margin: 7px 0; padding: 8px 9px; }
  #memberTestModal .member-self-avatar { flex-basis: 38px; width: 38px; height: 38px; }
  #memberTestModal :is(.member-self-identity strong, .member-self-identity span) { line-height: 1.3; }
  #memberTestModal :is(.member-self-grid, .member-sensitive-grid, .member-status-grid) { gap: 6px; }
  #memberTestModal .member-info-item { padding: 7px 8px; }
  #memberTestModal .member-info-item span { margin-bottom: 2px; line-height: 1.25; }
  #memberTestModal .member-info-item b { line-height: 1.3; }
  #memberTestModal .member-account-actions { gap: 6px; margin-top: 7px; }
  #memberTestModal .member-account-actions button { min-height: 44px; padding: 6px 8px; line-height: 1.25; }
  #memberTestModal :is(.member-detail-open, .member-sensitive-hide) { min-height: 44px; margin-top: 7px; }
  #memberTestModal .member-sensitive { margin-top: 7px; padding-top: 7px; }
  #memberTestModal .member-sensitive-note { margin-top: 5px; line-height: 1.3; }
  #memberTestModal .member-sensitive-actions { margin-top: 7px; }
  #memberTestModal .member-state-chip { min-height: 28px; padding: 4px 7px; line-height: 1.25; }
  #memberTestModal #memberFeatureStatus .member-status-grid,
  #memberTestModal #memberLocalData .member-self-grid { margin-top: 7px !important; }
  #memberTestModal .member-local-note { margin-top: 6px; padding: 7px 8px; line-height: 1.3; }
}
@media screen and (max-width: 760px) {
  #memberTestModal .member-test-card { padding: 10px; }
  #memberTestModal :is(#fontSizeSettings, #displayThemeSettings, #pcAppInfo, #memberSelfInfo, #memberFeatureStatus, #memberLocalData) {
    margin: 8px 0;
    padding: 10px;
  }
  #memberTestModal .font-size-stepper { gap: 5px; }
  #memberTestModal .font-size-step { padding: 4px; }
}

/* ORUMUP_MY_INFO_COMPACT_V2: stronger compression, two-row member actions.
   Scoped to My Info only; all original buttons and handlers remain. */
@media screen {
  #memberTestModal .member-test-card{padding:8px 10px!important}
  #memberTestModal #fontSizeSettings,
  #memberTestModal #displayThemeSettings,
  #memberTestModal #pcAppInfo{margin:5px 0!important;padding:8px 10px!important}

  /* Title/help share a row; size buttons/reset occupy two compact rows. */
  #memberTestModal #fontSizeSettings{
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 5px
  }
  #memberTestModal #fontSizeSettings .font-size-heading{
    grid-column:1;grid-row:1;min-width:0;margin:0!important;gap:4px
  }
  #memberTestModal #fontSizeSettings .font-size-heading h3,
  #memberTestModal #displayThemeSettings .display-theme-heading h3,
  #memberTestModal #pcAppInfo .pcapp-info-head h3{
    font-size:calc(13px * var(--oreumup-font-scale,1))!important;line-height:1.15
  }
  #memberTestModal #fontSizeSettings .myinfo-help{
    grid-column:2;grid-row:1;align-self:center;margin:0!important;padding:0 6px;min-width:0
  }
  #memberTestModal #fontSizeSettings .myinfo-help>summary{
    min-height:30px;padding:3px 0;white-space:nowrap;
    font-size:calc(10px * var(--oreumup-font-scale,1));line-height:1.2;gap:5px
  }
  #memberTestModal #fontSizeSettings .myinfo-help[open]{grid-column:1/-1;grid-row:4}
  #memberTestModal #fontSizeSettings .myinfo-help p{margin:4px 0 7px;line-height:1.3}
  #memberTestModal #fontSizeSettings .font-size-stepper{
    grid-column:1/-1;grid-row:2;gap:4px;
    grid-template-columns:repeat(4,minmax(0,1fr))!important
  }
  #memberTestModal #fontSizeSettings .font-size-step{
    min-height:44px!important;padding:2px 4px!important;gap:0;
    font-size:calc(11px * var(--oreumup-font-scale,1));line-height:1.1
  }
  #memberTestModal #fontSizeSettings .font-size-symbol{
    font-size:calc(17px * var(--oreumup-font-scale,1))!important;line-height:1.1
  }
  #memberTestModal #fontSizeSettings .font-size-bottom{
    grid-column:1/-1;grid-row:3;margin:0!important;gap:4px;flex-wrap:nowrap
  }
  #memberTestModal #fontSizeSettings .font-size-bottom>span{
    font-size:calc(10px * var(--oreumup-font-scale,1));line-height:1.15
  }
  #memberTestModal #fontSizeReset{
    min-height:44px!important;flex:0 0 auto;padding:4px 7px!important;
    font-size:calc(10px * var(--oreumup-font-scale,1));line-height:1.1
  }

  /* Slider and both preset buttons share one physical row. */
  #memberTestModal #displayThemeSettings{
    display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px 5px
  }
  #memberTestModal #displayThemeSettings>*{grid-column:1/-1;min-width:0}
  #memberTestModal #displayThemeSettings .display-theme-heading{
    grid-row:1;margin:0!important;align-items:center;gap:5px
  }
  #memberTestModal #displayThemeSettings .display-tone-controls{
    grid-row:2;margin:0!important;gap:5px!important
  }
  #memberTestModal #displayThemeSettings .display-tone-step{
    min-height:44px!important;padding:2px 4px!important;
    font-size:calc(11px * var(--oreumup-font-scale,1));line-height:1.1
  }
  #memberTestModal #displayThemeSettings #displayToneRange{
    grid-column:5/9;grid-row:3;min-height:44px;margin:0;align-self:center
  }
  #memberTestModal #displayThemeSettings .display-theme-options{display:contents}
  #memberTestModal #displayThemeSettings .display-theme-options .display-theme-option:first-child{
    grid-column:1/5;grid-row:3
  }
  #memberTestModal #displayThemeSettings .display-theme-options .display-theme-option:last-child{
    grid-column:9/13;grid-row:3
  }
  #memberTestModal #displayThemeSettings .display-theme-choice{
    min-height:44px!important;padding:3px 4px;
    font-size:calc(10px * var(--oreumup-font-scale,1));line-height:1.1
  }
  #memberTestModal #displayThemeSettings .display-tone-endpoints{
    grid-row:4;margin:0!important;line-height:1.1;
    font-size:calc(9px * var(--oreumup-font-scale,1))
  }

  /* PC-app explanation and guide button share a row when installed. */
  #memberTestModal #pcAppInfo{
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 7px;align-items:center
  }
  #memberTestModal #pcAppInfo .pcapp-info-head{grid-column:1/-1;gap:4px}
  #memberTestModal #pcAppInfo p{
    grid-column:1;grid-row:2;margin:0;min-width:0;
    font-size:calc(10px * var(--oreumup-font-scale,1));line-height:1.25
  }
  #memberTestModal #pcAppInfo #pcAppInfoHelp{
    grid-column:2;grid-row:2;margin:0!important;min-height:44px;padding:4px 7px;
    font-size:calc(10px * var(--oreumup-font-scale,1))
  }
  #memberTestModal #pcAppInfo #pcAppInfoInstall:not([hidden]){
    grid-column:1/-1;grid-row:3;min-height:44px;margin:0
  }

  /* 2+3 member actions. HTML remains untouched: keep all access checks. */
  #memberTestModal #memberSelfInfo{
    display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px
  }
  #memberTestModal #memberSelfInfo>:not(.member-account-actions):not(.member-detail-open){
    grid-column:1/-1
  }
  #memberTestModal #memberSelfInfo>.member-account-actions{display:contents}
  #memberTestModal #memberSelfInfo .member-account-actions>button,
  #memberTestModal #memberSelfInfo>.member-detail-open{
    min-width:0;min-height:44px!important;height:auto;margin:0!important;
    padding:5px 4px;white-space:normal;overflow-wrap:anywhere;
    word-break:keep-all;line-height:1.2;text-align:center;
    font-size:calc(10px * var(--oreumup-font-scale,1))
  }
  #memberTestModal #memberSelfInfo #memberAccountSwitch,
  #memberTestModal #memberSelfInfo #memberAccountLogout{grid-column:span 3}
  #memberTestModal #memberSelfInfo .member-account-actions .member-account-full,
  #memberTestModal #memberSelfInfo .member-account-actions .member-account-withdraw{
    grid-column:span 2!important
  }
  #memberTestModal #memberSelfInfo>.member-detail-open{grid-column:span 2;width:100%}
  /* If both optional actions are visible, arrange all six without a third line. */
  #memberTestModal #memberSelfInfo:has(#memberLoginIdChangeOpen:not([hidden])):has(#memberWithdrawOpen:not([hidden])) #memberAccountSwitch{
    grid-column:1/3;grid-row:4
  }
  #memberTestModal #memberSelfInfo:has(#memberLoginIdChangeOpen:not([hidden])):has(#memberWithdrawOpen:not([hidden])) #memberAccountLogout{
    grid-column:3/5;grid-row:4
  }
  #memberTestModal #memberSelfInfo:has(#memberLoginIdChangeOpen:not([hidden])):has(#memberWithdrawOpen:not([hidden])) #memberWithdrawOpen{
    grid-column:5/7!important;grid-row:4
  }
  #memberTestModal #memberSelfInfo:has(#memberLoginIdChangeOpen:not([hidden])):has(#memberWithdrawOpen:not([hidden])) #memberPinChangeOpen{
    grid-column:1/3!important;grid-row:5
  }
  #memberTestModal #memberSelfInfo:has(#memberLoginIdChangeOpen:not([hidden])):has(#memberWithdrawOpen:not([hidden])) #memberLoginIdChangeOpen{
    grid-column:3/5!important;grid-row:5
  }
  #memberTestModal #memberSelfInfo:has(#memberLoginIdChangeOpen:not([hidden])):has(#memberWithdrawOpen:not([hidden])) #memberDetailOpen{
    grid-column:5/7;grid-row:5
  }
  #memberTestModal #memberSelfInfo:has(#memberLoginIdChangeOpen[hidden]):has(#memberWithdrawOpen[hidden]) #memberPinChangeOpen{
    grid-column:span 3!important
  }
  #memberTestModal #memberSelfInfo:has(#memberLoginIdChangeOpen[hidden]):has(#memberWithdrawOpen[hidden]) #memberDetailOpen{
    grid-column:span 3
  }
}
@media screen and (max-width:760px){
  #memberTestModal #fontSizeSettings,
  #memberTestModal #displayThemeSettings,
  #memberTestModal #pcAppInfo{padding:7px 8px!important}
}
@media screen and (max-width:360px){
  #memberTestModal #memberSelfInfo{gap:4px}
  #memberTestModal #memberSelfInfo .member-account-actions>button,
  #memberTestModal #memberSelfInfo>.member-detail-open{padding:4px 2px}
}

/* ORUMUP_MY_INFO_MEMBER_DETAILS_20261021 — native keyboard-accessible disclosure.
   The member grid is collapsed by default; account actions stay visible. */
@media screen {
  #memberTestModal #memberSelfDetails {
    grid-column: 1 / -1;
    min-width: 0;
    margin: 0;
    border: 1px solid var(--oreumup-theme-line, #c8e5d5);
    border-radius: 10px;
  }
  #memberTestModal #memberSelfDetails > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    padding: 7px 10px;
    border-radius: 10px;
    font-size: calc(11px * var(--oreumup-font-scale, 1));
    font-weight: 850;
    line-height: 1.25;
    cursor: pointer;
    list-style: none;
    touch-action: manipulation;
  }
  #memberTestModal #memberSelfDetails > summary::after {
    content: "펼치기 ▾";
    flex: 0 0 auto;
    font-size: calc(10px * var(--oreumup-font-scale, 1));
  }
  #memberTestModal #memberSelfDetails[open] > summary::after { content: "접기 ▴"; }
  #memberTestModal #memberSelfDetails[open] > .member-self-grid {
    padding: 0 7px 7px;
  }
  #memberTestModal #memberSelfDetails > summary:focus-visible {
    outline: 3px solid var(--oreumup-theme-focus, #0b73e7);
    outline-offset: 2px;
  }
}

/* ORUMUP_MY_INFO_LAST_ROW_20261021: recover one more row in the PC-app and
   member-identity cards only. Do not change button behavior, saved settings or text. */
@media screen and (min-width: 400px) {
  /* Trim the empty border/padding around the member heading + identity. */
  #memberTestModal #memberSelfInfo {
    margin-top: 4px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    row-gap: 4px;
  }
  #memberTestModal #memberSelfInfo .member-self-head { gap: 4px; align-items: center; }
  #memberTestModal #memberSelfInfo .member-self-head p { margin-top: 1px; line-height: 1.2; }
  #memberTestModal #memberSelfInfo .member-self-identity {
    min-width: 0;
    margin: 2px 0 !important;
    padding: 5px 8px !important;
    gap: 7px;
  }
  #memberTestModal #memberSelfInfo .member-self-avatar {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    font-size: calc(13px * var(--oreumup-font-scale, 1));
  }
  #memberTestModal #memberSelfInfo .member-self-identity strong {
    font-size: calc(14px * var(--oreumup-font-scale, 1));
    line-height: 1.15;
  }
  #memberTestModal #memberSelfInfo .member-self-identity span {
    margin-top: 1px;
    line-height: 1.2;
  }
}
/* At a PC-app window width, move the existing help button into the PC-app
   heading row. The full instruction gets its own full-width line below. */
@media screen and (min-width: 400px) {
  #memberTestModal #pcAppInfo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 6px;
    row-gap: 1px;
    align-items: center;
  }
  #memberTestModal #pcAppInfo .pcapp-info-head { display: contents; }
  #memberTestModal #pcAppInfo #pcAppInfoTitle {
    grid-column: 1;
    grid-row: 1;
    white-space: nowrap;
  }
  #memberTestModal #pcAppInfo #pcAppModeBadge {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    min-width: 0;
    padding: 2px 5px;
    font-size: calc(9px * var(--oreumup-font-scale, 1));
    line-height: 1.15;
    white-space: nowrap;
  }
  #memberTestModal #pcAppInfo #pcAppInfoHelp {
    grid-column: 3;
    grid-row: 1;
    min-height: 44px;
    padding: 4px 6px;
    margin: 0 !important;
    white-space: nowrap;
  }
  #memberTestModal #pcAppInfo #pcAppInfoCopy {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
    line-height: 1.2;
    font-size: calc(10px * var(--oreumup-font-scale, 1));
  }
  #memberTestModal #pcAppInfo #pcAppInfoInstall:not([hidden]) {
    grid-column: 1 / -1;
    grid-row: 3;
    min-height: 44px;
  }
}

/* ORUMUP_MY_INFO_TOP_GAP_20261021: shave only 2-3px from card top edges.
   PC-app width only; text/buttons/slider hit targets and behavior stay unchanged. */
@media screen and (min-width: 400px) {
  #memberTestModal .member-test-card {
    padding-top: 6px !important;
  }
  #memberTestModal .modal-head {
    padding-bottom: 5px !important;
    margin-bottom: 3px !important;
  }
  #memberTestModal #fontSizeSettings,
  #memberTestModal #displayThemeSettings,
  #memberTestModal #pcAppInfo {
    margin-top: 3px !important;
    padding-top: 5px !important;
  }
  #memberTestModal #memberSelfInfo {
    margin-top: 2px !important;
    padding-top: 6px !important;
  }
}