/* Mobile layout for the legacy 938px table site.
   Everything sits inside one media query, so desktop (768px and wider) renders exactly as before.
   Needs <meta name="viewport" content="width=device-width, initial-scale=1"> and body class tk-m-main / tk-m-sub. */
@media (max-width: 767px) {
  html { -webkit-text-size-adjust: 100%; }
  body { min-width: 0; overflow-x: hidden; }
  img { max-width: 100%; height: auto; }
  /* every fixed-width layout table on the site (380 to 1400px) fits the screen; images inside then scale down */
  table[width="380"], table[width="665"], table[width="675"], table[width="680"], table[width="810"], table[width="938"],
  table[width="950"], table[width="1000"], table[width="1200"], table[width="1240"], table[width="1250"], table[width="1400"] {
    width: 100% !important; height: auto !important; table-layout: fixed; }
  td[width="400"], td[width="450"], td[width="680"], td[width="737"], td[width="737px"], td[width="800"] { width: auto !important; }
  iframe, object, embed, video { max-width: 100%; }
  /* product tabs (sub02/01): the tab row stacks its cells; the &nbsp; spacer between content and brochures goes */
  .tk-m-sub tr.tabcontent { height: auto !important; }
  .tk-m-sub tr.tabcontent > td { display: block; width: auto !important; }
  .tk-m-sub tr.tabcontent > td:nth-child(2):nth-last-child(2) { display: none; }
  /* history (sub01/04): year text and photos stack; the boxes had fixed pixel heights for the desktop line length */
  .tk-m-sub tr:has(> td > .history_desc) > td { display: block; width: auto !important; }
  .tk-m-sub .history_desc { height: auto !important; margin-bottom: 12px; }
  /* product tabs (sub02/01): five buttons in a 3 + 2 grid, labels may wrap */
  .tk-m-sub .tab { width: auto; height: auto; display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
  .tk-m-sub .tab .tablinks { float: none; flex: 1 1 30%; width: auto; height: auto; min-height: 40px; padding: 4px; line-height: 1.3; white-space: normal; }
  /* news gallery (sub08 lists): one full-width card per row */
  /* the list page's own <style> comes after this file, hence !important */
  #board_list_gallery > ul { margin-left: 0 !important; margin-right: 0 !important; }
  #board_list_gallery > ul > li { float: none !important; display: block !important; width: 100% !important;
    padding: 0 !important; min-height: 0 !important; margin: 0 0 14px !important; }
  /* product photo slider (sub02/06, lightSlider) had a fixed 670px box in the page */
  .demo { width: auto !important; max-width: 100%; }
  /* page level wrapper tables would grow to their widest content (fixed images, nowrap tables), so they become plain blocks */
  body > table, body > table > tbody, body > table > tbody > tr, body > table > tbody > tr > td { display: block; width: auto !important; }
  body > table > tbody > tr > td { height: auto !important; }

  td[height="25"] td[align="right"] { padding: 4px 8px 2px; }
  /* header: top links + logo stay, the 7 menu images wrap 4 + 3, hover sub menus are dropped */
  #top_wrap { height: auto; background-color: #3b3b3b; background-repeat: repeat; }
  #top_wrap .top_menu, #top_wrap .top_menu .menu_wrap { width: auto; padding: 4px 0; }
  #top_wrap .top_menu .menu_wrap > ul { display: flex; flex-wrap: wrap; justify-content: center; }
  #top_wrap .top_menu .menu_wrap > ul > li { float: none; width: 25%; padding: 0; text-align: center; }
  #top_wrap .top_menu .menu_wrap > ul > li img { display: inline-block; max-width: 100%; }
  #top_wrap .top_menu .menu_wrap > ul > li img.over { display: none; }
  #top_wrap .top_menu .menu_wrap .s_mens { display: none; }

  /* footer (tools/footer.py): buttons wrap, everything centred, address lines stack */
  .tk-foot-in { width: auto; padding: 16px 12px 20px; text-align: center; }
  .tk-foot-top { flex-direction: column; gap: 10px; }
  .tk-foot-btns { flex-wrap: wrap; justify-content: center; }
  /* three buttons per row: Korean 5 -> 3 + 2, English 6 -> 3 + 3 */
  .tk-foot-btns { width: 100%; max-width: 360px; }
  .tk-foot-btns li { flex: 0 0 calc((100% - 12px) / 3); }
  .tk-foot .tk-foot-btns a { display: block; padding: 7px 4px; text-align: center; }
  .tk-foot-links a + a::before { margin: 0 6px; }
  .tk-foot-addr span { display: block; }
  .tk-foot-addr span + span { display: inline-block; margin: 0 6px; }
  .tk-foot-copy { letter-spacing: 0; }

  /* sub pages: the banner sits in normal flow above the content instead of under an absolute layer */
  .tk-m-sub .sub_topbg { background-image: none; }
  .tk-m-sub .sub_topbg > table { width: 100% !important; height: auto !important; }
  .tk-m-sub .sub_topbg > table, .tk-m-sub .sub_topbg > table > tbody, .tk-m-sub .sub_topbg > table > tbody > tr { display: block; }
  .tk-m-sub .sub_topbg > table > tbody > tr > td { display: flex; flex-direction: column; }
  .tk-m-sub .sub_conbg > table, .tk-m-sub .sub_conbg > table > tbody, .tk-m-sub .sub_conbg > table > tbody > tr { display: block; }
  .tk-m-sub .sub_conbg { position: static; order: 2; }
  .tk-m-sub .sub_topbg img[src*="subtop_"] { display: block; width: 100%; height: auto; padding: 0 !important; }
  .tk-m-sub .sub_conbg > table > tbody > tr > td { display: block; width: auto !important; padding: 0 12px; }

  /* sub pages: left menu becomes a two column button grid above the content */
  .tk-m-sub td[width="240"] img[src*="sub_titles"],
  .tk-m-sub td[width="240"] img[src*="sub_sm_bg"],
  .tk-m-sub td[width="240"] img[src*="left_banner"] { display: none; }
  .tk-m-sub td[width="240"] > table > tbody > tr:not(:first-child) { display: none; }
  .tk-m-sub td[width="240"] > table > tbody > tr:first-child > td { height: auto; }
  .tk-m-sub td[width="240"] > table > tbody > tr:first-child > td > table > tbody { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 10px 0 4px; }
  .tk-m-sub td[width="240"] > table > tbody > tr:first-child > td > table > tbody > tr { display: block; }
  .tk-m-sub td[width="240"] > table > tbody > tr:first-child > td > table > tbody > tr:first-child,
  .tk-m-sub td[width="240"] > table > tbody > tr:first-child > td > table > tbody > tr:last-child { display: none; }
  .tk-m-sub td[width="240"] > table > tbody > tr:first-child > td > table > tbody > tr > td { display: block; }
  .tk-m-sub td[width="240"] > table > tbody > tr:first-child > td a.roll img { width: 100%; }

  /* sub pages: title row */
  .tk-m-sub #sub_title, .tk-m-sub #sub_title2 { height: auto; margin: 14px 0 18px; padding-bottom: 8px; }
  .tk-m-sub #sub_title td, .tk-m-sub #sub_title2 td { display: block; text-align: left; height: auto; }

  /* IR stock page */
  .tk-stock-asof { float: none; display: block; margin-top: 2px; }
  .tk-stock-price { font-size: 26px; }
  .tk-stock-sum, .tk-stock-sum tbody { display: block; }
  .tk-stock-sum tr { display: grid; grid-template-columns: 22% 28% 22% 28%; }
  .tk-stock-sum th, .tk-stock-sum td { width: auto; padding: 7px 6px; }
  .tk-stock-sum td { text-align: right; }
  .tk-stock-days { display: block; overflow-x: auto; white-space: nowrap; }
  .tk-stock-link { text-align: center; }
  .new_a th[width] { width: auto; }

  /* main page: the visual image first, the notice / tab box under it, the side buttons last */
  .tk-m-main table[width="938"], .tk-m-main table[width="938"] > tbody, .tk-m-main table[width="938"] > tbody > tr { display: block; }
  .tk-m-main table[width="938"] > tbody > tr > td { display: block; width: auto !important; }
  .tk-m-main table[width="938"] > tbody > tr > td[width="737px"] { display: flex; flex-direction: column; }
  .tk-m-main td[width="737px"] > img { order: 1; align-self: center; }
  .tk-m-main td[width="737px"] > div { order: 2; position: static !important; }
  .tk-m-main td[width="737px"] > div > div { position: static !important; width: auto !important; height: auto !important;
    max-width: 360px; margin: 16px auto 0; padding: 0 12px; }
  /* E-BOOK / PRODUCTS tabs stay side by side on top of the picture as on the desktop */
  .tk-m-main #m1 > table, .tk-m-main #m2 > table { width: auto; margin: 0 auto; }
  .tk-m-main #m1 img, .tk-m-main #m2 img { display: block; }
  .tk-m-main td[width="737px"] .small a { display: inline-block; padding: 4px 0; font-size: 13px; }
  .tk-m-main td[width="175"] { margin-top: 12px; }
  .tk-m-main td[width="175"] > table td { text-align: center; height: auto; }
  .tk-m-main td[width="175"] table[width="175"] { margin: 0 auto; }
  .tk-m-main td[width="175"] img[src*="rline"] { display: none; }
}