/* chrome-mob.css -- the <=1023 chrome (GNB, drawers, footer, fixed buttons) */
/* drawn ON legacy markup. Linked at the END of <body> (_footer.asp): _menu */
/* and _footer carry 9 inline <style> blocks, no @media, inside <body>. */

.gnb-mobbtn { display: none; }
/* outside the media on purpose: a drawer built at <=1023 must stay hidden when the */
/* viewport grows past it (rotation, resize); chrome.js also removes the nodes then. */
.gnb-acc, .gnb-acc-overlay { display: none; }

@media (max-width: 1023px) {

  /* 1. desktop-only boxes. Beats _menu.asp:19 .top_eventban_wrap{width:1200px} */
  /* (0,1,0); main_renewal.css:32/33 declares no display at all. */
  html .top_eventban_wrap { display: none; }
  html .utils_wrap { display: none; }

  /* 2. m-dot .header: 50px, logo left, icons right, 1px #f3f3f3 rule under. */
  /* Beats _menu.asp:407 .biz_menu_v2 .gnb_menu{width:1200px;height:55px} (0,2,0). */
  html .gnb_wrap.biz_menu_v2 { height: auto; border-bottom: 0; }
  html .biz_menu_v2 nav.gnb_box { width: auto; padding: 0; }
  /* width:100% + flex:1 1 auto, not width:auto: .gnb_menu is a flex item of */
  /* nav.gnb_box, so width:auto shrank the bar to its content (320 of 375) and */
  /* left no free space for the four buttons to be pushed right into. */
  html .biz_menu_v2 .gnb_menu {
      width: 100%; flex: 1 1 auto; height: 50px; padding: 0 5px 0 15px; box-sizing: border-box;
      justify-content: space-between; gap: 0;
      background: #fff; border-bottom: 1px solid #f3f3f3; }

  /* m-dot logo box is 140x25 with the art scaled to 18px tall. Legacy pins it */
  /* absolute (main_renewal.css:61, 0,3,4) and pads it 13px (_menu.asp:410); */
  /* (0,4,4) wins both, and static also disables main_renewal_v2.css:6 !important. */
  html .gnb_wrap.biz_menu_v2 nav.gnb_box h1.logo a {
      position: static; padding: 0; width: 140px; height: 25px;
      background-size: auto 18px; background-position: left center; }
  html .biz_menu_v2 .gnb_menu > h1.logo { flex: 0 0 auto; margin: 0 auto 0 0; }

  /* 3. m-dot .ham_menu: 20x16, three 2px bars. */
  .gnb-mobbtn { width: 40px; height: 40px; flex: 0 0 40px; display: flex;
                align-items: center; justify-content: center;
                background: none; border: 0; padding: 0; cursor: pointer; color: #1a1a1a; }
  .gnb-ham { flex-direction: column; justify-content: space-between;
             width: 20px; height: 16px; margin: 10px; flex: 0 0 20px; }
  .gnb-ham span { display: block; width: 100%; height: 2px; background: #1a1a1a; }
  /* mybiz/cart are <a>, so the header's anchor padding reaches them (40 -> 66) */
  html .biz_menu_v2 .gnb_menu > .gnb-mobbtn { padding: 0; width: 40px; }
  /* the four buttons sit as one group on the right, as they do on m-dot. */
  /* Nothing is needed on the buttons: h1.logo's margin-right:auto above already */
  /* takes all 95px of free space. Measured at 375 -- with an auto on the first */
  /* button too the 95 splits 47.5/47.5 and it lands at the same x=250. */

  /* 4. closed. :not(.gnbopen) carries its argument's weight, so (0,3,2) beats */
  /* _menu.asp:409 .biz_menu_v2 nav{display:flex} (0,1,1). */
  html:not(.gnbopen) .biz_menu_v2 .gnb_menu > nav,
  html:not(.gnbopen) .gnb-close { display: none; }

  /* 5. open: .gnb_menu leaves the flow, so .gnb_wrap keeps the 50px bar. */
  html.gnbopen, html.gnbopen body { overflow: hidden; }
  html.gnbopen .gnb_wrap.biz_menu_v2 { height: 50px; }
  html.gnbopen .biz_menu_v2 .gnb_menu {
      position: fixed; inset: 0; z-index: 9999; display: block;
      height: auto; padding: 50px 0 0 110px;
      overflow-y: auto; overflow-x: hidden;
      background: #fff; border-bottom: 0; }
  html.gnbopen .biz_menu_v2 .gnb_menu > h1.logo {
      position: fixed; top: 0; left: 0; right: 0; height: 50px; z-index: 2;
      display: flex; align-items: center; padding: 0 5px 0 15px; margin: 0;
      box-sizing: border-box; background: #fff; border-bottom: 1px solid #f3f3f3; }
  .gnb-search svg,
  .gnb-mybiz svg, .gnb-cart svg { width: 18px; height: 18px; }
  html.gnbopen .gnb-ham,
  html.gnbopen .gnb-search,
  html.gnbopen .gnb-mybiz,
  html.gnbopen .gnb-cart { display: none; }
  html.gnbopen .gnb-close {
      position: fixed; top: 5px; right: 4px; z-index: 3; display: flex; }

  /* 6. left rail = the 11 a.gnb_main_menu. (0,3,2)/(0,4,1) beat */
  /* _menu.asp:409-411 .biz_menu_v2 nav (0,1,1), nav a (0,1,2), nav a.hovered (0,1,2). */
  html.gnbopen .biz_menu_v2 .gnb_menu > nav {
      display: block; position: fixed; top: 50px; left: 0; bottom: 0; width: 110px;
      box-sizing: border-box; background: #f7f7f7; border-right: 1px solid #E4E5EC;
      overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
      scrollbar-width: none; z-index: 2; }
  html.gnbopen .biz_menu_v2 .gnb_menu > nav::-webkit-scrollbar { width: 0; }
  html.gnbopen .biz_menu_v2 .gnb_main_menu {
      display: flex; align-items: center; min-height: 52px; box-sizing: border-box;
      padding: 8px 8px 8px 14px; border-left: 3px solid transparent;
      font-size: 13px; line-height: 1.3; font-weight: 500; color: #555; }
  html.gnbopen .biz_menu_v2 .gnb_main_menu.hovered {
      background: #fff; border-left-color: #159fda;
      color: #159fda; font-weight: 700; padding-left: 11px; }

  /* 8. visibility is OURS, not legacy's. The 11 document handlers at */
  /* _menu.asp:3406 only strip .visible, so they now strip nothing that shows. */
  /* visibility needs !important: _menu.asp:3346/3372 write it inline. */
  html.gnbopen .biz_menu_v2 .sub-bar,
  html.gnbopen .biz_menu_v2 .grid-panel { display: none; }
  /* the chip row is gone: for 전체상품 its 8 triggers are 8 of the 11 rail
     categories, so it read as the same menu twice. Every group is stacked below
     instead, which is also what the 1a mockup shows. */
  html.gnbopen .biz_menu_v2 .sub-bar,
  html.gnbopen .biz_menu_v2 .sub-bar.mob-on { display: none; }
  html.gnbopen .biz_menu_v2 .grid-panel.mob-on {
      display: block; visibility: visible !important; }
  /* each panel is one group, headed by the label of the trigger that owns it */
  html.gnbopen .biz_menu_v2 .grid-panel.mob-on[data-tab]::before {
      content: attr(data-tab); display: block;
      font-family: 'Montserrat','YoonGothicPro760', sans-serif;
      font-size: 15px; font-weight: 700; color: #111;
      padding: 18px 0 2px; }
  html.gnbopen .biz_menu_v2 .grid-panel.mob-on:first-of-type[data-tab]::before {
      padding-top: 4px; }

  /* 9. sub-bar. Only `width` needs !important -- it is the one legacy */
  /* declaration that has it (_menu.asp:422, 0,2,0). position:static makes the */
  /* inline `left` the script writes at :3356 inert, so left needs nothing. */
  html.gnbopen .biz_menu_v2 .sub-bar {
      position: static; width: auto !important;
      flex-wrap: wrap; gap: 4px 6px; padding: 12px 16px 0;
      background: none; border: 0; border-radius: 0; box-shadow: none; }
  html.gnbopen .biz_menu_v2 .sub-bar a {
      padding: 6px 10px; border: 1px solid #E4E5EC; border-radius: 9999px;
      font-size: 11.5px; color: #555; white-space: normal; }
  html.gnbopen .biz_menu_v2 .sub-bar a.hovered {
      border-color: #159fda; color: #159fda; font-weight: 700; }
  html.gnbopen .biz_menu_v2 .sub-bar .p_logo { height: 18px; }

  /* 10. panel + bubble. width !important against _menu.asp:439 and :447; */
  /* html.gnbopen.biz_menu_v2 .grid-cell is (0,3,1) and beats .grid-cell.first */
  /* (0,3,0); ::after is (0,3,2) and its `display` is not !important upstream. */
  html.gnbopen .biz_menu_v2 .grid-panel {
      position: static; width: 100% !important; min-width: 0; max-width: 100%;
      padding: 12px 16px 24px; box-sizing: border-box; }
  html.gnbopen .biz_menu_v2 .grid-panel * { box-sizing: border-box; max-width: 100%; }
  html.gnbopen .biz_menu_v2 .grid-cell {
      display: block; width: auto !important; white-space: normal;
      border: 0; border-radius: 0; padding: 0; box-shadow: none; background: none; }
  html.gnbopen .biz_menu_v2 .grid-cell::after { display: none; }

  /* 11. group title + 2-column product grid. .cell-title is a SIBLING of the */
  /* links (206 titles in 158 columns), so it spans the row instead of wrapping. */
  html.gnbopen .biz_menu_v2 .column-section {
      display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
      padding: 0; border-right: 0; min-width: 0; width: auto; margin: 0 0 18px; }
  html.gnbopen .biz_menu_v2 .cell-title {
      grid-column: 1 / -1; display: flex; align-items: center; gap: 6px;
      margin: 0 0 2px; font-size: 12.5px; font-weight: 700; color: #111; }
  html.gnbopen .biz_menu_v2 .cell-title::before {
      content: ''; flex: 0 0 4px; width: 4px; height: 4px;
      border-radius: 9999px; background: #159fda; }
  html.gnbopen .biz_menu_v2 .cell-link {
      display: flex; align-items: center; gap: 4px; min-height: 44px;
      padding: 6px 9px; border: 1px solid #E4E5EC; border-radius: 8px;
      background: #fff; font-size: 11.5px; font-weight: 500; color: #333;
      line-height: 1.35; white-space: normal; word-break: keep-all; }
  /* anchored on .biz_menu_v2: the home page body carries 18 more .gnb_label */
  /* sub.css:2089 pins it to 17px border-box, so the padding added here left a 3px */
  /* content box for a 6.4px glyph. Flex centres it whatever line-height wins. */
  html.gnbopen .biz_menu_v2 .gnb_label {
      flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
      width: auto; min-width: 16px; height: 16px; padding: 0 4px;
      border-radius: 9999px; font-size: 9px; }

  /* 11a. four GNB entries the narrow drawer drops. Hidden, not cut from */
  /* _menu.asp: gen_07.py regenerates it from 02, and desktop keeps all four. */
  /* #menu_11 is (1,2,1) over .gnb_main_menu (0,3,1); alignSubBar is never called. */
  html.gnbopen .biz_menu_v2 #menu_11 { display: none; }
  /* [부채] three of four links, keyed on href so the copy in panel-all-season */
  /* cannot be missed. 종이부채 stays, so the group is never left empty. */
  html.gnbopen .biz_menu_v2 .cell-link[href$="pc=PROD0047"],
  html.gnbopen .biz_menu_v2 .cell-link[href$="pc=PROD0152"],
  html.gnbopen .biz_menu_v2 .cell-link[href$="pc=PROD0151"] { display: none; }

  /* 12. the 셀프디자인 family has 0 .cell-link -- its 360 leaves are <li>. */
  /* NEVER add !important to this display: 121 of them carry an inline */
  /* display:none that is STATE (dynamicType/quality filter), not dead markup. */
  html.gnbopen .biz_menu_v2 .list01 { grid-column: 1 / -1; }
  html.gnbopen .biz_menu_v2 .list01 ul {
      display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  html.gnbopen .biz_menu_v2 .list01 li {
      display: flex; align-items: center; min-height: 44px; padding: 6px 9px;
      border: 1px solid #E4E5EC; border-radius: 8px; background: #fff;
      font-size: 11.5px; line-height: 1.35; white-space: normal; word-break: keep-all; }

  /* <select> must stay inside its own .item_dropdown: fnGoEditor reads it with */
  /* $(el).closest('.item_dropdown') (_menu.asp:719/725/732). Nothing is moved. */
  html.gnbopen .biz_menu_v2 .item_dropdown { grid-column: 1 / -1; display: block; }
  /* one li wide: the ul below is two 1fr columns with an 8px gap. Block, so */
  /* stacked selects never share a line. Arrow (10x5.26) is 17.4px from every */
  /* outer edge: (40-5.26)/2 above and below, 1px border + 16.4 on the right. */
  html.gnbopen .biz_menu_v2 .item_dropdown select {
      display: block; width: calc(50% - 4px); min-height: 40px;
      margin: 0 0 8px !important; padding: 6px 30px 6px 8px !important;
      font-size: 13px; text-overflow: ellipsis;
      background-position: right 16.4px center; }
  /* 8px above the select as well: the column-section gap already gives 8, so */
  /* the title's own 2px goes; margins do not collapse across the grid item. */
  html.gnbopen .biz_menu_v2 .cell-title:has(+ .item_dropdown) { margin-bottom: 0; }
  /* legacy breaks the stacked selects with <br>; between blocks it would add */
  /* a 17px line box. Direct child only: the note <div> of [대형 현수막] keeps its own. */
  html.gnbopen .biz_menu_v2 .item_dropdown > br { display: none; }
  /* strictly equal columns, so one long label cannot widen a li past the select */
  html.gnbopen .biz_menu_v2 .item_dropdown > ul {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* [대형 현수막]: uWidth × uHeight stay on one line; !important beats the */
  /* inline width:50%. Keyed on the select name, not .list02: [트라이탄 컵] */
  /* carries .list02 too and has a ul that must stay on its own row. */
  html.gnbopen .biz_menu_v2 .item_dropdown:has(> select[name="editor_uWidth"]) {
      display: flex; flex-wrap: wrap; align-items: center; }
  html.gnbopen .biz_menu_v2 .item_dropdown:has(> select[name="editor_uWidth"]) > select {
      flex: 1 1 0; width: auto !important; min-width: 0; }
  /* the × owns the 8px column gap, so each select is (100% - 8px) / 2 = one li. */
  /* Flex-centred: the glyph (8-9px) may overflow the slot equally on both */
  /* sides. Same bottom margin as the selects: align-items centres MARGIN boxes. */
  html.gnbopen .biz_menu_v2 .item_dropdown:has(> select[name="editor_uWidth"]) > span {
      flex: 0 0 8px; min-width: 0; display: flex; justify-content: center;
      align-items: center; margin-bottom: 8px; }
  html.gnbopen .biz_menu_v2 .item_dropdown:has(> select[name="editor_uWidth"]) > div {
      flex: 0 0 100%; }

  /* 13. 마이비즈 drawer: mockup md-* geometry (the 20px set, which wins when the */
  /* mockup renders); --c-* tokens written out, they live on .rwdc only. */
  /* chrome.js appends .gnb-acc-overlay + .gnb-acc to <body> on the first tap. */
  html.accopen .gnb-acc, html.accopen .gnb-acc-overlay { display: block; }
  html.accopen, html.accopen body { overflow: hidden; }
  .gnb-acc-overlay { position: fixed; inset: 0; z-index: 9990; background: transparent; }
  .gnb-acc { position: fixed; top: 0; left: 0; bottom: 0; width: 82%; max-width: 320px;
             z-index: 9995; overflow-y: auto; -webkit-overflow-scrolling: touch;
             background: #fff; box-shadow: 0 0 24px rgba(20,30,50,.14); box-sizing: border-box;
             font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
                          "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
  /* the header's own X closes it, as in the mockup; the four buttons hide */
  html.accopen .gnb-ham, html.accopen .gnb-search,
  html.accopen .gnb-mybiz, html.accopen .gnb-cart { display: none; }
  html.accopen:not(.gnbopen) .gnb-close { position: fixed; top: 5px; right: 4px; z-index: 9999; display: flex; }
  .gnb-acc-greeting { padding: 15px 20px 11px; font-size: 15px; line-height: 1.4; color: #3a3d44;
                      border-bottom: 1px solid #eef0f3; overflow-wrap: anywhere; }
  .gnb-acc-greeting b { font-weight: 800; color: #222428; }
  .gnb-acc-list { list-style: none; margin: 0; padding: 0; }
  .gnb-acc-list > li { border-bottom: 1px solid #eef0f3; }
  .gnb-acc-head { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0;
                  padding: 15px 20px; box-sizing: border-box; font: inherit; font-size: 15px;
                  font-weight: 700; line-height: 1.3; color: #222428; background: none; border: 0;
                  border-radius: 0; cursor: pointer; text-align: left; text-decoration: none; }
  .gnb-acc-head::before { content: ''; width: 6px; height: 6px; border-radius: 50%;
                          background: #159fda; flex: 0 0 auto; }
  .gnb-acc-arr { margin-left: auto; color: #9aa0a8; font-size: 18px; line-height: 1;
                 transition: transform .2s; }
  .gnb-acc-list > li.open .gnb-acc-arr { transform: rotate(90deg); }
  .gnb-acc-body { display: none; padding: 4px 0 12px; background: #f6f7f9; }
  .gnb-acc-list > li.open .gnb-acc-body { display: block; }
  .gnb-acc-body a { display: block; padding: 10px 20px 10px 34px; font-size: 13.5px;
                    line-height: 1.4; color: #6b7079; text-decoration: none; }
  .gnb-acc-body a:active { color: #159fda; }
  .gnb-acc-logout { display: block; margin: 6px 20px 12px; padding: 11px 0; text-align: center;
                    font-size: 13.5px; font-weight: 700; line-height: 1.4; color: #6b7079;
                    border: 1px solid #e6e8ec; border-radius: 8px; text-decoration: none; }
  .gnb-acc-auth { padding: 16px 20px; border-bottom: 1px solid #eef0f3; display: flex; gap: 10px; }
  .gnb-acc-auth a { flex: 1; text-align: center; padding: 10px 0; border-radius: 8px;
                    font-size: 15px; font-weight: 700; line-height: 1.3; background: #159fda;
                    color: #fff; text-decoration: none; }
  .gnb-acc-auth a.ghost { background: #fff; color: #1b2a4a; border: 1.5px solid #1b2a4a; }
}

/* ---------------------------------------------------------------- FOOTER */
/* Same method as the GNB above: no new markup, only rules on the elements */
/* _footer.asp already ships. Nothing here runs at >=1024, so the desktop */
/* footer is the legacy one, untouched. */

@media (max-width: 1023px) {

  /* 1. quick-link bar -> three-up cards. Beats the inline <style> in
     _footer.asp (.foot_line_banner ul{width:1200px}) on source order: that
     block is in <body>, this sheet is linked after it. */
  .foot_line_banner { background: #f4f5f7; border-bottom: 1px solid #e6e8ec; }
  .foot_line_banner ul {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
      width: auto; margin: 0; padding: 14px 16px; box-sizing: border-box; }
  .foot_line_banner ul li { display: block; }
  .foot_line_banner ul li a {
      display: flex; align-items: center; justify-content: center; height: 46px;
      box-sizing: border-box; border: 1px solid #e6e8ec; border-radius: 8px;
      background: #fff; font-size: 13px; color: #555; }

  /* 2. shell. main_renewal.css:322-323 pads footer 40/0 and pins .foot_wrap
     to 1200px; the grid re-orders the four blocks, which the markup cannot --
     the 고객센터 block is the FIRST child but has to render last. */
  footer { padding: 0; border-top: 1px solid #e6e8ec; }
  footer .foot_wrap {
      display: grid; grid-template-columns: 1fr auto; column-gap: 12px;
      width: auto; margin: 0; padding: 20px 16px 24px; box-sizing: border-box; }
  footer .foot_wrap > nav                { grid-row: 1; grid-column: 1 / 3; }
  footer .foot_wrap > p.info             { grid-row: 2; grid-column: 1 / 3; }
  footer .foot_wrap > .foot_copy         { grid-row: 3; grid-column: 1; align-self: end; }
  footer .foot_wrap > .illegal_guide_btn { grid-row: 3; grid-column: 2;
                                           justify-self: end; align-self: end; }
  footer .foot_wrap > .foot_service      { grid-row: 4; grid-column: 1 / 3; }

  /* 3. nav: one scrollable row of small links. The h3 is a screen-reader
     label (.ir_pm), so it must not take a slot in the flex row. */
  footer .foot_wrap nav {
      display: flex; flex-wrap: nowrap; gap: 0; overflow-x: auto;
      scrollbar-width: none; margin: 0 0 14px; padding: 0 0 10px;
      border-bottom: 1px solid #eef0f3; }
  footer .foot_wrap nav::-webkit-scrollbar { display: none; }
  footer .foot_wrap nav h3 { display: none; }
  footer .foot_wrap nav a {
      flex: 0 0 auto; margin-right: 0; padding: 3px 10px;
      font-size: 12px; color: #3a3d44; white-space: nowrap; }
  footer .foot_wrap nav a:first-of-type { padding-left: 0; }

  /* 4. business info. p.info mixes <span> with bare text nodes, which no
     selector reaches -- but a break is a POSITION, so the two the mockup needs
     are set from the span in front of each. Divider image off: it rules ONE line. */
  footer .foot_wrap p.info { font-size: 12px; line-height: 1.7; color: #6b7079; }
  footer .foot_wrap p.info span {
      padding-right: 0; margin-right: 8px; background: none; }
  footer .foot_wrap p.info > span:first-child { font-weight: 700; color: #222428; }
  footer .foot_wrap p.info > span:nth-of-type(3)::after,
  footer .foot_wrap p.info > span:last-of-type::after {
      content: "\A"; white-space: pre; }

  /* 5. copyright row */
  footer .foot_wrap .foot_copy { margin-top: 14px; font-size: 11px; color: #aab0b8; }
  footer .foot_wrap .illegal_guide_btn {
      position: static; margin-top: 14px; padding: 7px 12px; box-sizing: border-box;
      border: 1px solid #c5c9cf; border-radius: 4px; background: #9aa1ab;
      color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; }

  /* 6. 고객센터 block: absolute at desktop, a centred column here */
  footer .foot_wrap .foot_service {
      position: static; display: flex; flex-direction: column; align-items: center;
      width: 100%; margin-top: 20px; padding-top: 18px;
      border-top: 1px solid #e6e8ec; color: #6b7079; }
  /* .ir_pm indents the whole line -9999px, which would take the <img> with it;
     the icons only survive because the li is 16px and clips it. */
  footer .foot_wrap .foot_service ul {
      position: static; top: auto; left: auto; display: flex; gap: 10px;
      justify-content: center; margin: 0 0 4px; }
  footer .foot_wrap .foot_service ul li {
      width: 28px; height: 28px; margin-left: 0; text-indent: 0; }
  footer .foot_wrap .foot_service ul li a {
      display: flex; align-items: center; justify-content: center;
      width: 28px; height: 28px; }
  footer .foot_wrap .foot_service ul li img { width: 18px; }
  footer .foot_wrap .foot_service h3 { font-size: 12px; font-weight: 400; color: #6b7079; }
  footer .foot_wrap .foot_service h3 span { margin-left: 6px; font-size: 12px; }
  footer .foot_wrap .foot_service .num {
      margin-top: 2px; font-size: 26px; font-weight: 900; color: #222428;
      line-height: 1.15; letter-spacing: -.02em; }
  footer .foot_wrap .foot_service .time_box {
      margin-top: 4px; padding-left: 21px; font-size: 12px; line-height: 1.6;
      background-size: 15px auto; background-position: 0 2px; }
  footer .foot_wrap .foot_service .time_box .break { color: #222428; }

  /* 7. fixed quick buttons: one column with the back-to-top of 8, 42px, 10px
     apart as on desktop. The client's `label: display none` is not taken --
     07's .ban_off has no <img>, so that leaves a blank circle. */
  .biz_old_go, .biz_newold_notice, .biz_notice, .biz_user_guide {
      right: 10px; width: 42px; height: 42px; }
  .biz_user_guide { bottom: 72px; }
  .biz_notice { bottom: 124px; }
  .biz_newold_notice { bottom: 176px; }
  .biz_old_go { bottom: 228px; }
  .biz_old_go .ban_off, .biz_newold_notice .ban_off,
  .biz_notice .ban_off, .biz_user_guide .ban_off { width: 42px; height: 42px; }
  .biz_old_go .quick_hover_txt, .biz_newold_notice .quick_hover_txt,
  .biz_notice .quick_hover_txt, .biz_user_guide .quick_hover_txt {
      width: 42px; height: 42px; font-size: 9px; line-height: 11px; }
  /* an open 마이비즈 drawer's overlay takes every tap beside it: hide the column */
  html.accopen .biz_old_go, html.accopen .biz_newold_notice, html.accopen .biz_notice,
  html.accopen .biz_user_guide, html.accopen .top_btn { visibility: hidden; }

  /* 8. back-to-top. This is the only one that ever worked: _footer.asp binds
     it with jQuery, while the fragment's own .mob-top waited for a class no
     script added. !important answers the inline .top_btn{bottom:55px !important}. */
  .top_btn { right: 10px !important; bottom: 20px !important; }
  .top_btn button { width: 42px; height: 42px; }
}

@media (max-width: 767px) {
  /* the client's sheet hides both on phones: they cover right-hand CTAs, and
     구버전 opens a 1300x850 popup that means nothing on a phone. */
  .biz_old_go, .biz_newold_notice { display: none; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .foot_line_banner ul { grid-template-columns: repeat(6, 1fr); padding: 14px 24px; }
  /* 62px on the right keeps the 고객센터 block out of the quick-button column
     of 7 (10 + 42 + 10px); at 24px its number sat under the buttons. */
  footer .foot_wrap {
      grid-template-columns: 1fr auto 220px; column-gap: 30px; padding: 20px 62px 24px 24px; }
  footer .foot_wrap > nav                { grid-column: 1 / 3; }
  footer .foot_wrap > p.info             { grid-column: 1 / 3; }
  footer .foot_wrap > .foot_service      { grid-row: 1 / 4; grid-column: 3; }
  footer .foot_wrap .foot_service {
      align-items: flex-end; width: auto; margin-top: 0; padding-top: 0; border-top: 0; }
  footer .foot_wrap .foot_service .time_box { text-align: right; }
}
